React ハンズオンラーニング 第 2 版

Web フロントエンドの「今」を学びたい人へ!
Facebook が開発した JavaScript ライブラリ「React」の解説書。2013 年にオープンソース化された React ですが、ここ数年で大きな変更が加えられ、また React を取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新の React の記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、React の今をすばやく学習することができます。

『React ハンズオンラーニング 第 2 版』 (Alex Banks / Eve Porcello 著、宮崎空 訳、オライリー・ジャパン発行、オーム社発売、2021 年 8 月刊) は、O'Reilly の "Learning React, 2nd Edition" を翻訳した React の入門書で、副題は「Web アプリケーション開発のベストプラクティス」です。版元は本書を、Facebook が開発した JavaScript ライブラリ React の解説書として、実際に動くコンポーネントを作りながら記法とツール、ライブラリを学ぶ本と紹介し、想定読者を初心者から中上級者までと案内しています。目次は JavaScript の文法の確認から始まり、フック によるステート管理、データ取得、テスト、ルーティング、サーバーサイドレンダリング まで一冊で到達する構成です。

全 12 章と付録 A の構成、JavaScript の確認から React へ

構成は全 12 章と付録 A です。1 章「React の世界へようこそ」は本書のねらいと React の過去と未来を述べる章で、第 2 版の変更点をまとめた節と、GitHub リポジトリ、React Developer Tools、Node.js のインストールという環境構築の節が置かれています。2 章「React 学習に必要な JavaScript の知識」では const キーワードと let キーワード、テンプレート文字列、アロー関数、デストラクチャリング、スプレッド構文、Promise と fetch、async/await、クラス宣言、ECMAScript モジュールを扱い、3 章「JavaScript における関数型プログラミング」で命令型 vs. 宣言型、イミュータブルなデータ、純粋関数、データの変換、高階関数、再帰、関数の合成を学びます。React 本体に入るのは 4 章「React の基本」からで、5 章で JSX と Babel による変換、webpack、Create React App、6 章でステート管理、7 章でフック、8 章でデータ、9 章でサスペンス、10 章でテスト、11 章でルーティング、12 章でサーバーサイド React と進み、付録 A に npm、ESLint、Prettier、Jest、webpack、Babel の開発環境の構築がまとまっています。

フックとステート管理を関数型の土台の上で学ぶ

React の学習でつまずきやすいのは、React 固有の API よりも、その前提になっている JavaScript の書き方と考え方です。React のコンポーネントは、ステートを入力として UI を返す関数として設計されているため、値を直接書き換えずに新しい値で置き換える不変性の扱い、配列を変換して要素の並びを作る高階関数の使い方、分割代入やスプレッド構文による props の受け渡しが、コードのあらゆる場所に現れます。本書が 2 章と 3 章を JavaScript と 関数型プログラミング に充ててから React に入る順序を取るのは、この前提を飛ばすと useState や useEffect が意味の分からない決まり文句になってしまうためです。

6 章「ステート管理」は StarRating コンポーネントを題材に、useState フックを使ってクリックイベントに対応する書き方と再利用性を考慮したリファクタリングから始まり、ステート値をコンポーネントツリーの上から下に伝える流れとユーザーの操作を下から上に伝える流れ、フォーム入力を処理するアプリケーションでの ref を使ったデータアクセスと制御されたコンポーネント、カスタムフック、React コンテキストと useContext フックへ進みます。7 章「フック」は useEffect の依存配列と同一性チェック、useLayoutEffect、フックの使い方に関するルール、useReducer を使った複雑なステート管理、コンポーネントのパフォーマンス改善をいつ行うかを扱います。旧クラスコンポーネントにおけるステート管理、レガシーコードにおける setState、shouldComponentUpdate と PureComponent はコラムとして切り出されており、関数コンポーネントとフックを本文の主軸に据え、クラスの書き方を補足に回す配置が目次から読み取れます。

GraphQL / サスペンス / テスト / Next.js まで届く射程

8 章「データ」はデータの受信と送信、fetch を使ったファイルアップロード、リクエストの認証、データの保存に加え、非同期リクエストの状態管理をレンダープロップ、仮想リスト、useFetch フック、Fetch コンポーネントの順に整理し、関数のメモ化、ウォーターフォールリクエストと並列リクエスト、GraphQL API を JavaScript で利用する方法まで扱います。9 章「サスペンス」ではエラーバウンダリ、コードスプリッティング、Suspense コンポーネントとその応用、Promise を throw する仕組み、Fiber が取り上げられ、10 章「テスト」は ESLint と Prettier の設定、PropTypes と Flow と TypeScript による型チェック、テスト駆動開発 (TDD)、Jest、React Testing Library を使った要素の検索、イベントのテスト、コードカバレッジまで進みます。11 章「ルーティング」は React Router の導入からネストしたルート、リダイレクト、ルーティングパラメータ、ナビゲーション関数を、12 章「サーバーサイド React」はアイソモーフィックとユニバーサルの整理、React におけるサーバーサイドレンダリング、Next.js、Gatsby、React の未来を扱います。ライブラリ本体の理解にとどまらず、実務のプロジェクトで併用されるツール群を一冊で見渡せる射程の広さが本書の持ち味です。

前提知識と、React ハンズオンラーニングが向く人

版元の案内する対象は初心者から中上級者までです。2 章は React 学習に必要な範囲に絞って JavaScript を扱う章なので、変数や関数という概念を初めて学ぶ人向けというより、JavaScript に一度は触れた人が新しい構文を確認する位置づけと読むのが妥当で、プログラミング自体が初めての人には進みが速く感じられる可能性があります。著者の Alex Banks と Eve Porcello は、書店掲載の書誌 (出版社提供) によれば、ともにソフトウェアエンジニアでありインストラクターで、北カリフォルニアにあるカリキュラム開発会社 Moon Highway を共同経営し、LinkedIn や egghead.io にコースを提供し、テックカンファレンスの常連スピーカーとして世界中のエンジニアにプログラミングを教えてきた人物です。訳者の宮崎空氏は同じ紹介で、家電の組み込みソフトウェアの開発からソーシャルゲームの Web 開発を経て、刊行当時はクラウドベンダーに勤務するソフトウェアエンジニアと記されています。

向かないのは、特定のフレームワークの手順書を求める人です。Next.js と Gatsby は 12 章で紹介されますが、本書の主題は React そのものと周辺ツールの考え方であり、Next.js のルーティング規約や本番デプロイの手順を網羅する本ではありません。逆に、useEffect の依存配列でバグを出した経験があり、なぜそう動くのかを JavaScript の仕組みから理解し直したい人、ステート管理やデータ取得、テストまで含めた React 開発の全体像を 2021 年時点のツール構成 (webpack、Babel、Create React App、Jest、React Router、Next.js) で一度整理したい人には、投じた時間の回収が早い一冊です。