finish chapter 1

oukayuka · oukayuka · commit 8a138afb5c35 · 2020-12-06T11:43:36.000+09:00
diff --git a/.markdownlint.json b/.markdownlint.json
@@ -3,7 +3,6 @@
   "commands-show-output": false,
   "fenced-code-language": false,
   "first-line-heading": false,
-  "heading-style": "atx",
   "heading-increment": false,
   "line-length": false,
   "no-bare-urls": false,
diff --git a/01-hello/01-env/.vscode/extensions.json b/01-hello/01-env/.vscode/extensions.json
@@ -6,9 +6,9 @@
   "recommendations": [
     "coenraads.bracket-pair-colorizer",
     "dbaeumer.vscode-eslint",
+    "donjayamanne.githistory",
     "esbenp.prettier-vscode",
     "msjsdiag.debugger-for-chrome",
-    "ms-vsliveshare.vsliveshare",
     "oderwat.indent-rainbow",
     "stylelint.vscode-stylelint",
     "VisualStudioExptTeam.vscodeintellicode",
diff --git a/01-hello/01-env/.vscode/settings.json b/01-hello/01-env/.vscode/settings.json
@@ -1,20 +1,11 @@
 {
-  "css.validate": false,
-  "less.validate": false,
-  "scss.validate": false,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
-  },
   "editor.formatOnSave": false,
   "editor.tabSize": 2,
+  "editor.tokenColorCustomizations": {
+    "semanticHighlighting": true
+  },
   "editor.wordWrap": "on",
-  "eslint.enable": true,
-  "eslint.packageManager": "yarn",
   "files.insertFinalNewline": true,
   "files.trimTrailingWhitespace": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "[markdown]": {
-    "files.trimTrailingWhitespace": false
-  }
+  "npm.packageManager": "yarn"
 }
diff --git a/01-hello/02-hello-world/.vscode/extensions.json b/01-hello/02-hello-world/.vscode/extensions.json
@@ -6,9 +6,9 @@
   "recommendations": [
     "coenraads.bracket-pair-colorizer",
     "dbaeumer.vscode-eslint",
+    "donjayamanne.githistory",
     "esbenp.prettier-vscode",
     "msjsdiag.debugger-for-chrome",
-    "ms-vsliveshare.vsliveshare",
     "oderwat.indent-rainbow",
     "stylelint.vscode-stylelint",
     "VisualStudioExptTeam.vscodeintellicode",
diff --git a/01-hello/02-hello-world/.vscode/settings.json b/01-hello/02-hello-world/.vscode/settings.json
@@ -7,6 +7,5 @@
   "editor.wordWrap": "on",
   "files.insertFinalNewline": true,
   "files.trimTrailingWhitespace": true,
-  "npm.packageManager": "yarn",
-  "typescript.tsdk": "./node_modules/typescript/lib"
+  "npm.packageManager": "yarn"
 }
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"
+    "jsx": "react"
   },
   "include": [
     "src"
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,16 +1,29 @@
+<!-- markdownlint-disable MD024 -->
 # 各版における内容の変更
 
+## 第3.1版（2020-12-24）
+
+### 全体
+
+- 「Visual Studio Code」の略称表記を「VSCode」から「VS Code」に修正
+- 「Mac OS」と表記していたものを「macOS」に修正
+- サンプルコードで採用していた UI キットを [Semantic UI React](https://react.semantic-ui.com/) から [Chakra UI](https://chakra-ui.com/) に変更
+
+### 第1章&nbsp; こんにちは React
+
+- 従来 Mac のみで説明していた環境作成を Windows についても言及、WSL をベースにした手順を[オンラインドキュメント](../extract/build-win-wnv.md)として追加した
+
 ## 第3版（2020-08-20）
 
-#### 第1章&nbsp; こんにちは React
+### 第1章&nbsp; こんにちは React
 
 - 「1-1. 基本環境の構築」にて Node.js そのものと、インストールが必要な理由についての説明を追加
 - 同じく「1-1. 基本環境の構築」にて、非推奨になった [ndenv](https://github.com/riywo/ndenv) を [nodenv](https://github.com/nodenv/nodenv) に置き換えた。併せて、[anyenv-update](https://github.com/znz/anyenv-update) と [nodenv-default-packages](https://github.com/nodenv/nodenv-default-packages) のふたつのプラグインを導入
 - 同じく「1-1. 環境構築」にて、`yarn upgrade-interactive` コマンドの説明を追加
 - 「1-2. Hello, World!」を「1-2. プロジェクトを作成する」に再編成。Create React App についての詳細な説明を追加し、Yarn コマンドの説明については次の節に委譲した
 - 「1-3. アプリを管理するためのコマンドやスクリプト」節を新規に追加。Yarn コマンドに加え、npm-scripts や react-scripts についても詳細に説明
 
-#### 第2章&nbsp; エッジでディープな JavaScript の世界
+### 第2章&nbsp; エッジでディープな JavaScript の世界
 
 - 章題を「ナウでモダンな JavaScript」から変更し、内容を全体的に再構成。ボリュームも従来の 5 倍以上に
 - 「2-1. あらためて JavaScript ってどんな言語？」で JavaScript の成り立ちから立ち戻って概要の説明を追加
@@ -21,66 +34,65 @@
 - 「2-8. JavaScript の鬼門、this を理解する」を新規に追加
 - 「2-9. モジュールのインポート／エクスポート」を追加。`import` と `export` の使い方に加え、ESM 周辺の特殊事情についても説明
 
-#### 第3章&nbsp; 関数型プログラミングでいこう
+### 第3章&nbsp; 関数型プログラミングでいこう
 
 - 「3-1. 関数型プログラミングは何がうれしい？」にて、実際のサンプルコードを使った説明を追加
 - 「3-2. コレクションの反復処理」にて、`Array.prototype.reduce()` と `Array.prototype.sort()` についての説明を別途詳細に。またオブジェクトの反復処理についても新規に項を設けて説明
 - 「3-3. 関数型プログラミングの概要」「3-4. 高階関数」「3-5. クロージャ」の節を「3-3. JavaScript で本格関数型プログラミング」として統合
 - 旧「3-6. ジェネレータ」の節を削除、簡略化した説明を第11章の「自走式重対空砲 redux-saga」にあらためて記述
 - 2章から内容を移動した「3-4. JavaScript での非同期処理」にて、説明とサンプルコードを全て刷新。`Promise` オブジェクトの作成法から始まり、通信ライブラリが返す `Promise` オブジェクトを扱う実践的な内容に
 
-#### 第4章&nbsp; TypeScript で型を強める
+### 第4章&nbsp; TypeScript で型を強める
 
 - 章題を「型のある TypeScript は開発者の味方」から変更し、内容を全面的に再構成。ボリュームも従来の3倍以上に
 - 旧「4-3. 配列とオブジェクト」の内容は「4-4. 型の名前と型合成」に吸収
 - 旧「4-5. コンパイル設定」の内容は「4-8. TypeScript の環境設定」に吸収
 - 「4-3. 関数とクラスの型」「4-5. さらに高度な型表現」「4-6. 型アサーションと型ガード」「4-7. モジュールと型定義」の4つの節を新規に追加
 
-#### 第5章&nbsp; 強力な拡張記法 JSX
+### 第5章&nbsp; 強力な拡張記法 JSX
 
 - 「5-1. JSX とは何であるか、何ではないのか」で引用している統計指標をアップデートし、説明をよりくわしく拡充
 
-#### 第6章&nbsp; Linter とフォーマッタでコード美人に
+### 第6章&nbsp; Linter とフォーマッタでコード美人に
 
 - 「6-1. ESLint」で JavaScript および TypeScript における linter の歴史を紹介。さらに  `yarn eslint --init` から始める設定ファイル作成の方法、各プラグインや共有設定、カスタマイズしているルール、ESLint を無効化するコメントの書き方についても新しく追加
 - 「6-2. Prettier」で Prettier の登場背景を紹介。インストールの方法の説明を追加。設定の内容も紹介
 - 「6-3. stylelint」として stylelint についての説明を独立させた
 
-#### 第7章&nbsp; React をめぐるフロントエンドの歴史
+### 第7章&nbsp; React をめぐるフロントエンドの歴史
 
 - 章として新しく追加。
 
-#### 第8章&nbsp; 何はなくともコンポーネント
+### 第8章&nbsp; 何はなくともコンポーネント
 
 - 従来の「7-1. React の基本思想」の内容を第7章に吸収、新しく「8-1. コンポーネントのメンタルモデル」に差し替えた
 - 章全体で関数コンポーネントをベースにして、クラスコンポーネントをその対比で説明するという形に変更したため、「7-5. 関数コンポーネント」節を削除
 
-#### 第9章&nbsp; Hooks、関数コンポーネントの合体強化パーツ
+### 第9章&nbsp; Hooks、関数コンポーネントの合体強化パーツ
 
 - 「9-1. Hooks に至るまでの物語」を追加。mixins、HOC、render props と順を追ってロジックの再利用の歴史を説明。
 - 「9-4. Hooks におけるメモ化を理解する」を追加、Hooks のメモ化について 1 節をさいて説明。
 
-#### 第10章&nbsp; React におけるルーティング
+### 第10章&nbsp; React におけるルーティング
 
 - 「10-2. ルーティングライブラリの選定」で Reach Router についての説明を追加。さらに将来の React Router との統合プランについて記述
 - 旧版「10-3. React Router の使い方」の、サンプルコードを利用した説明の部分を「10-4. React Router をアプリケーションで使う」として独立させた
 - 「10-5.  React Router バージョン 5 から 6 への移行」節を新規に追加
 
-#### 第11章&nbsp; Redux でグローバルな状態を扱う
+### 第11章&nbsp; Redux でグローバルな状態を扱う
 
 - 「11-1. Redux の歴史」で、Redux 登場時の状況の描写をより詳細に
 - 「11-2. Redux の使い方」の内容とサンプルコードを HOC から Hooks インターフェースを使ったものに更新
 - 「11-3. Redux 公式スタイルガイド」「11-4. Redux Toolkit を使って楽をしよう」「11-5. Redux と useReducer」を新規に追加
 
-#### 第12章&nbsp; React は非同期処理とどう戦ってきたか
+### 第12章&nbsp; React は非同期処理とどう戦ってきたか
 
 - 第12章を「React は非同期処理とどう戦ってきたか」に改題。前版の内容を書き直した上で、新しく「12-2. Effect Hook で非同期処理を書く」「12-3. Redux 不要論を検証する」節を追加
 
-#### 第13章&nbsp; データ取得の次世代標準 Suspense
+### 第13章&nbsp; データ取得の次世代標準 Suspense
 
 - 章として新しく追加
 
-
 <br />
 
 ## 第2版（2019-04-14）
@@ -100,5 +112,3 @@
 - 「10-5. Redux DevTools」の内容を[『りあクト！ TypeScriptで極める現場のReact開発』](https://oukayuka.booth.pm/items/1312815)に委譲
 - 「第11章 Reduxで非同期処理を扱う」の内容を追加
 - その他使用している主なパッケージを、2019年3月時点の最新バージョンにアップデート
-
-
diff --git a/extra/build-win-env.md b/extra/build-win-env.md
@@ -1 +1,172 @@
-TODO: リリースまでに作成する
+# Windows でフロントエンドの開発環境を作る手順
+
+Windows に Node.js を直接インストールするのではなく、[WSL](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10) で Ubuntu を入れてそこに必要な環境を作っていきます。
+
+なお Windows 側にインストールするアプリはエディタとして Visual Studio Code、ターミナルとして Windows Terminal を使いますが、すでにインストールされている場合は手順を飛ばしてください。
+
+## 1. WSL のインストールとアップグレード
+
+参考：[Windows Subsystem for Linux (WSL) を Windows 10 にインストールする](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)
+
+### WSL のインストール
+
+- PowerShell を「管理者として実行」して開く
+- 以下のコマンドを実行して WSL を有効にする
+
+```powershell
+dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
+```
+
+### WSL2 へアップグレード
+
+- 以下のコマンドを実行して仮想マシンの機能を有効にする
+
+```powershell
+dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
+```
+
+- いったんマシンを再起動する
+- [x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ（wsl_update_x64.msi）](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi)をダウンロードして実行する
+- PowerShell を管理者権限で開いて以下のコマンドを実行し、WSL2 を規定のバージョンとして設定する
+
+```powershell
+wsl --set-default-version 2
+```
+
+## 2. Linux ディストリビューションをインストールする
+
+### Ubuntu のインストール
+
+- Microsoft Store から [Ubuntu](https://www.microsoft.com/ja-jp/p/ubuntu/9nblggh4msv6) をインストールする
+- インストールした Ubuntu を起動。最初の起動時にユーザー名とパスワードを入力するよう促されるので、任意のものに設定する。ここで作成されたアカウントが管理者になる
+- そのままでは WSL 環境で作られたファイルにすべて実行権限が付与されてしまうため、設定を変更する。以下の内容のファイルを `/etc/wsl.conf` として作成する
+
+```shell
+sudo vi /etc/wsl.conf
+```
+
+```conf
+[automount]
+options = "metadata,umask=22,fmask=11"
+```
+
+### 各種パッケージ
+
+- Ubuntu のウィンドウで以下のコマンドを実行して、APT とインストール済みのパッケージを最新にする。さらに Git をインストールしておく
+
+```shell
+sudo apt update
+sudo apt -y upgrade
+sudo apt-get install -y git
+```
+
+- Bash 以外のシェルを使いたい場合は以下のようにする（ZSH の場合）
+
+```shell
+sudo apt-get install -y zsh
+chsh -s /usr/bin/zsh
+```
+
+## 3. Windows Terminal をインストールする
+
+- Microsoft Store で [Windows Terminal](https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701) をインストール
+- Windows Terminal を起動、「設定」をクリックして設定ファイル `settings.json` を開く。以下のように編集して、デフォルトで WSL のタブが開きホームディレクトリで起動するに変更。なお各環境の GUID は同ファイル内の `"profiles" > "list"` 要素の `"guid"` に記述されている。
+
+```diff
+  {
+    "$schema": "https://aka.ms/terminal-profiles-schema",
+
+-   "defaultProfile": "{Windows PowerShell の GUID}",
++   "defaultProfile": "{Windows.Terminal.Wsl の GUID}",
+  ︙
+  "profiles":
+  {
+    "list":
+    [
+    ︙
+      {
+        "guid": "{Windows.Terminal.Wsl の GUID}",
+        "hidden": false,
+        "name": "Ubuntu",
+        "source": "Windows.Terminal.Wsl",
++       "startingDirectory": "//wsl$/Ubuntu/home/ユーザー名"
+```
+
+## 4. Node.js のインストール
+
+- anyenv のソースを取得
+
+```shell
+git clone https://github.com/anyenv/anyenv ~/.anyenv
+```
+
+- シェルに anyenv の設定を追加する（ZSH の場合）
+
+```shell
+echo 'eval "$(~/.anyenv/bin/anyenv init -)"' >> ~/.zshrc
+```
+
+- nodenv のインストール
+
+```shell
+exec $SHELL -l
+anyenv install nodenv
+exec $SHELL -l
+```
+
+- 以降は「1-1. 基本環境の構築」の「Node.js をインストールする」に沿って各種プラグインをインストールする
+
+## 5. Visual Studio Code のインストールと設定
+
+参考：[Windows Subsystem for Linux で VS Code の使用を開始する](https://docs.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-VSCode)
+
+### Visual Studio Code のインストール
+
+- [公式サイトのダウンロードページ](https://code.visualstudio.com/download)から、 Visual Studio Code のインストーラをダウンロードして実行する
+
+- スタートメニューから Visual Studio Code を起動し、`File > Prefenrence > Setting Sync` から GitHub アカウントまたは Microsoft アカウントで [Setting Sync](https://code.visualstudio.com/docs/editor/settings-sync) を有効にしておく
+
+```
+File > Prefenrence > Setting Sync
+```
+
+### WSL 上のプロジェクトを編集できるようにする
+
+- VS Code で [Remote - WSL 拡張](https://marketplace.visualstudio.com/items?itemName=ms-VSCode-remote.remote-wsl)をインストールする
+
+- VS Code を終了する
+
+- Windows Terminal を開き、必要なパッケージをインストールして SSL 接続ができるようにする
+
+```shell
+sudo apt-get install -y wget ca-certificates
+```
+
+- 適当なプロジェクトをローカルに用意する
+
+```shell
+git clone git@github.com:oukayuka/Riakuto-StartingReact-ja3.1.git
+```
+
+- WSL 側からコマンドラインでプロジェクトを VS Code で開く。すると初回起動時に WSL 接続に必要なパッケージが自動的にインストールされる
+
+```shell
+cd ./Riakuto-StartingReact-ja3.1.git/01-hello/02-hello-world
+code .
+```
+
+- 完了したら VS Code を終了し、もう一度スタートメニューから起動し直す。ウィンドウの左下に「Open a Remote Window」のアイコンが表示されているはずなのでそれをクリック
+
+![Open a Remote Window](./open-remote.png)
+
+- ウィンドウ中央上に WSL 上のプロジェクトを開くためのセレクトボックスが開くので、「Remote-WSL: Open Folder in WSL...」を選択し、先ほどの `Riakuto-StartingReact-ja3.1.git/01-hello/02-hello-world` フォルダーを開く
+
+![Open a Remote Window](./remote-wsl.png)
+
+- WSL の接続に成功すれば、左下のアイコン表示が「WSL: Ubuntu」のようになる
+
+![Open a Remote Window](./wsl-connected.png)
+
+- VS Code 拡張には WSL 上で動作するために WSL 側にインストールの必要があるものも多い。ローカルにインストール済みで WSL 側にインストールする必要のあるものは「Install in WSL: Ubuntu ⚠️ 」というボタンが表示されるので、それをクリックすればインストールできる
+
+![Open a Remote Window](./wsl-extensions.png)
diff --git a/extra/open-remote.png b/extra/open-remote.png
diff --git a/extra/remote-wsl.png b/extra/remote-wsl.png
diff --git a/extra/wsl-connected.png b/extra/wsl-connected.png
diff --git a/extra/wsl-extensions.png b/extra/wsl-extensions.png

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,5 @@`
`7`	`7`	`"editor.wordWrap": "on",`
`8`	`8`	`"files.insertFinalNewline": true,`
`9`	`9`	`"files.trimTrailingWhitespace": true,`
`10`		`- "npm.packageManager": "yarn",`
`11`		`- "typescript.tsdk": "./node_modules/typescript/lib"`
	`10`	`+ "npm.packageManager": "yarn"`
`12`	`11`	`}`