概要

React Hooks ベースで Web アプリを手を動かしながら実装する

想定読者

JavaScript の基礎を持ち、現代的な React（Hooks 中心）を実務レベルで使えるようになりたい入門〜中級エンジニア

こんな人には向いていない

• すでに Hooks を業務で日常的に使いこなしているエンジニアには既知の内容が大半を占め、新たな発見は少ない
• JavaScript 未経験の段階では ES6 構文や非同期処理の理解が前提になるため、先に JS 基礎を固める必要がある
• TypeScript や Next.js を使った本格プロダクション開発をすぐに始めたい人には、本書の後に追加学習が必要になる

この本で身につくこと

• useState / useEffect / useReducer / useContext を場面に応じて使い分けられる
• カスタム Hook でロジックと副作用をコンポーネントから分離する設計ができる
• React Router を使ったクライアントサイドルーティングを実装できる
• Apollo Client と GraphQL の基本的な統合パターンを理解できる
• Vite などモダンなビルドツールを使った React プロジェクトを初期構築できる

ハイライト(外部からの言及)

実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。 — 出典

ハンズオン形式という本書の構成的特徴と想定読者層の幅が端的に表れている箇所

JavaScriptにおける関数型プログラミングの項とメモ化の項がとても勉強になった。邦訳も自然で読みやすく、今まで読んだReact本の中で一番よかった。実務でReactを使い始めて数ヶ月後くらいに読むとよさそう。一冊目でもいいかも。 — 出典

実務でReactを数ヶ月使った2年目エンジニアによる他書との対比評価。関数型プログラミング章とメモ化章を具体的に挙げ、邦訳の読みやすさにも言及している点が購入判断の参考になる

中でも6章からのアプリケーションを実装しながらReactコンポーネントをリファクタリングしていく解説は、React上級者がどのように考えてコードの品質を高めていくのかを追体験でき、非常に勉強になりました。 — 出典

実務経験者が第6章以降のリファクタリング解説を評価した箇所。「上級者の思考を追体験できる」という本書の構成的特徴を具体的な章番号とともに示しており、ハンズオン形式とは別の学習体験の角度を補う

読了後にできること

Before(読む前): JavaScript の知識はあるが、Hooks ベースの React コンポーネント設計が実装イメージとして掴めていなかった

After(読み終えた後): useState から useReducer まで段階的に使い分けながら、実際に動くアプリを一から組み立てられる

章立て

第1章 Reactの世界へようこそ

本書の対象読者と React の位置づけを示す導入章

第2章 React学習に必要なJavaScriptの知識

ES6+ / ES Module / 分割代入など。React 学習の前提知識の総整理

第3章 JavaScriptにおける関数型プログラミング

純粋関数 / 不変性 / 高階関数。React の設計思想を理解する基礎章

第4章 Reactの基本

Element / Component / Props の基本概念

第5章 ReactとJSX

JSX の文法と {} 埋め込みルールを整理する章。第 4 章の基本概念と橋渡しになり、第 6 章以降のコンポーネント実装の前提として読み飛ばしにくい。

第6章 ステート管理

useState / useReducer / Context を扱う。状態管理ライブラリ選定の判断軸

第7章 フック

useEffect / useMemo / useCallback / useRef を網羅。実務で詰まりやすい依存配列の解説含む

第8章 データ

Fetch / Axios / 状態とサーバ応答の同期。React Query 等の前提知識

第9章 サスペンス

Suspense / lazy / コンカレント機能を扱う。React 18 の中核機能

第10章 テスト

Jest / React Testing Library。実務で書き始めるためのテンプレート集

第11章 ルーティング

React Router を扱う。Next.js / Remix を使う場合は別書で補完

第12章 サーバーサイドReact

SSR / Hydration の基本。Server Components(本書スコープ外)への入口

関連記事 / 参考情報

• JavaScript学習ロードマップ — JavaScript 習得の全体経路を体系化したガイドで、本書を React 学習の定番として掲載
• 未経験から実務に入って読んでよかった良書たち — 未経験から開発現場に入った筆者が実際に役立てた技術書まとめ。フロントエンド枠で本書を選定
• エンジニア二年目に自宅学習で使った技術書&Udemyをジャンル別にまとめてみた — 2 年目エンジニアが実際に活用した書籍を分野別に整理。React 学習枠で本書を選定
• React ハンズオンラーニング読んだメモ — 本書を通読した際の要点メモ。Hooks の使い分けや設計方針を自分の言葉で整理している
• モダンスタックでつくるWebアプリケーション 学習ロードマップ 2022/10 — 2022 年時点のモダン Web 開発スタックを体系化したロードマップ。React 学習書として本書が掲載

学習のヒント

• 第 2 版は Hooks 中心に全面改訂されているため、旧版（クラスコンポーネント主体）の情報と混在させないよう本書のコードに統一して進めること
• 各章のサンプルコードは流し読みせず、実際にブラウザで動作確認しながら進めると Hooks の挙動が体感として定着しやすい
• React Router や Apollo Client が登場する後半章は依存関係が複雑なため、前章のサンプルが正常動作した状態で進めると詰まりにくい
• useReducer の章（useState との使い分け）は、state の更新ロジックが複雑になるタイミングで実務に直結するので丁寧に手を動かす価値がある

前提知識

• JavaScript ES6 以降の構文（アロー関数・分割代入・モジュール import/export）の読み書きができること
• HTML/CSS の基礎と DOM 操作の概念を理解していること
• npm / Yarn によるパッケージ管理とコマンドライン操作の基本経験

次に読む本

プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで

本書は JavaScript + Hooks ベースの React を扱うが、実務では TypeScript との併用が標準になっている。本書で React の動作原理を把握した後、型定義・ジェネリクス・型推論を体系的に習得することで、コンポーネント Props や API レスポンスの型安全な扱いが可能になる。

りあクト！TypeScriptで始めるつらくないReact開発

TypeScript と React Hooks の実践的な組み合わせ方を、より踏み込んで解説している国産ガイド。本書の内容を TypeScript ベースで再整理したい人に適している