レビュー
概要
タイトル通り、ES2020以降の最新JavaScriptを土台に据えたReactの実践教科書。じゃけぇ氏の語り口は教える対象を“そこにいる初学者”に設定しており、クラスコンポーネントと関数コンポーネントの差分を比較しながら、関数がどうUIと命名を共有するかを逐一示してくれる。非同期処理やスコープの挙動を例に出すときも急にHooksを持ち出すのではなく、まずは「どうしてAsync関数でUIが壊れるのか」「なぜPropsとStateの境界を引き直すのか」を手を動かしながら実感させ、段階的にHooksに到達する構成。
読みどころ
- 第1章では
let/constやテンプレート文字列、アロー関数など、ES6以降の構文を「コンポーネントのボイス」として扱い、関数の命名・分割・責務をUIコンポーネントの登場人物に例える。関数に名前を付けることがそのままコードの読解力になるという気づきを、具体的なボタンの挙動で繰り返し体感させる。 - 第2章以降はライフサイクルの復習を“時間の線”に描き、クラスコンポーネントでのイベント処理やStateの初期化を可視化。そこで得た理解を、Hooksの
useEffectやuseStateへと橋渡しする。本書の特徴は、Hooksをドンと出すのではなく、まず既存UIを壊さない観察を促すところだ。 - 第3章ではコンポーネント分割を“パーツ化”と呼び、Propsの受け渡しを揺らす具体的なシナリオを図に落とす。Stateのリフトアップを根黒線で追いながら、Props Drillingの弊害をモーションで示し、Hooksに切り替えるタイミングをチャート化。Component Treeの窓から「伝播の遅延」が見えるようになり、どのノードを先に更新するかを直感的に判断できる。
- 中盤以降にはContextとReducerを導入し、Redux的な冗長さを避けつつ実用的なAction Type命名規則を提示。サンプルフォームでは入力値とエラーメッセージを一枚のStateオブジェクトで管理し、
useReducerを使うことでアクションの意味を明快に表現する。 - 全体を貫くのは「CodeSandboxで即触れる構造」。章末にはコードスニペットのライブリンクが用意され、手を動かすことで次の章のHookやContextが初めて“使える”という実感につながる。大きな変更があってもテストコードを含むフォーム構築例があるので、レビュー時の確認作業にもそのまま流用できる。
類書との比較
『React入門 実践編』や『React Hooksによる設計』がHooksジャンプで始めるのに対し、本書はまずJavaScriptの基本操作でバグの芽を摘んでからHooksへ誘う。『モダンTypeScript入門』と併読すると型設計の視点が補強され、型の基礎を抑えたうえでReactのコンポーネント設計に入れる。類書で見落としやすい「関数の責務をどうUIに見せるか」については『Atomic Design』のパーツ化思想と相性がよく、コンポーネントの責務分離をもっと堅牢にしたい現場には本書の流れがフィットする。純粋な文法解説ではなく、実務で使えるコードリーディングのクセをつくる点で差別化されている。
こんな人におすすめ
- 初めてReactとまともに向き合う現場のエンジニア。
- Hooks以前にJavaScriptの非同期やスコープのクセを整理したい人。
- 小規模プロジェクトをコンポーネント単位で拡張したいチーム。
- TypeScriptに移行する前に純粋なJSの挙動を再確認したい学習者。
- CodeSandboxで手を動かしながら学びたい教材を探している人。
感想
じゃけぇ氏の語り口は不安を和らげ、「ここまでなら自分にもついていける」という安心感を与えてくれる。コラムや図解で「メソッドの変化は何を守り、何を変えるのか」が自ずと整理され、導入直後から命名規則とコンポーネント分割の改善に着手できる。読み終える頃には、関数コンポーネントの型を「意図的に分ける」習慣がつき、プロジェクトで迷う場面でもシンプルなルールを再現できるようになる。テストコードつきフォームの章は特に実務的で、レビュー作業にそのまま流用できるのもありがたい。
実務で読むと、Hooksへの移行でつまずいたタイミングに立ち戻る「リセットポイント」になる。メッセージの伝播やStateの変遷を声に出して追いながら、コードに音声付きのコメントを付けていけば、チーム内の共通理解も高まる。本書を読み終えたあとでも、何度でも手を動かして確認し、現場のコードと本書を行き来しながら習熟を深めたい。
