PR：この記事にはアフィリエイトリンクが含まれます。
Reactで画面を組み始めると、意外と迷うのが値をどこに置き、どの部品が更新するのかという判断です。Hooksとコンポーネント設計は別のテーマに見えますが、実務ではどちらも状態の扱いに関わります。
状態管理と聞くと、大きなライブラリを使う話だと思うかもしれません。最初はuseStateやContextで何を管理できるかをつかみ、小さな画面で試すところから始めましょう。機能が増えても、この理解があれば設計を整理できます。
ReactのHooksや状態管理、コンポーネント設計を学べる4冊を紹介します。React 19対応を明示する本から、JavaScriptの基礎をふまえてアプリ制作へ進む本まであり、扱う範囲はそれぞれ異なります。
4冊の早見表
4冊はいずれも紙書籍です。Reactの基礎からアプリ開発まで進む本もあれば、Hooksや状態管理の実習に重点を置く本もあります。
| 書籍 | 中心テーマ | ページ数 | 参考価格（税込） |
|---|---|---|---|
 プロフェッショナルWebプログラミング React | Hooks、状態管理、TODOアプリ | 320ページ | 3,300円 |
 React本格入門 ～実践力が身に付くコンポーネント開発～ | 部品設計、propsとstate、アプリ開発 | 304ページ | 3,300円 |
 改訂新版 これからはじめるReact実践入門 | React、TypeScript、Next.js | 688ページ | 4,455円 |
 挫折しないReactの教科書 作りながら学ぶWeb開発 | 基礎、ToDo・メモアプリ、実務機能 | 472ページ | 3,520円 |
価格は税込の参考価格です。販売価格は時期や店によって変わるため、購入時に最新価格を確認してください。
React 19対応を明示しているのは3冊で、もう1冊は初学者向けにJavaScriptからアプリ制作へ進みます。Reactの基礎を固める本か、実装例を通して機能を作る本かで特色が分かれます。
Reactの状態とは
状態とは、画面の表示や動きを決める値です。検索欄に入力した文字や開閉するメニュー、カート内の商品一覧などが身近な例ですね。
状態が変わると、Reactはその値を使うコンポーネントを再描画します。値の更新には更新用の関数を使うのが基本で、直接書き換えることはしません。
合計金額のように、ほかの状態から計算できる値もあります。別の状態として重ねて保存すると、片方だけが更新されて値がずれることも。必要なときに計算すれば、こうしたずれを防ぎやすくなります。
画面内だけで使う状態もあれば、複数の画面や機能で共有する状態もあります。最初から全部を共通管理にせず、使う範囲に合わせて置き場所を考えましょう。
Hooksの役割
Hooksを使うと、関数コンポーネントで状態などReactの機能を扱えます。呼び出す場所はコンポーネントや自作Hookのトップレベルです。条件分岐やループの中には置かない、というルールもあります。
入力値や選択中のタブのような単純な状態は、useStateで管理できます。更新関数を呼ぶと再描画が起き、新しい値に合わせて画面が表示されます。
更新方法が複数ある状態は、useReducerでルールをまとめられます。TODOアプリなら、追加・完了・削除を操作ごとに分けて書けます。処理が整理され、変更の流れも追いやすくなります。
useEffectが担うのは、タイマーやブラウザー機能などReactの外側にある仕組みとの同期です。表示する値を計算するだけなら、通常の計算で表せるか先に確認しましょう。
状態の置き場所
入力中の文字や開閉ボタンの状態など、一つの部品だけで使う値は、その部品に置くと管理しやすくなります。
兄弟部品で同じ値を使うなら、共通の親へ状態を移す方法があります。親が値を持ってpropsで子に渡し、更新が必要なら関数も渡します。値を管理する場所が明確になりますね。
離れた階層へ値を渡すときはContextが役立ちます。テーマやログイン中の利用者のような値を下の部品へ渡しやすくできますが、共有しただけで性能の問題まで自動的に解決するわけではありません。
アプリ全体で更新ルールを統一したい段階では、状態管理ライブラリを検討できます。ただし共有する状態が少ないうちに導入すると、設定や覚える概念が増えます。必要な範囲が広がってから導入すれば十分です。
部品設計の要点
コンポーネント設計では、見た目に加えて値の受け渡しやユーザー操作も整理します。細かく分けること自体が目的ではありません。変更の理由と担当範囲を説明できる単位に分けましょう。
propsは親から子へ値を渡すときに使います。子が親の状態更新を求める場合は、親から渡された関数を呼びます。こうしておくと、値を更新する部品が明確です。
表示・入力・通信を一つの部品に詰め込むと、変更の影響が広がります。まずは画面のまとまりで作り、処理が複雑になった段階で役割ごとに分けると、構成を追いやすくなります。
フォルダー構成に唯一の正解はありません。機能に関係する画面や部品をまとめれば、ファイルが増えても関連箇所を見つけやすくなります。どこに何があるか追える構成が大事です。
実務で崩れる点
フォームでは入力中の値と送信後の結果を区別します。送信ボタンを連続で押せないようにする処理や、入力エラーの表示も状態と結びつきます。画面の状態遷移を整理すると、実装が安定します。
バックエンドと連携する画面では、読み込み中、成功、失敗をそれぞれ表示します。取得したデータと画面上の一時的な操作状態は別々に管理し、更新元を分けて考えると混乱を減らせます。
ルーティングやエラー処理が加わると、一画面の中では完結しない状態も出てきます。どの画面で使う値か、ページを移動した後も保つ必要があるかを確かめると、状態の置き場所を見直せます。
画面が重くても、すぐ最適化用の仕組みを加える必要はありません。まず再描画の範囲と頻繁に変わる値を確かめましょう。原因を見てから対策すれば、手戻りを抑えられます。
レビューの視点
コードレビューでは、値を更新する箇所から、その値を読む部品まで追います。使う範囲より状態の共有範囲が広すぎないかを確かめれば、不要な共有に気づきやすくなります。
Effectがあれば、何と同期する処理なのか確認します。依存する値が変わっても正しく動くか、登録したタイマーやイベント購読を解除するかも見ましょう。画面を離れた後の不具合を防ぐためです。
コンポーネント名やprops名から役割が伝わることも大切です。変更内容を短く説明できる部品なら、ほかの人も修正箇所をつかめますし、機能追加時の手がかりにもなります。
本ごとの内容
『プロフェッショナルWebプログラミング React』はReact 19対応で、useState、useReducer、useEffect、Contextや状態管理ライブラリを扱います。TODOアプリを機能ごとに実装でき、掲載コードのダウンロードデータとNext.jsの内容もあります。
『React本格入門 ～実践力が身に付くコンポーネント開発～』では、React 19を使ってViteで環境を整え、アプリ開発へ進みます。画面部品の設計やフォルダー構成、propsとstate、状態のリフトアップなど、部品の分け方を学べる一冊です。
『改訂新版 これからはじめるReact実践入門』は688ページ。React 19以降を扱い、TypeScriptやNext.js 15以降にも進みます。useReducer、useContext、Recoil、useTransition、自作Hookなど、取り上げる題材も幅広いです。
『挫折しないReactの教科書 作りながら学ぶWeb開発』は、JavaScriptとReactの基礎からToDoリストやメモアプリの制作へ進む構成です。グローバルステート、バックエンド連携、ルーティング、エラー処理も扱い、図解やサンプルコードを使って学べます。
結論
Hooksや状態管理をTODOアプリの実装と一緒に学ぶ人には、『プロフェッショナルWebプログラミング React』がおすすめです。部品の分け方やpropsの受け渡しを基礎から固めたい人には、『React本格入門』が合います。
ReactからTypeScript、Next.jsまで広く参照できる本が必要なら、『改訂新版 これからはじめるReact実践入門』を選んでください。初めてReactに触れ、アプリを作りながら学びたい人には、『挫折しないReactの教科書』がおすすめです。
どの本を読む場合も、状態を置いた理由と更新する部品を自分の言葉で説明できるところまで手を動かすのが大切です。その理解が、Hooksを使いこなし、変更に強いコンポーネントを組み立てる力につながります。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
