Reactのコードが乱雑になる本当の理由：『Reactハンズオンラーニング 第2版』で学ぶ関数型思想とコンポーネント設計

コンポーネントに機能を追加するたびに、コードが読みにくくなっていく——その原因は「なぜそう書くのか」が曖昧なまま実装を積んでいることにある。

Alex Banks と Eve Porcello による『Reactハンズオンラーニング 第2版』（オライリー・ジャパン、2021年）は、React の API 仕様を表面的に追うのではなく、その背後にある設計思想から紐解く。「なぜ React は宣言的な書き方を求めるのか」「なぜ状態の不変性を守らないとバグが起きるのか」という根拠を、関数型プログラミングの原則と結びつけて説明している。

1. なぜ「関数型プログラミング」から始めるのか

本書の序盤は React の説明ではなく、JavaScript における「命令型」と「宣言型」の違い、そして純粋関数・イミュータビリティ・高階関数という関数型の基礎概念の整理に充てられている。

DOM を直接操作する命令型のコードは、処理ステップを逐一記述するため、状態が複数箇所から書き換えられると追跡が難しくなる。一方、状態を定義してそれに応じた UI を宣言的に記述するアプローチは、アプリの規模が大きくなっても見通しを保ちやすい。React がこの「宣言的」なパラダイムを採用しているのは設計上の必然であり、本書はその理由を丁寧に言語化している。

この基礎を先に押さえることで、フックの設計意図やコンポーネントの責務分割が「なんとなくそうなっている」ではなく「こういう理由でこう書く」という理解に変わる。他のフレームワークから来た開発者や、チュートリアルを終えたばかりの読者にとって、この構成は得るものが大きい。

2. カスタムフックで「UIとロジック」を分離する

本書の後半では、シンプルなコンポーネントから始めて段階的にリファクタリングを重ねる流れが繰り返される。useState や useRef の基本的な使い方から出発し、重複するロジックをカスタムフックに切り出し、Context API で複数コンポーネントをまたいだ状態注入へと進んでいく。

コンポーネントが肥大化する原因の多くは、UI の描画コードと状態管理、外部通信のロジックが1ファイルに混在していることにある。カスタムフックを使ってロジックを分離する手順を実際のコードで追うことで、「関心の分離」という概念が抽象論ではなく具体的な作業として把握できる。

また、useMemo や useCallback といったメモ化フックについても、使いどころと使わないほうがよい局面の両方が示されている。過度な最適化は可読性を損なうという視点は、「とりあえず全部メモ化しておく」という誤った最適化を防ぐ上で実用的だ。

3. 現代の環境で使う際に注意すること

本書のサンプルは Create React App（CRA）を基準に書かれている。CRA は現在では非推奨・開発停止状態であるため、最新の Node.js 環境でそのまま動かそうとすると問題が生じやすい。

具体的には、OpenSSL の仕様変更に起因するビルドエラー（ERR_OSSL_EVP_UNSUPPORTED）や、Windows 標準環境での rm コマンドの非認識といった障壁がある。これらは NODE_OPTIONS=--openssl-legacy-provider の設定や WSL 環境の利用で回避できるが、初学者にはトラブルシューティングの負担が大きい。

現在から本書を使うなら、プロジェクトのセットアップは Vite（React + TypeScript + SWC）に切り替えて進めるほうが現実的だ。書籍の解説内容自体——宣言的 UI の考え方、フックの設計、Context API の使い方——は今も通用するため、環境の違いを意識しながら読み進めることで本書の価値は十分引き出せる。

DevBookPathのマップで確認する

この本の学習パス上の位置づけ・前後の読書順は、DevBookPath のグラフで辿れます。

フロントエンドの地図を見る

---

本記事のリンクには Amazon アソシエイト等の広告が含まれる場合があります。リンク経由の購入で運営者に紹介料が支払われることがあります。