JavaScript備忘録
React でフォーム管理入門:React Hook Form で楽にバリデーションまで作る新着!!

React でフォームを作ると、useState を入力欄の数だけ並べ、onChange を書き、バリデーションを手で組み、エラー表示の状態も別途管理し……と、あっという間にコンポーネントが肥大化します。React Hook Form(以下…

続きを読む
JavaScript備忘録
ESLint + Prettier の設定ベストプラクティス(React / TypeScript)

React プロジェクトで ESLint と Prettier を併用すると、「保存のたびに整形が競合して怒られる」「どちらが何を担当しているのか曖昧なまま設定ファイルが肥大化する」という問題が起きがちです。

続きを読む
JavaScript備忘録
Reactのカスタムフック設計パターン集

Reactのカスタムフックは「状態を持ったロジックの再利用」を実現する仕組みです。しかし書き方の指針がないまま切り出すと、「ただ関数に分けただけ」で終わり、再利用性も可読性も上がらないことがあります。

続きを読む
JavaScript備忘録
React の useEffect 完全理解 — 依存配列の罠

useEffect は React のフックの中でも最も使う機会が多く、そして最も誤解されやすいものです。特に「依存配列(第2引数)に何を書くか」で挙動が大きく変わり、初心者がハマる原因の大半はここに集中しています。

続きを読む
JavaScript備忘録
React の useState / useReducer 使い分けガイド

React で状態管理をするとき、まず最初に手が伸びるのは useState です。多くの場面ではそれで十分ですが、状態が絡み合ってくると useState の羅列がだんだん破綻していきます。そこで登場するのが useReducer です。

続きを読む
JavaScript備忘録
Reactのコンポーネント設計原則 ― 入門から実務で迷わないための指針

Reactを書き始めると、まず動くものは作れます。しかしプロジェクトが育つにつれ「このコンポーネント、どこまで責務を持たせるべきか」「propsが増えすぎて扱いづらい」「状態をどこに置けばいいか分からない」といった悩みに必ずぶつかります。

続きを読む
JavaScript備忘録
Vite + React + TypeScript で開発環境を構築する

React のフロントエンド開発を始めるとき、ビルドツールに Vite を選ぶのは今や標準的な選択肢です。かつて主流だった Create React App(CRA)はメンテナンス体制が縮小し、公式でも新規プロジェクトには Vite などの…

続きを読む
JavaScript備忘録
React 19 の新機能まとめ(入門)

React 19 で追加された Actions・use・Server Components などの新機能を、入門者向けに要点だけまとめました。

続きを読む