publish 3rd impression with part i

oukayuka · oukayuka · commit 790df1128ae5 · 2021-09-10T10:29:35.000+09:00
diff --git a/01-hello/02-hello-world/tsconfig.json b/01-hello/02-hello-world/tsconfig.json
@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": [
     "src"
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,40 @@
 <!-- markdownlint-disable MD024 -->
 # 各版・各刷における内容の変更
 
+## 第3.1版 第3刷（2021-09 発行）
+
+### ■ 対応パッケージのアップデート
+
+- 主なパッケージの対応バージョンを以下にアップデート
+    - **TypeScript**　4.2.3 → 4.4.2
+
+### 第1章&nbsp; こんにちは React
+
+#### 1-2. プロジェクトを作成する
+
+- 脚注における winget（Windows Package Manager）について、2021 年 5 月 26 日にバージョン 1.0 が正式にリリースされたため、説明をアップデート。
+
+### 第2章&nbsp; エッジでディープな JavaScript の世界
+
+#### 2-1. あらためて JavaScript ってどんな言語？
+
+- ES2021 の正式仕様が 2021 年 6 月 21 日にリリースされたので、ECMAScript 最新版についての記述をアップデート。
+- Stackoverflow Developer Survey の結果についての説明を 2020 のものから 2021 にアップデート。
+
+### 第4章&nbsp; TypeScript で型をご安全に
+
+#### 4-1. TypeScript はイケイケの人気言語？
+
+- GitHut、Stack Overflow Developer Survey の結果についての説明を 2020 のものから 2021 にアップデート。
+- TypeScript 4.3 においてコンパイルターゲットに `es2021` が追加され、`esnext` が ES2021 に相当するようになったため、説明をアップデート。
+
+### 第7章&nbsp; React をめぐるフロントエンドの歴史
+
+#### 7-5. 他のフレームワークとの比較
+
+- Angular が TSLint → ESLint への移行を公式でやることを断念、将来的にデフォルト linter を廃止し Angular ESLint と連携することになったため、説明をアップデート。
+- LitElement がバージョンアップで lit-html を統合・リブランディングして Lit 2.0 になったため、説明をアップデート。
+
 ## 第3.1版 第2刷（2021-04-01 発行）
 
 ### ■ 対応パッケージのアップデート
diff --git a/errata.md b/errata.md
@@ -1,21 +1,21 @@
 <!-- markdownlint-disable MD010 MD029 MD032 -->
 # 『りあクト！ TypeScript で始めるつらくない React 開発 &nbsp;第3.1版』初版第 1 刷の正誤表・更新情報
 
-最終更新日： 2021 年 4 月 18 日
+最終更新日： 2021 年 9 月 10 日
 
 ### ご注意点
 
-- この正誤表は 2020 年 12 月 26 日に発行された**初版第 1 刷**の内容をベースにしています。第 2 刷をお持ちの場合は[そちらに対応したページ](errata2.md)をご覧ください。
+- この正誤表は 2020 年 12 月 26 日に発行された**第 1 刷**の内容をベースにしています。第 2 刷をお持ちの場合は[こちら](errata2.md)、第 3 刷をお持ちの場合は[こちら](errata3.md)ご覧ください。お手持ちの本がどれに該当するかは、最後の奥付けのページに記載されています。
 - 正誤表の内容は随時アップデートされます。
-- 記述しているページ番号は、紙の初版第 1 刷に対応していますが、電子版では内容の更新によりお持ちのバージョンによって前後することがあります。
+- 記述しているページ番号は、紙の第 1 刷に対応していますが、電子版では内容の更新によりお持ちのバージョンによって前後することがあります。
 - 電子版については随時、修正やアップデートが反映された新しいバージョンが配信されます。購入先のサイトをご確認ください。なお現時点での最新版は以下の通りです。
-    - 【Ⅰ. 言語・環境編】バージョン 2.0.2（2021-04-18）
+    - 【Ⅰ. 言語・環境編】バージョン 3.0.1（2021-09-10）
     - 【Ⅱ. React 基礎編】バージョン 2.1.1（2021-04-18）
     - 【Ⅲ. React 応用編】バージョン 2.0.2（2021-04-18）
 
 ### 電子版のバージョニングについて
 
-- **整数の位** …… 紙の本の「刷」番号に対応しています。「電子版バージョン 2.0.0」であれば、紙の本の「初版第 2 刷」の内容と完全に一致します
+- **整数の位** …… 紙の本の「刷」番号に対応しています。「電子版バージョン 2.0.0」であれば、紙の本の「第 2 刷」の内容と完全に一致します
 - **小数点第 1 位** …… メジャーバージョン番号。各技術のアップデートや情勢の変化に合わせて内容が更新されたときに変更されます
 - **小数点第 2 位** …… マイナーバージョン番号。誤植の修正があったときに変更されます
 
@@ -41,6 +41,16 @@
 + console.log(obj2);  // { a: 1, b: 2, c: 3, d: 99, e: 5 }
 ```
 
+- 2-3 / p.63
+
+```diff
+・配列リテラル
+…… [1, 2, 3] の形式で記述する。[] は空の配列を示す。arr[n] という構文で
+- n-1 番め
++ n+1 番め
+の要素にアクセスできる。
+```
+
 - 2-8 / p.105
 
 ```diff
@@ -57,7 +67,7 @@
 ```
 
 - 3-2 / p.128-129  
-`sort` メソッドが破壊的であることの注意と、JavaScript で破壊的メソッドを非破壊的に運用するための方法の説明を追加。  
+`sort` メソッドが破壊的であることの注意と、JavaScript で破壊的メソッドを非破壊的に運用するための方法の説明を追加。
 
 ```diff
   「そっか、そういう使い方もできるんですね」
@@ -73,7 +83,7 @@
 > console.log(arr);   // [ 2, 3, 5, 12, 24 ]
 > ```
 >
-> 「えっ、これやばくないですか？　それにこれ見て思いましたけど、JavaScript って破壊的メソッドと非破壊的メソッドが混在してて見分ける方法がないのひどいですね。Ruby なら破壊的メソッドには `sort!` みたいに末尾に `!` がつくのでわかりやすいのに」  
+> 「えっ、これやばくないですか？　それにこれ見て思いましたけど、JavaScript って破壊的メソッドと非破壊的メソッドが混在してて見分ける方法がないのひどいですね。Ruby なら破壊的メソッドには `sort!` みたいに末尾に `!` がつくのでわかりやすいのに」
 > 「うん、例によって歴史的経緯でこうなっちゃってるんだろうね。どれが破壊的でどれが非破壊的なのかは、これはもう丸暗記するしかない。それで JavaScript の配列の破壊的メソッドを非破壊的に使うには裏技があって、`slice` メソッドを間にはさむといいの。`slice()` は本来、配列から任意の範囲をシャローコピーして返してくれるメソッドなんだけど、引数を省略するとその配列全体をコピーしてくれる」
 >
 > ```
@@ -82,7 +92,7 @@
 > console.log(arr);   // [ 12, 2, 3, 24, 5 ]
 > ```
 >
-> 「なるほど。これならそんなに追加のコード量は増えませんし、いいですね。`sort()` を使う際には忘れないようにしないと」  
+> 「なるほど。これならそんなに追加のコード量は増えませんし、いいですね。`sort()` を使う際には忘れないようにしないと」
 > 「うん、ちょっとめんどうだけどそうしてね。
 
 <br />
@@ -121,7 +131,47 @@
   で 'warn' になってるので警告が出てたわけ。
 ```
 
-- 7-5 / p.122  
+- 6-2 / p.70 / 脚注
+
+```diff
+- 77 https://p9rettier.io/playground/
++ 77 https://prettier.io/playground/
+```
+
+- 6-2 / p.73 / サンプルコード
+
+```diff
+  singleQuote: true
+  trailingComma: "all"
++ endOfLine: "auto"
+```
+
+- 6-2 / p.74 / サンプルコード
+
+```diff
+  "scripts": {
+    ︙
+-   "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
++   "eject": "react-scripts eject",
+  + "fix": "npm run -s format && npm run -s lint:fix",
+  + "format": "prettier --write --loglevel=warn '{public,src}/**/*.{js,jsx,ts,tsx,html,gql,graphql,json}'",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
+  + "lint:conflict": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
+    "preinstall": "typesync"
+  },
+```
+
+- 7-5 / p.118
+
+```diff
+ちなみに React が 16.1 万、Angular が 6.8 万。まあ Vue のスターが多いのは Evan You が中国人で、アリババやテンセントといった中国での採用事例が多いことによる
+- 組織標的
++ 組織票的
+な色合いが強いと思うけど」
+```
+
+- 7-5 / p.122
 
 ```diff
   　それに公式ドキュメントも明らかに必要な情報が網羅しきれてない。説明もわかりにくく、React や Vue と比べると格段に見劣りする。
@@ -130,6 +180,15 @@
   は本気で LitElement を普及させる気があるのかと疑いたくなるよ」
 ```
 
+- 8-3 / p.141
+
+```diff
+「クラス宣言で Component クラスを拡張するときに 2 つめの型引数で渡されてますね。props のときと違って、
+- Component<unknown, AppState>
++ Component<unknown, State>
+と型引数が 2 つあります」
+```
+
 <br />
 
 ## 【Ⅲ. React 応用編】
diff --git a/errata2.md b/errata2.md
@@ -1,34 +1,80 @@
 <!-- markdownlint-disable MD010 MD029 MD032 -->
 # 『りあクト！ TypeScript で始めるつらくない React 開発 &nbsp;第3.1版』の正誤表・更新情報
 
-最終更新日： 2021 年 4 月 18 日
+最終更新日： 2021 年 9 月 10 日
 
 ### ご注意点
 
-- この正誤表は 2020 年 12 月 26 日に発行された**初版第 2 刷**の内容をベースにしています。第 1 刷をお持ちの場合は[そちらに対応したページ](errata.md)をご覧ください。
+- この正誤表は 2021 年 4 月 1 日に発行された**第 2 刷**の内容をベースにしています。第 1 刷をお持ちの場合は[こちら](errata.md)、第 3 刷をお持ちの場合は[こちら](errata3.md)ご覧ください。お手持ちの本がどれに該当するかは、最後の奥付けのページに記載されています。
 - 正誤表の内容は随時アップデートされます。
-- 記述しているページ番号は、紙の初版第 2 刷に対応していますが、電子版では内容の更新によりお持ちのバージョンによって前後することがあります。
+- 記述しているページ番号は、紙の第 2 刷に対応していますが、電子版では内容の更新によりお持ちのバージョンによって前後することがあります。
 - 電子版については随時、修正やアップデートが反映された新しいバージョンが配信されます。購入先のサイトをご確認ください。なお現時点での最新版は以下の通りです。
-    - 【Ⅰ. 言語・環境編】バージョン 2.0.2（2021-04-18）
+    - 【Ⅰ. 言語・環境編】バージョン 3.0.1（2021-09-10）
     - 【Ⅱ. React 基礎編】バージョン 2.1.1（2021-04-18）
     - 【Ⅲ. React 応用編】バージョン 2.0.2（2021-04-18）
 
 ### 電子版のバージョニングについて
 
-- **整数の位** …… 紙の本の「刷」番号に対応しています。「電子版バージョン 2.0.0」であれば、紙の本の「初版第 2 刷」の内容と完全に一致します
+- **整数の位** …… 紙の本の「刷」番号に対応しています。「電子版バージョン 2.0.0」であれば、紙の本の「第 2 刷」の内容と完全に一致します
 - **小数点第 1 位** …… メジャーバージョン番号。各技術のアップデートや情勢の変化に合わせて内容が更新されたときに変更されます
 - **小数点第 2 位** …… マイナーバージョン番号。誤植の修正があったときに変更されます
 
 <br />
 
 ## 【Ⅰ. 言語・環境編】
 
-現在のところ、修正・更新部分はありません。
+- 2-3 / p.63
+
+```diff
+・配列リテラル
+…… [1, 2, 3] の形式で記述する。[] は空の配列を示す。arr[n] という構文で
+- n-1 番め
++ n+1 番め
+の要素にアクセスできる。
+```
 
 <br />
 
 ## 【Ⅱ. React 基礎編】
 
+- 6-2 / p.70 / サンプルコード
+
+```diff
+  "scripts": {
+    ︙
+-   "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
+  + "fix": "npm run -s format && npm run -s lint:fix",
+  + "format": "prettier --write --loglevel=warn '{public,src}/**/*.{js,jsx,ts,tsx,html,gql,graphql,json}'",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+  + "lint:conflict": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
+    "preinstall": "typesync"
+  },
+```
+
+- 6-2 / p.71 / サンプルコード
+
+```diff
+  singleQuote: true
+  trailingComma: "all"
++ endOfLine: "auto"
+```
+
+- 6-2 / p.72 / サンプルコード
+
+```diff
+  "scripts": {
+    ︙
+-   "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
++   "eject": "react-scripts eject",
+  + "fix": "npm run -s format && npm run -s lint:fix",
+  + "format": "prettier -- write --loglevel=warn' {public,src}/**/*.{js,jsx,ts,tsx,html,gql,graphql,json}'",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
+  + "lint:conflict": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
+    "preinstall": "typesync"
+  },
+```
+
 - 6-4 / p.83  
 simple-git-hooks がバージョン 2.3（2021-04-02）から Git Hooks の削除機能を実装したため、該当する部分の説明を変更。
 
@@ -47,6 +93,42 @@ simple-git-hooks がバージョン 2.3（2021-04-02）から Git Hooks の削
 - 6-4 / p.85  
 mrm がバージョン 5.0.0（2021-04-01）で simple-git-hooks から再度 husky v6 を採用したことにより、lint-staged も同様に推奨パッケージを husky に戻したため、その部分の説明を修正。
 
+- 7-5 / p.118
+
+```diff
+ちなみに React が 16.1 万、Angular が 6.8 万。まあ Vue のスターが多いのは Evan You が中国人で、アリババやテンセントといった中国での採用事例が多いことによる
+- 組織標的
++ 組織票的
+な色合いが強いと思うけど」
+```
+
+- 7-5 / p.122
+
+```diff
+  　それに公式ドキュメントも明らかに必要な情報が網羅しきれてない。説明もわかりにくく、React や Vue と比べると格段に見劣りする。
+- Gogole
++ Google
+  は本気で LitElement を普及させる気があるのかと疑いたくなるよ」
+```
+
+- 8-3 / p.130
+
+```diff
+「ここはちょっと事情が複雑なので順を追って説明させてね。まず React の関数コンポーネントの型インターフェースには FunctionComponent が用意されてる。これはより短い名前の
+- VFC
++ FC
+でエイリアスされてるんだけど、
+```
+
+- 8-3 / p.142
+
+```diff
+「クラス宣言で Component クラスを拡張するときに 2 つめの型引数で渡されてますね。props のときと違って、
+- Component<unknown, AppState>
++ Component<unknown, State>
+と型引数が 2 つあります」
+```
+
 - 9-3 / p.179
 
 ```diff
diff --git a/errata3.md b/errata3.md
@@ -0,0 +1,46 @@
+<!-- markdownlint-disable MD010 MD029 MD032 -->
+# 『りあクト！ TypeScript で始めるつらくない React 開発 &nbsp;第3.1版』の正誤表・更新情報
+
+最終更新日： 2021 年 9 月 10 日
+
+### ご注意点
+
+- この正誤表は 2021 年 4 月 1 日に発行された**第 3 刷**の内容をベースにしています。第 1 刷をお持ちの場合は[こちら](errata.md)、第 2 刷をお持ちの場合は[こちら](errata2.md)ご覧ください。お手持ちの本がどれに該当するかは、最後の奥付けのページに記載されています。
+- 正誤表の内容は随時アップデートされます。
+- 記述しているページ番号は、紙の第 3 刷に対応していますが、電子版では内容の更新によりお持ちのバージョンによって前後することがあります。
+- 電子版については随時、修正やアップデートが反映された新しいバージョンが配信されます。購入先のサイトをご確認ください。なお現時点での最新版は以下の通りです。
+    - 【Ⅰ. 言語・環境編】バージョン 3.0.1（2021-09-10）
+    - 【Ⅱ. React 基礎編】バージョン 2.1.1（2021-04-18）
+    - 【Ⅲ. React 応用編】バージョン 2.0.2（2021-04-18）
+
+### 電子版のバージョニングについて
+
+- **整数の位** …… 紙の本の「刷」番号に対応しています。「電子版バージョン 2.0.0」であれば、紙の本の「第 2 刷」の内容と完全に一致します
+- **小数点第 1 位** …… メジャーバージョン番号。各技術のアップデートや情勢の変化に合わせて内容が更新されたときに変更されます
+- **小数点第 2 位** …… マイナーバージョン番号。誤植の修正があったときに変更されます
+
+<br />
+
+## 【Ⅰ. 言語・環境編】
+
+- 2-3 / p.63
+
+```diff
+・配列リテラル
+…… [1, 2, 3] の形式で記述する。[] は空の配列を示す。arr[n] という構文で
+- n-1 番め
++ n+1 番め
+の要素にアクセスできる。
+```
+
+<br />
+
+## 【Ⅱ. React 基礎編】
+
+現在のところ、修正・更新部分はありません。
+
+<br />
+
+## 【Ⅲ. React 応用編】
+
+現在のところ、修正・更新部分はありません。
