React ビギナーズガイド

Facebook のエンジニアによる React の入門書!
React によるコンポーネントベースの Web フロントエンド開発の入門書。React では小さくて管理が容易なコンポーネントを組み合わせて、大きくて強力なアプリケーションを作成できます。本書の前半は入門編で、簡単なサンプルを使いながら React の基本や JSX について学びます。後半は、実際のアプリケーション開発に必要なものや開発を助けてくれるツールについての解説です。具体的には、JavaScript のパッケージングツール (Browserify)、ユニットテスト (Jest)、構文チェック (ESLint)、型チェック (Flow)、データフローの最適化 (Flux)、イミュータブルなデータ (immutable ライブラリ) などを取り上げます。対象読者は、ES2015 (ES6) の基本をマスターしているフロントエンド開発者。

『React ビギナーズガイド』 (Stoyan Stefanov 著、牧野 聡 訳、オライリー・ジャパン、2017 年 3 月刊) は、原書 React: Up & Running の日本語版で、React によるコンポーネントベースの Web フロントエンド開発を、簡単なサンプルで学ぶ基礎から、実際のアプリケーション開発を助けるツールの使い方まで通して扱う入門書です。副題は「コンポーネントベースのフロントエンド開発入門」です。版元が示す対象読者は ES2015 (ES6) の基本をマスターしているフロントエンド開発者で、目次に JavaScript の文法そのものを学ぶ章はありません。

第 Ⅰ 部の基礎と第 Ⅱ 部の実践、全 8 章の構成

本書は第 Ⅰ 部「基礎」と第 Ⅱ 部「実践」の 2 部、全 8 章で構成されています。第 Ⅰ 部は 1 章 Hello world から始まり、2 章でプロパティとステート、DOM のイベント、ライフサイクルのメソッドといったコンポーネントの基本を押さえます。3 章は表を扱う Excel コンポーネントを題材に、並べ替え、データの編集、検索、操作手順の再実行、表データのダウンロードと機能を一つずつ足していく章です。4 章は JSX で、Babel によるトランスパイルや HTML との違い、フォームの扱いを説明し、章末に JSX 版の Excel コンポーネントが置かれています。第 Ⅱ 部は 5 章の開発環境のセットアップで Node.js、Browserify、Babel を使ったビルドとデプロイを整え、6 章では Whinepad というアプリケーションを Button や Form、Dialog などのコンポーネントから組み立てます。7 章は ESLint による品質チェック、Flow による型チェック、テスト、8 章は Flux とイミュータブルなデータの扱いです。

一方向のデータの流れとツールの役割を押さえる意味

React の考え方の中心は、画面を小さなコンポーネントの組み合わせとして表し、親から子へ渡すプロパティと、コンポーネントが自分で持つステートを分けて扱うことにあります。この区別が曖昧なまま規模が大きくなると、同じデータを複数の場所で書き換えることになり、どこで値が変わったのかを追えなくなります。Flux はこの問題に対して、データを Store に集め、変更を Action として送る一方向の流れにそろえる設計で、アプリケーション全体の状態の管理 を考える出発点になります。後半で扱うツールにもそれぞれ役割があります。npm のモジュールをブラウザーで動く形に束ねる バンドラー、コードの書き方の誤りを機械的に拾う静的解析、型の食い違いを実行前に見つける型チェック、そして変更のたびに動作を確かめるテストです。本書は第 Ⅱ 部でこれらを 1 つのアプリケーションの開発の流れの中に置いて説明しており、部品を作る段階から品質を保つ段階までのつながりを追えます。

2017 年 3 月時点の React を前提にした読み方

目次には React.DOM.* やミックスイン、PureRenderMixin、propTypes といった項目が並び、書き方は刊行時点の React に沿っています。React 公式ブログによると、関数コンポーネントで状態や副作用を扱う フック が安定版として使えるようになったのは React 16.8 を発表した 2019 年 2 月で、本書の刊行より後です。そのため、本書のコードをそのまま新しいプロジェクトの手本にするのは向きません。開発ツールの選び方も 2017 年 3 月時点のものです。一方で、プロパティとステートの使い分け、機能を段階的に足していくコンポーネントの作り方、Store と Action によるデータの流れの整理といった考え方は、書き方が変わっても通用します。React の書き方を手早く覚えたいだけなら公式のドキュメントを先に読み、本書は設計の考え方を通して学ぶ教材として位置づけるのが現実的です。

React の設計の考え方を、コンポーネントの基本からビルド、テスト、Flux までの流れとして一冊でつかみたい人や、2017 年ごろの書き方で書かれた React のコードを読み解く必要がある人にとって、本書は全体の見取り図を得る助けになります。新しい書き方の本と組み合わせる前提で選ぶなら、遠回りにはなりません。フロントエンドの他の技術書と見比べたい場合は Web 開発本の選び方 も参考になります。