書評：これからはじめるReact実践入門

明日、2023/9/28に発売する「これからはじめるReact実践入門」を献本いただきましたので、簡単に目を通した感想を書こうと思います。

かなり網羅性が高い

パラパラと読んでみて感じたのは、かなり手広く、それでいて一定の深みもある本だということです。出版社のサイトにある目次を見てみましょう。

Chapter 1　イントロダクション
1-1　ReactとJavaScript
1-2　Reactアプリを開発／実行するための基本環境
1-3　モダンJavaScriptの基本

Chapter 2　Reactの基本
2-1　はじめてのReact
2-2　サンプルアプリの内容を確認する
2-3　JSXの基本

Chapter 3　コンポーネント開発（基本）
3-1　コンポーネントを支える基本概念 – PropsとState
3-2　条件分岐と繰り返し処理
3-3　Props／Stateの理解を深める
3-4　より高度なイベント処理

Chapter 4　コンポーネント開発（フォーム）
4-1　フォーム操作の基本
4-2　Stateにおける構造化データの更新
4-3　検証機能の実装 – React Hook Form

Chapter 5　コンポーネント開発（応用）
5-1　組み込みコンポーネント
5-2　コンポーネント開発でのスタイル定義
5-3　コンポーネントのその他の話題

Chapter 6　Reactライブラリの活用
6-1　典型的なUIを実装する – MUI
6-2　コンポーネントの見た目／動作をカタログ表示する – Storybook
6-3　外部サービスからデータを取得する – React Query

Chapter 7　フックの活用
7-1　コンポーネント描画／破棄時に処理を実行する – 副作用フック
7-2　さまざまな値への参照を準備する – useRef関数
7-3　状態と処理とをまとめて管理する – useReducer関数
7-4　コンポーネントの複数階層で値を受け渡しする – useContext関数
7-5　ステート管理ライブラリ「Recoil」
7-6　関数、またはその結果をメモ化する – memo／useMemo／useCallback関数
7-7　優先順位の低いState更新を区別する – useTransition関数
7-8　フックの自作

Chapter 8　ルーティング
8-1　React Routerの基本
8-2　ルーター対応リンクの設置
8-3　ルーター経由で情報を受け渡しする手法
8-4　Routeコンポーネントの属性
8-5　ルーティングに関わるその他のテクニック

Chapter 9　テスト
9-1　単体テスト
9-2　E2Eテスト

Chapter 10　TypeScriptの活用
10-1　TypeScriptの基本
10-2　ReactアプリへのTypeScriptの導入

Chapter 11　Next.jsの活用
11-1　Next.jsの基本
11-2　App Routerの基本を理解する
11-3　応用アプリ「Reading Recorder」を作成する
11-4　アプリの実装を読み解く
11-5　Vercelへのデプロイ

668ページの本なので、そこそこ長いです。

全体の構成としては、次のようにまとめられるでしょうか。

Chap 1〜3：基本理念の解説や、言語の文法やReactの基礎文法について解説
Chap 4〜5：React単独でできること
Chap 6：ライブラリを組み合わせると、更にできることが広がる
Chap 7：組み込みフックの解説と、フックを活用したライブラリの紹介、そして自作によって、関数コンポーネントをより柔軟にシンプルに扱う
Chap 8：シングルページアプリケーションを成立させるための画面遷移
Chap 9：品質保証
Chap 10：Reactで一通り何ができるのかわかったところで、型の支援を受けて実用レベルの使い方を知る
Chap 11：ここまで読めば、ある程度大きい概念も理解できるようになってきているはずなので、デファクトスタンダードなフレームワークであるNext.jsを学ぶ

私もReactの学習については頭を悩ませたことがあるのですが、大筋としては良い流れで書いてあると思います。TypeScriptは現代の開発では事実上必須ではありますが、慣れていないうちにReactやReact関連ライブラリの解説をTypeScriptで行なってしまうと、今学んでいるものがReactなのかTypeScriptなのか、読者は混乱してしまうでしょう。思い切ってTypeScriptの解説を終盤の応用編として収録したのは、英断だったと思います。著者の山田さんと私は編集者と著者という関係で記事を一緒に作ることが多いのですが、やはりTypeScriptの登場タイミングの匙加減について話し合うと、お互いに「悩ましいけど、本気でライブラリの解説にフォーカスしたいなら、最後にちらっと解説するか、いっそTypeScriptに触れないか、ですよねえ」という結論になりがちなので、「最後にちらっと解説」の一例として、納得感のある構成になっていると思います。

また、膨大なページ数を使っているだけあって、一つ一つの項目がかなり丁寧です。よそのプログラミング入門書には、初心者向けだからと詳細な説明を省いている残念な本も多いのですが、この本では細かい点まで親切に解説されています。おそらく、React歴3年目くらいまでの人が読んでも、初めて見る基礎的な知識が多く記載されていることでしょう。

多くのページが実際に手を動かして、手元で動作を確認しながら読み進められるものになっています。そして、そのとき何が起きているのか、どんな仕組みで動いているのか、といった背景にも存分に触れているので、楽しみながら読み進められると思います。

足りない情報があったら

この本は「広く・やや深く」という感じで進行していくので、物足りなさを感じる場面というのは少ないのですが、もっと深く知りたいな、と思った場合には、専門の書籍をあたると良いと思います。

P264のコラムでは参考書籍が紹介されていますが、直接的な深掘りができるタイプの本が紹介されていないのが気がかりなので、この場を借りて、少し紹介しておきます。

プロを目指す人のためのTypeScript入門

まずは、相対的にちょっと浅めになっている、TypeScriptを深掘りしたい場合の本ですが、これは@uhyoさんのブルーベリー本で良いでしょう。

gihyo.jp

Next.jsについて、次に読む本はありますか？

ぶっちゃけこれはかなり難しいです。現行のNext.jsの本は、大半がPages Routerを前提にしており、App Routerの使い方を書籍として取り上げた本がまだほとんどないはずです。商業出版の紙の本としては、本書が日本最速では……？くらいのレベルです。

とはいえ、本書に記載されたNext.js（のApp Router）の使い方は、「よくできたチュートリアル」くらいのものなので、もっと深い情報も欲しいですよね。

2023年9月現在では、「公式ドキュメントを読んでくれ……！」が一番誠実な回答かなという感じはしています。

nextjs.org

一応、私も↓でApp Routerの連載を行っていますが、少しずつしか進んでいないので、たまに読んでいただければ、くらいのものです。

codezine.jp

App Router前提で、広く深くNext.jsについて扱った書籍が今後出てくることを期待したいですね〜。

補足したいところ

全体的にはよくできているのですが、細かいところで気になったところがあるので、補足情報を書いておきます。嘘が書いてあるわけではないので、本書の内容そのままに読み進めていただいても問題ありませんが、2周目を読み始めたあたりで気にしてみると面白いかもしれません。

Create React Appを使わない選択肢もある

本書の中で、Next.jsの話題が登場するまで、一貫してReact製アプリケーションの環境構築＆ビルドツールとして解説されているCreate React Appですが、現代では役割を終えたものとして、開発がほぼストップしました。最新のReact公式ドキュメントでも、プロジェクトのセットアップに使うツールにCreate React Appは登場しません。

react.dev

業務レベルのプロジェクトを作成するのであれば、Next.jsやRemixといったフレームワークを利用したほうが、より高度に通信と画面遷移が統合された、快適な開発体験を得ることができます。ただし、Create React Appと比べると、プロジェクトの最低限のファイル数は多くなりますし、一定の複雑さがあることは否めません。

入門書での取り回しがいいのは、確実にCreate React Appなので、本書の選択は正解だと思います。ただ、本当に業務で実践できる内容に持っていこうと思った場合は、やはり本書の最後の章で解説されているNext.jsを導入したほうがよいでしょう。

ちなみに、公式ドキュメントではほんの微かな言及しかありませんが、Create React Appと近い規模感＆使用感でプロジェクトを扱えるツールとして、Vite（ヴィート）があります。

ja.vitejs.dev

ほんの少しクセの強さはあるものの、こちらは活発に開発が続いていますし、一定の人気もありますので、場合によっては本書のサンプルをViteで作成・動作させてみても面白いかもしれません。

Recoilさんは開発状況がちょっと心配

Recoilは人気はあったものの、リポジトリ名がfacebookexperimental/Recoilだったことからも分かるとおり、Meta社内でも実験的なプロジェクトでした。社内ライブラリをちらっとカンファレンスで発表してみたら、思ったよりも反響があって、みんなが使い始めてしまった、くらいの流れだったと思います。

さて、そんなRecoilですが、残念な話がありました。

残念ながら、2022年10月にRecoilの主要メンテナの@drarmstr氏がMeta社の一斉レイオフで解雇された

Jotaiで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)

主要メンテナの解雇というのは、まあまあの事故ですよね……

移行先のライブラリとして考えられるのは、上記の記事でも紹介されている「Jotai」です。

jotai.org

元々Recoilにインスパイアされて生まれたライブラリとのことなので、Recoilのいいところはある程度受け継いでいます。本書のサンプルとしては、まずRecoilを使ってみるのがいいと思いますが、少し慣れてきたら、Jotaiで書き換えてみるのも、いいエクササイズになるかもしれません。

React Routerの知識が活きるアプリケーションフレームワークもある

本書では、シングルページアプリケーション（ブラウザ上だけで動くアプリケーション）の中で画面遷移を行うために、React Routerの利用方法が70ページに渡る大ボリュームで解説されています。

しかし、残念なことに、その3つ後ろの章で解説されるアプリケーションフレームワークはNext.jsであり、React Routerで学んだ知識の大半はそのまま使うことができず、Next.jsのルーティングの癖を改めて学ぶことになります。

Next.jsは世界で最も使われているReact向けのアプリケーションフレームワークですので、本書の選択は間違っていません。間違ってはいないのですが、もし幻のChap 12があったとしたら、ぜひ解説してほしかったアプリケーションフレームワークがあります。

それはRemix（リミックス）です。

remix.run

Remixは、React Routerの開発チームが作った、ルーティングと通信をより快適に統合させながらブラウザとサーバーの通信をスッキリさせるためのフレームワークです。現在は開発チームが丸ごとShopifyに買収され、RemixはShopifyの公式フレームワークHydrogen v2のベースとなりました。

shopify.dev

Remixをおすすめしたいのは、なにも開発チームが同じだから、という理由ではありません。Remixのルーティングは、React Routerによって実現されているので、Remixの画面遷移にはReact Routerの知識がとても役に立つのです。

URLのパスを決定する方式だけはNext.jsとそっくりな、ファイルとフォルダによる仕組みを使っていますが、それ以外の部分はかなりReact Routerらしい機能が露出しており、React Routerを学んだ人には親しみ深く感じられることでしょう。 useHistory() や useParams() といったフックを利用する際には react-router-dom からインポートしますし、階層構造になっているルート*1では <Outlet /> をプレースホルダーとして配置します。

一通り本書の内容を実践した上で「React Routerの空気感もいいなあ」と思われた方がいらっしゃいましたら、Remixのチュートリアル（英語）にチャレンジしてみていただけると、Remix推しとしてはちょっと嬉しいです。

remix.run

これは宣伝ですが、本書著者の山田さんに編集してもらいながら、CodeZineにRemixの記事を連載しているので、興味があればこちらもお読みください……！！！

codezine.jp