- React の機能の説明を Hooks ファーストにし、クラスコンポーネントなどのレガシーな機能の説明は補足に留めるようにした
- 各種トレンド調査の情報を 2022 年 9 月現在の最新のものに更新
- プロジェクト作成のためのツールチェーンを Create React App から Vite に変更
- その他使用する各種ライブラリ・ツールもコミュニティの採用トレンドを考慮して刷新
- Node.js のパッケージマネージャを anyenv から asdf に変更
- npm、Yarn、pnpm を比較検討
- ツールチェーンを Vite にして概要や手順の説明を更新
- ES2021 / ES2022 で導入された各種記法の説明を追加
- クラスのプライベートプロパティの説明を追加
thisの挙動についての説明をさらにわかりやすく
- プログラミング言語の分類図を追加して、パラダイムのちがいをさらにわかりやすく
- JavaScript の例外処理について、新しく 1 項を設けて解説
- JavaScript と TypeScript におけるクラスの違いを明確に
- 型エイリアスとインターフェースのどちらを使うかについて、コンポーネントの props と state にのみ型エイリアスを使い、それ以外はインターフェースを使うという方針に変更
- npm パッケージモジュールの型解決についての説明を追加
- tsconfig.json の設定項目について、コンパイラオプション以外の項目およびプロジェクトリファレンスについての説明を追加
- 公式の Create React App を使うのをやめ、新しく Vite を採用した理由を主に説明するために新しく設けた章
- 前版の 2 章に記述していた webpack 以前の歴史に加え、webpack より後に登場した主要なツールについて、トレンドを整理した解説を追加
- Deno について 1 節を設けて解説
- Svelte および Preact、Solid についてそれぞれ 1 項を設けて解説
- 前版までのように Hooks を別途説明するのではなく、当たり前のものとして最初から Hooks を使った記述で説明するように
- クラスコンポーネントについての解説は補足として簡略化
- コンポーネントからロジックを分離・再利用するための技術を、Custom Hook に至るまで歴史に沿って解説
- 新しくフォームハンドリングについて、1 節を設けて解説
- 全般ではメモ化の Hooks として簡単にふれるにとどまっていたレンダリングの最適化について、1 節を設けコンポーネントのライフサイクルから整理して解説
- コンソールおよび React Developer Tools を用いたデバッグのやり方について、新しく 1 節を設け解説
- コンポーネントの設計について、一般的な命名規則や SOLID の原則、Presentational and Container Components パターン、Atomic Design の観点からの解説を追加
- React プロジェクトのあるべきディレクトリ構成についての考察を追加
- Next.js などで一般的なファイルシステムベースのルーティングについて説明を追加
- React Router 5 の使い方の説明は省略、正式版がリリースされた 6 について API 仕様から使い方についてくわしく解説
- 前版でふれた Recoil に加え、Zustand や Jotai についても解説
- React 18 で正式に導入された Concurrent Rendering について、その意義や具体的なメリットを挙げて解説
- Concurrent Rendering をアプリケーションに導入する際の Concurrent UI パターンについて説明
- Suspense を使う際のライブラリを React Query（TanStack Query）から SWR に変更
- 主なパッケージの対応バージョンを以下にアップデート
- TypeScript 4.2.3 → 4.4.2
- 脚注における winget（Windows Package Manager）について、2021 年 5 月 26 日にバージョン 1.0 が正式にリリースされたため、説明をアップデート。
- ES2021 の正式仕様が 2021 年 6 月 21 日にリリースされたので、ECMAScript 最新版についての記述をアップデート。
- Stackoverflow Developer Survey の結果についての説明を 2020 のものから 2021 にアップデート。
- GitHut、Stack Overflow Developer Survey の結果についての説明を 2020 のものから 2021 にアップデート。
- TypeScript 4.3 においてコンパイルターゲットに
es2021が追加され、esnextが ES2021 に相当するようになったため、説明をアップデート。
- Angular が TSLint → ESLint への移行を公式でやることを断念、将来的にデフォルト linter を廃止し Angular ESLint と連携することになったため、説明をアップデート。
- LitElement がバージョンアップで lit-html を統合・リブランディングして Lit 2.0 になったため、説明をアップデート。
- 1 年ほど停滞していた React Router の開発が 2021 年 8 月に再開されたため、見通しに関する記述をアップデート。
- 各 Concurrent Mode API から
unstable_プレフィックスが取り除かれたので、それに合わせて記述をアップデート。
- 主なパッケージの対応バージョンを以下にアップデート
- React 17.0.1 → 17.0.2
- Create React App 4.0.1 → 4.0.3
- TypeScript 4.1.3 → 4.2.3
- The State of JavaScript の調査結果およびその説明を、2019 年版から 2020 年版に更新。
- npm trends の統計およびその説明を、2021 年 3 月現在のものに更新。
- 「フォルダ」を一律、「ディレクトリ」に修正。
- 「Create React App で『Hello, World!』」項にて、react-scripts がバージョン 4.0.2（2021-02-03）で TypeScript のバージョンを 4.1 系に上げたため、第 1 刷で対応していた新しい JSX 変換形式の設定のコンフリクトが解消された。その部分の説明が必要なくなったため削除。
- 旧「npm-scripts」項について、npm の公式がすでに「npm-scripts」という呼称を使わなくなっているため、項タイトルを「npm-scripts」から「npm の Scripts」に変更。また
prepareスクリプトの説明を追加し、全体的に内容を整理。
- 「配列の反復処理」項にて、
sortメソッドが破壊的であることの注意と、JavaScript で破壊的メソッドを非破壊的に運用するための方法の説明を追加。
- 「タプル型」項にて、TypeScript 4.2 で導入されたレストパラメータをタプルの定義に使う方法の説明を追加。
- 「JSX の基本的な文法」項にて、
import React from 'react'を必要としない新しい JSX 変換形式の説明を追加。
- 「ESLint の環境を作る」項および「ESLint の適用ルールをカスタマイズする」項の冒頭における ESLint の環境構築のやり方を最新版に対応。初期化時に eslint-config-airbnb を併せてインストールするように手順を変更した。
- インストールされているパッケージのバージョンを調べるコマンドを
npm lsからyarn listに変更。 yarn upgrade --latestコマンドのアップグレードの対象から TypeScript が外されたため、別途アップグレードを実行するよう手順を追加。- typesync の npm による scripts での実行を
postinstallからpreinstallに書く方法に変更。以降のサンプルコードもすべてこのやり方にした。
- eslint-config-prettier がバージョン 8.0.0 から
.eslintrcでのプラグイン設定をひとつにまとめることができるようになったため、該当の設定内容を更新。
- Git Hooks についての説明を追加
- 使用する Git Hooks 管理ツールを husky から simple-git-hooks に乗り換え、説明もそれに合わせて変更。
- 関数コンポーネントの型定義に
FCを使っていたのを、現状のコミュニティのトレンドに合わせてVFC（VoidFunctionComponent）に変更。以降のサンプルコードもすべてこのやり方にした。
- 主なパッケージの対応バージョンを以下にアップデート
- React 17.0.0 RC1 → 17.0.1
- Create React App 3.4.3 → 4.0.1
- TypeScript 4.0.2 → 4.1.3
- ESLint 6.8.2 → 7.14.0
- React Query 2.15.4 → 3.5.5
- npm trends の統計およびその説明を、2020 年 12 月現在のものに更新。
- 「ビルトインオブジェクト」と表記していたものを「組み込みオブジェクト」に変更。
- 「Mac OS」と表記していたものを「macOS」に修正。
- 「Visual Studio Code」の略称表記を「VSCode」から「VS Code」に修正。
- TypeScript の「ユニオン型」を「共用体型」に、「インターセクション型」を「交差型」に変更。
- 「Node.js をインストールする」項にて、従来 Mac のみで説明していた環境作成について Windows でのケースも言及。WSL をベースにした Windows での環境手順をオンラインドキュメントとして追加した。
- 「Yarn コマンド」項にて、プロジェクトパッケージのロックファイルについて、npm コマンド使用時の
package-lock.jsonについても言及。
- 「型表現に使われる演算子」項にて、配列の要素から型を作成する書き方の説明を追加。
- 新しく「条件付き型とテンプレートリテラル型」項を追加。
- 「組み込みユーティリティ型」項にて、
Record型および文字列リテラルの各ユーティリティ型についての説明を追加。
- 新しい JSX 変換形式 についての説明を随所に追加。以降の章のサンプルコードはすべてこの変換形式を用いた書き方に変更。
- 内容を ESLint 7 系に対応したものにアップデート
- ESLint のプラグインとして Prettier をインストール」項を「Prettier の環境を作る」に改名。Prettier 公式が eslint-plugin-prettier を非推奨としたため、Prettier を ESLint のプラグインではなく直接実行する形式での環境構築に内容を変更。
- ESLint のキャッシュファイル等が Git リポジトリに登録されてしまうことを防ぐため、以降のサンプルコードの
.gitignoreファイルを gibo を使って生成したものにリプレース。
- サンプルコードにおける URL のクエリパラメータを query-string と optional chaining を用いて抽出する手法は @typescript-eslint/no-unsafe-call および @typescript-eslint/no-unsafe-member-access のルールに抵触するようになったため、JavaScript 標準の URLSearchParams オブジェクトを使った手法に変更。
- Recoil を使ったサンプルコードを収録。
- 「React Query ― 個人開発ながら多機能でプロジェクトが活発」節以降の React Query に関する説明をバージョン 3 系のものにアップデート。
useTransitionおよびuseDeferredValueの設定オプションからtimeoutMsが削除されたため、説明もそれに合わせて変更。- 「Concurrent モードで先進的 UI を実現する」項にて、error boundary のリセットに React Query の
useQueryErrorResetBoundaryを使ったサンプルを追加。
前版からボリュームが約 3 倍に増量したため内容を「Ⅰ. 言語・環境編」「Ⅱ. React 基礎編」「Ⅲ. React 応用編」の 3 冊に分割し、全 13 章の三部作とした。
- Node.js そのものと、インストールが必要な理由についての説明を追加。
- 非推奨になった ndenv を nodenv に置き換えた。併せて、anyenv-update と nodenv-default-packages のふたつのプラグインを導入。
yarn upgrade-interactiveコマンドの説明を追加。
- 「1-2. Hello, World!」を同節に再編成。Create React App についての詳細な説明を追加し、Yarn コマンドの説明については次の節に委譲した。
- 同節を新規に追加。Yarn コマンドに加え、npm-scripts や react-scripts についても詳細に説明。
- 章題を「ナウでモダンな JavaScript」から変更し、内容を全体的に再構成。ボリュームも従来の 5 倍以上に。
- 旧「2-6. 非同期処理を扱う」を第 3 章に「3-4. JavaScript での非同期処理」として移動。
- JavaScript の成り立ちから立ち戻って概要の説明を追加。
- 同節を新規に追加。
- 宣言文と関数式のちがいの説明、アロー関数で引数がひとつのときの括弧を省略するべきかどうかの議論を追加。さらに「引数テクニック」の項を追加。
- プロトタイプベースについての説明を追加。
- 同節を新規に追加。
- 同節を新規にを追加。
importとexportの使い方に加え、ESM 周辺の特殊事情についても説明。
- 旧「3-6. ジェネレータ」の節を削除、簡略化した説明を第 11 章の「自走式重対空砲 redux-saga」にあらためて記述。
- 旧 2 章から内容を移動した「3-4. JavaScript での非同期処理」にて、説明とサンプルコードを全て刷新。
Promiseオブジェクトの作成法から始まり、通信ライブラリが返すPromiseオブジェクトを扱う実践的な内容に変更。
- 実際のサンプルコードを使った説明を追加。
Array.prototype.reduce()とArray.prototype.sort()についての説明を別途詳細に。またオブジェクトの反復処理についても新規に項を設けて説明。
- 旧「3-3. 関数型プログラミングの概要」「3-4. 高階関数」「3-5. クロージャ」の節を同節として統合。
- 章題を「型のある TypeScript は開発者の味方」から変更し、内容を全面的に再構成。ボリュームも従来の 3 倍以上に。
- 旧「4-3. 配列とオブジェクト」の内容は「4-4. 型の名前と型合成」に吸収。
- 旧「4-5. コンパイル設定」の内容は「4-8. TypeScript の環境設定」に吸収。
- 上記 4 つの節を新規に追加。
- 引用している統計指標をアップデートし、説明をよりくわしく拡充。
- JavaScript および TypeScript における linter の歴史を紹介。さらに
yarn eslint --initから始める設定ファイル作成の方法、各プラグインや共有設定、カスタマイズしているルール、ESLint を無効化するコメントの書き方についても新しく追加。
- Prettier の登場背景を紹介。インストールの方法の説明を追加。設定の内容も紹介。
- stylelint についての説明を節として独立、内容を充実させた。
- 章として新しく追加。
- 章全体で関数コンポーネントをベースにして、クラスコンポーネントをその対比で説明するという形に変更したため、旧「7-5. 関数コンポーネント」節を削除。
- 旧「7-1. React の基本思想」の内容を新 7 章に吸収、コンポートの概念を説明するため同節を新しく追加。
- 同節を新規に追加。mixins、HOC、render props と順を追ってロジックの再利用の歴史を説明。
- 同節を新規に追加、Hooks のメモ化について 1 節をさいて説明。
- Reach Router についての説明を追加。さらに将来の React Router との統合プランについて記述。
- 旧「9-3. React Router の使い方」の、サンプルコードを利用した説明の部分を同節として独立させた。
- 同節を新規に追加。
- 章タイトルを「Redux でアプリの状態を管理する」から改題。
- Redux 登場時の状況の描写をより詳細に。
- 旧「10-3. Redux の使い方」の内容とサンプルコードを HOC から Hooks インターフェースを使ったものに更新。
- 上記 3 節を新規に追加。
- 章タイトルを「Redux で非同期処理を扱う」から改題。
- 上記 2 節を新規追加。
- 章として新しく追加。
- 使用している主なパッケージを、2019 年 3 月時点の最新バージョンにアップデート。
- Create React App 本家が TypeScript を直接サポートし、create-react-app-typescript はパッケージそのものが非推奨になったため、create-react-app-typescript を使用していた部分を create-react-app に入れ替えた。
- 分割代入についての説明を追加。
- 上記 2 節を新規追加。
- never 型についての説明を追加。
- の交差型と共用型についての説明の誤りを訂正。および TypeScript 3.4 から導入された Readonly 型についての説明を追加。
- 絶対パスインポートについての説明を追加。
- TypeScript の構文チェックツール TSLint については ESLint への統合プランが発表され 1、近い将来に非推奨になるとアナウンスがあったため、旧「6-1. TSLint」節の内容を同節に変更。加えて全てのサンプルコードの TSLint の環境を ESLint に移行。
- Stateless Functional Component（SFC）の呼称を Function Component（FC）に変更。
- Hooks が導入され Recompose の開発中止が宣告されたため、同章の内容を「合成するぞ Recompose」から「Hooks で関数コンポーネントを強化する」に置き換える形で刷新。
- 最新の Redux および React Redux に対応した型解決の記述法に切り替えた。
- TypeScript FSA の更新が滞っているため、同節の内容を TypeScript FSA を使わない手法を使ったものに書き換えた。
- 章として新規追加。