書籍「これからはじめるReact実践入門」を読みました

最初に

WINGSプロジェクトのレビュー企画に応募し、「これからはじめるReact実践入門」の書籍献本を受けました。
簡単ではありますが、読んだ感想を記載させていただきます。

なお、これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

著者の「山田さん」について

山田さんは多数の技術書を書かれています。累計で１００万部を超えているそうです。
技術書でミリオンセラー作家の方は少ないと思いますので、もし山田さんにご興味もたれた方はこちらの記事をご覧いただければと思います。

この本について

この本の良いところは、Reactの構文を紹介するだけではなく、基礎技術や関連するライブラリも含めてReactを体系的に説明している点です。
例えばReactのイベントを説明するときにJavaScriptのイベントを踏まえて紹介したり、Reactでの登録フォームを説明しつつ、実用的な入力バリデーションライブラリを紹介しています。また、Reactでのユニットテストに関して、Jestの説明も含まれています。
このように、前提技術や拡張部分も含め、幅広く丁寧にReactを紹介している本は他には少ないのではないかと思いました。

ボリュームについて

649ページあります。とても分厚いです。久しぶりに写経用のブックストッパーを出してみたのですが、分厚さのあまり、最初はうまく挟むことができませんでした(汗)

おすすめの読者層について

この本は、本格的にReactで開発をしたいという、初中級以上の技術者に向いているかと思います。
逆に、UIデザイナーとしてReactを把握したい方や、全くのプログラム初心者の方はもう少し薄い本から読み始めたほうが良いと思います（この本の最初の3ページ目でAjaxの説明が、９ページ目でIoC[制御の反転]が出てきます。Reactの登場背景やフレームワークの立ち位置などを説明するための用語紹介ではあるものの、開発経験が浅い人だと挫折してしまうかもしれません）。
もし、この本が難しいと感じた場合は、読書会など、疑問に答えてくれる人と一緒に読んだほうが、よりスムーズに理解ができるかもしれないと思いました。

---

以下は、書籍の内容に関しての簡単に感想（一部覚書）です。

１章：イントロダクション

Reactの技術バックエンドとなる、JavaScriptライブラリ、フレームワークの歴史、主要構文がまとまっています。

２商：はじめてのReact

ここからがReactの始まりです。
create react appで生成されたコードを元に、Reactの基本について紹介しています。

• index.html ： メインページ
• index.js ： エントリポイント
• JSX ： JSにタグを書く拡張構文
• App.js ： UI部品 - Appコンポーネント
• 仮想DOM ： メモリのDOM
• 関数コンポーネントvsクラスコンポーネント ： 最近は関数構文はおすすめ

ちなみにnpm run ejectというコマンドは知らなかったので、参考になりました。

３章：コンポーネント開発（基本）

Reactの重要な概念となる「コンポーネント」について説明している一番重要な章です。
UI部品にあたり「Props」と「State」の２つの概念を紹介しています。

「useStateとは〜」のように構文から理解しようとすると迷子になりがちですが、この書籍では、コンポーネント間での連携という大枠の目的から入り、連携を支える基礎技術であるJavaScriptのイベントの説明をおこなっている点がわかりやすかったです。

この２つの概念の理解は難しいですが、P83の図にてわかりやすく説明されています。

Props

• 「親コンポーネント」から「子コンポーネント」へ、情報を受け渡す窓口
• 例えるなら、関数の仮引数
• コンポーネント関数の引数で宣言
  • 宣言側：function Hello(props)
    • 利用時：こんにちは、{props.myName}
  • 呼び出し側：
    • <Hello myName="田中" />
• 慣例的にpropsという変数名がわかりやすい
• PropTypesライブラリで型情報を追加
  • myName: PropTypes.string.isRequired
  • 文字列かつ必須の引数であることを示している例

State

• 「各コンポーネント間」で、情報を管理する仕組み
• 例えるなら、関数の変数
• useStateを使用
  • const [count, setCount] = useState(0);
  • setCount(c => c + stemp);
• 情報の受け渡しはイベントを使用。
• ReactJSXでのイベント宣言はHTMLのonclickと異なりonClickのように大文字が入る
• 「子コンポーネント」から 「親コンポーネント」へ 、情報伝達が可能

（少し勘違いしたこととしては、P131のonUpdateがP132の標準イベントとかReactの予約語のようなものかと思いましたが、どうやら独自の関数に対する呼び出しであることでした。）

4章：コンポーネント開発(フォーム)

入力フォームに入れた値に基づいて、文言やログを出力する方法を紹介しています。
フォーム要素の管理には３章のStateを用います。
入力フォームに利用できるフィールドとして、テキスト、テキストエリア、リストボックス、ラジオボックス、チェックボックス等々が紹介されています。サンプルコードでUIの変化を見てみると理解しやすいと思います。

なお、Stateを保持しないコンポーネント「非制御コンポーネント」の場合には、useRefを用いて、HTML要素から値を直接取得します。

const age = useRef(null);
<input id="age" name="age" type="number" ref={age} defaultValue="18" />

（フォームの一般的な書き方をマスターしきれていない冒頭にuseRefが出てくるので、少し理解が難しかったです。）

Reactで利用できるライブラリ

また、Immerライブラリによる状態管理や、React Hook Formによる入力検証(に加え、Yup/Zod/Jol/Vest/Ajvといった検証ライブラリ)が参考になりました。

5章：コンポーネント開発(応用)

この章では、３章と４章で紹介しなかったReact要素を紹介しています。
例えば、主に描画待ちを検知して、その代替コンテンツを表示する<Suspense>コンポーネントの紹介をしています。
また、描画時間を計測する<Profiler>コンポーネントの紹介もしています。
このような、画面描画に関する処理は、４章と同様に、実際に動かしてみることで、理解が深まります。

6章：Reactライブラリの活用

この章は、Reactで便利な以下のライブラリの紹介です。

• UIデザインライブラリMUI
• コンポーネントのカタログ化Storybook
• 外部サービスからデータを取得するReactQuery

特に、ReactQuery(現TanStack Query)の紹介では、コードレベルで、fetch関数との違いを比較しています。
この比較により、ReactQueryを使うメリット(ロード状態、エラー制御、再処理のシンプル化)が明確に理解できます。

７章：フックの活用

これまで登場していたuseState、useRefのような「use〜」系関数をReact Hookという仕組みのもとで、整理して紹介している章です。P340には「use〜」の一覧がまとまっています。

useEffect関数は、副作用フックというPropやStateが変わったときに実行するものですが、このユースケースとして、Reactの外側(ネットワークなど)と連携する状況が挙げられていたことが参考になりました。

ボリュームのある章なので、もう少し時間を取って読みたいと思います。

８章： ルーティング

SPAを用いた、ページ切り替えの仕組みであるReact Routerの紹介です。P４１３の図の説明がとてもわかり易いです。

９章： テスト

ユニットテスト、JavaScriptのテストフレームワークJest、Testing Libraryの紹介に始まり、Reactでのテスト方法がまとまっています。
Testing Libraryは知らなかったのですが、P497の表を見て、コンポーネントのテストが楽になりそうだなと感じました。

10章： TypeScriptの活用

TypeScriptの基本、Reactへの組み込み方を詳細まで説明しています。
私はReact+Typescriptを使ったことがないので、メリットがよく分からなかったのですが、実際に組み込む時の細かい課題が丁寧に説明されていると思いました。

11章：　Next.jsの活用

Next.jsとは何か、Reactとの相違などを紹介しています。App Router、サーバーコンポーネント、Vercelへのデプロイなど、本書で理解したことを踏まえ、次のステップへの内容が示されています。

---

以上、「これからはじめるReact実践入門」を読んでみての感想となります。

サンプルコードに関して

サンプルコードは、https://wings.msn.to/index.php/-/A-03/978-4-8156-1948-0/ よりダウンロードできます。
本書の前書きのiv-viにサンプルコードに関する説明があるのでこちらを読むことをおすすめします。
(src/index.jsで、動作を見たいroot.renderだけをコメントアウト解除して、my-react配下で、npm startすれば動きます。)

さいごに

ボリュームがあるだけあって、目を通すことに時間はかかりますが、それだけに知らないことを多く理解することができた良い本でした。
また、サンプルのコードの数は（ちゃんと数えていないですが）、２００以上あるように思います。読んで理解することが難しい内容の場合は、実際に動かして挙動を見つつ、本を読むとより理解が進みやすいと思います。Reactは簡単ではないので、この本とサンプルコードを利用して、引き続き理解を深めていきたいと思います。