はてなブックマーク

React 関連の参考になる記事まとめ初学者・中級者が React をうまく使うために、参考にしてほしい良記事を集めました。React での開発で使えるものであれば Web 一般のものも含みます。 自分の記事が多めです。 Reactフロントエンド

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

React Hook Form の場合 いきなりですが、下のコードを見てください。 「姓」と「名」の入力フィールドがあって、その下にある「ちゃんと再計算される氏名」に続いて姓と名をつなげた文字列が出力されます。 「ちゃんと再計算される氏名」は、姓および名を入力するたびにキチンと更新されます。 "use client"; import { type FC } from "react"; import { useForm } from "react-hook-form"; type ProfileFormValues = { familyName: string; personalName: string; }; const ProfileEditPage: FC = () => { const { watch, // // getValues, register, handleSubmit,

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

App Router では Server Component 中心になるらしいけど、動きがある要素には Client Component が必要になるから、どうせ全部 Client Component で書くことになるんでしょ？ Next.js App Router で Server component (以下 Server Comp.) に触れようとすると、このような疑問が出てくるかもしれません。しかし、Composition パターンによって 「Client Comp. の中に Server Comp. が入っているように見える」画面を実現できるようになります。 前置きの前置き: 公式ドキュメント Next.js 公式ドキュメントには、 Next.js における Server Comp. と Client Comp. の使い方についての記述があります。当記事はこのドキュメントを希釈した

Props のバケツリレー (Props Drilling) を解決したいからといって、安易に Context を使ったり、状態管理ライブラリ(Recoil, Jotai, Redux)に頼ったりしていませんか？ そんなことをせずとも、「CompA が CompB を使い、CompB が CompC を使い、 CompC が ...」という依存関係のチェーンを浅くするのが最善の解決策である場合があります。 KISS (Keep It Simple Stupid) という名言があります。暗黙的な連携が発生しない「Props を渡すだけ」のシンプルな関係性を守ることによって、将来のコード読解が楽になり、メンテナンスが容易になり、そもそもバグの混入を防ぐことができます。一石三鳥ですね。 前回の記事では「そもそも無駄なコンポーネントを挟まない」テクニックを紹介しましたが、それでも除ききれなかった

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

import { useCallback, useState } from "react"; import { Button, Grid, Input, Paper, Text, Title } from "@mantine/core"; type Props = { onCreateTodoItem: (newItem: { title: string }) => void; }; const TodoCreateArea: React.FC<Props> = ({ onCreateTodoItem }) => { const [title, setTitle] = useState<string>(""); const handleClickCreate = useCallback(() => { onCreateTodoItem({ title: title }); + setTit

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「Divide and Conquer / 分割統治法」 という解法（アルゴリズムの話でよく出てきますね）は、「困難は分割せよ」 として知られる、デカルトが『方法序説』で提唱した思考法が元になっています1。 第二は、わたしが検討する難問の一つ一つを、できるだけ多くの、しかも問題をよりよく解くために必要なだけの小部分に分割すること。 ―― 岩波文庫 『方法序説』 デカルト著 谷川多佳子訳 同様に、React で多機能で複雑な画面を作りたい時、それを小さな機能の集まりと捉えて、それぞれをコンポーネントにすることで、開発がラクになることがあり

React において、 「フルネームは、名字と名前をつなげたもの(名字と名前は変わりうる)」 はどのように表せば良いのでしょうか？ useState + useEffect でしょうか？ useEffect は変更検知のためのものではありません。 useState は、「Prop・他のステートが変化するたびに毎回反応する」ような書き方をするのに向いていません。コードは無駄に長くなりますし、SSoT (Single Source of Truth) の原則に則していないので読みづらいです。 むしろ「ほかの値が変わっても、この値は変わらない」というケースに有効ですが、この点については、 『２. useState は初回レンダー（マウント）時のみ代入される』の章で述べます。 詳しい人は 「useMemo を使えばいい」と御存知かもしれませんが、 useMemo のことを「依存配列の値が変わったら

useEffect とは何か、ご存知ですか？ useEffect？ 知ってるよ。 依存配列に入れた値が変更されるたびに関数が実行されるフックでしょ？ これは半分正解ですが、半分間違っています。 useEffect のデフォルトの挙動は「レンダーのたびに毎回実行」です。 依存配列は「変わった時に実行する」というより「変わらなければスキップ」と捉えたほうが良いかもしれません。 useEffect は再レンダー以外の変化を検知できません。 特にミュータブルなオブジェクトが絡む場合は注意 React 公式のドキュメントの解説を見ながら、以上の2つのポイントに絞って、誤解を解いていこうと思います。 宣伝 useMemo, useState についても記事を書きました。よかったらこちらも確認してください。 2023/10/03 追記: ブラッシュアップしました ブラッシュアップしたので、そちらの記事も

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに：この記事を書いた動機 これらの素晴らしい先行記事を見て、「言語学を用いれば、共通点を見つけ出して一般化・大項目化したり、取り違えやすいエッジケースを明確化できるんじゃないか？」と思ったことが、この記事を書き始めたきっかけになります。 １章は３つの主要なパターンとその詳細・例外、２章はそれらに関する文法的な解説になっています。 構造化・体系化が必要な理由 太郎くんと花子さんが英作文の問題を解いています。 次の日本語を英文に訳せ。 (1) 彼女は楽しい人だ。彼女といると退屈することがない。彼女はいつも新しいことに挑戦して…… 太郎くん（『楽しい』って英語で何やったっけ……） 狩井先生@ 1年6月「exciting は楽しいって意味やで～」 ~~ 月日が流れる ~~ 柱鈴先生@ 2年4月「excited は楽しいって意味やで～」 太郎くん（……って教わったけど、exciting か e