oukayuka / riakuto-startingreact-ja3.1

『りあクト！ TypeScript で始めるつらくない React 開発  第3.1版』サポートページ

このリポジトリは、『りあクト！ TypeScript で始めるつらくない React 開発 第3.1版』のサンプルコードおよび正誤表を提供するものです。なお、本書は以下のショップにて販売中です。

BOOTH

• Ⅰ. 言語・環境編（B5版・226ページ）
• Ⅱ. React基礎編（B5版・202ページ）
• Ⅲ. React応用編（B5版・216ページ）

各部とも電子版 ￥1,200、紙＋電子セット ￥1,380（送料別）

■ 書籍の紹介

概要

本書『りあクト！ TypeScript で始めるつらくない React 開発』は 2018 年 10 月に開催された 技術書典 5 にて初版、翌年の 技術書典 6 にて第 2 版が頒布され、その後の続編を加えると同人では異例のシリーズ累計 1.4 万部以上を売り上げている、React の本格的な入門書『りあクト！ TypeScript で始めるつらくない React 開発』の改訂第 3.1 版です。

2020 年 12 月に初版第 1 刷を発行。以降も継続してアップデートが続けられており、紙版は 2021 年 4 月に第 2 刷、2021 年 9 月に第 3 刷と重版のたびに、電子版は随時最新バージョンを配信して内容を更新しています。

なお各版・刷の差分の概略については CHANGELOG をご覧ください。

無料サンプル

それぞれ 50 ページほど無料でお読みいただけるサンプルを用意しています。ご自由にご覧ください。

• Ⅰ. 言語・環境編（PDF / 58ページ）
• Ⅱ. React基礎編（PDF / 50ページ）
• Ⅲ. React応用編（PDF / 56ページ）

■ 電子版の閲覧について

本書の電子版は PDF と EPUB（リフロー型） の 2 つのフォーマットで提供されています。閲覧の方法については「よりよい環境で電子版をお読みいただくために」をご覧ください。

■ 正誤表・更新情報

電子版は随時アップデートをかけていますので、購入サイトから最新版をダウンロードしてください。（最終更新日：2021 年 9 月 18 日）
紙の本の正誤表・更新情報につきましてはお持ちの版の情報をご確認いただいた上で第 1 刷用の更新情報ページ、第 2 刷用の更新情報ページ、第 3 刷用の更新情報ページのいずれか該当するものをご覧ください。

■ 目次

【第一部 目次】

第1章　こんにちは React

• 1-1. 基本環境の構築
• 1-2. プロジェクトを作成する
• 1-3. アプリを管理するためのコマンドやスクリプト

第2章　エッジでディープな JavaScript の世界

• 2-1. あらためて JavaScript ってどんな言語？
• 2-2. 変数の宣言
• 2-3. JavaScript のデータ型
• 2-4. 関数の定義
• 2-5. クラスを表現する
• 2-6. 配列やオブジェクトの便利な構文
• 2-7. 式と演算子で短く書く
• 2-8. JavaScript の鬼門、this を理解する
• 2-9. モジュールを読み込む

第3章　関数型プログラミングでいこう

• 3-1. 関数型プログラミングは何がうれしい？
• 3-2. コレクションの反復処理
• 3-3. JavaScript で本格関数型プログラミング
• 3-4. JavaScript での非同期処理

第4章　TypeScript で型をご安全に

• 4-1. TypeScript はイケイケの人気言語？
• 4-2. TypeScript の基本的な型
• 4-3. 関数とクラスの型
• 4-4. 型の名前と型合成
• 4-5. さらに高度な型表現
• 4-6. 型アサーションと型ガード
• 4-7. モジュールと型定義
• 4-8. TypeScript の環境設定

【第二部 目次】

第5章　JSX で UI を表現する

• 5-1. なぜ React は JSX を使うのか
• 5-2. JSX の書き方

第6章　Linter とフォーマッタでコード美人に

• 6-1. ESLint
• 6-2. Prettier
• 6-3. stylelint
• 6-4. さらに進んだ設定

第7章　React をめぐるフロントエンドの歴史

• 7-1. React 登場前夜
• 7-2. Web Components が夢見たもの
• 7-3. React の誕生
• 7-4. React を読み解く6つのキーワード
• 7-5. 他のフレームワークとの比較

第8章　何はなくともコンポーネント

• 8-1. コンポーネントのメンタルモデル
• 8-2. コンポーネントと Props
• 8-3. クラスコンポーネントで学ぶ State
• 8-4. コンポーネントのライフサイクル
• 8-5. Presentational Component と Container Component

第9章　Hooks、関数コンポーネントの合体強化パーツ

• 9-1. Hooks に至るまでの物語
• 9-2. Hooks で State を扱う
• 9-3. Hooks で副作用を扱う
• 9-4. Hooks におけるメモ化を理解する
• 9-5. Custom Hook でロジックを分離・再利用する

【第三部 目次】

第10章　React におけるルーティング

• 10-1. SPA におけるルーティングとは
• 10-2. ルーティングライブラリの選定
• 10-3. React Router（5 系）のAPI
• 10-4. React Router をアプリケーションで使う
• 10-5. React Router バージョン 5 から 6 への移行

第11章　Redux でグローバルな状態を扱う

• 11-1. Redux の歴史
• 11-2. Redux の使い方
• 11-3. Redux 公式スタイルガイド
• 11-4. Redux Toolkit を使って楽をしよう
• 11-5. Redux と useReducer

第12章　React は非同期処理とどう戦ってきたか

• 12-1. 過ぎ去りし Redux ミドルウェアの時代
• 12-2. Effect Hook で非同期処理
• 12-3. 「Redux 不要論」を検証する

第13章　Suspense でデータ取得の宣言的UIを実現する

• 13-1. Suspense とは何か
• 13-2. “Suspense Ready”なデータ取得ライブラリ
• 13-3. Suspense の優位性と Concurrent Mode
• 13-4. Suspense とConcurrent Mode が革新するUX

© 2021 Yuka O'oka ／ くるみ割り書房

riakuto-startingreact-ja3.1's Issues

TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 210120版

p71
https://p9rettier.io/playground/
↓
https://prettier.io/playground/

p74
"scripts": {
︙
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",

• "fix": "npm run -s format && npm run -s lint:fix",
• "format": "prettier --write --loglevel=warn 'src//*.{js,jsx,ts,tsx,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"
  },

"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
が２行ある。

p118
人で、アリババやテンセントといった**での採用事例が多いことによる組織標的な色合いが強い
↓
人で、アリババやテンセントといった**での採用事例が多いことによる組織票的な色合いが強い

p140
リスト 25: src/App.tsx
7行目
Component<unknown, State>
とあるが、

p141の説明文では
「クラス宣言で Component クラスを拡張するときに 2 つめの型引数で渡されてますね。
props のときと違って、 Component<unknown, AppState> と型引数が 2 つあります」
となっている。

意味があるのか、誤植なのかよくわからない
p141の説明文が
Component<unknown, AppState>
となっているのは誤りで
↓
Component<unknown, State>
が正しいのではないか？

それとも誤植でないのならAppStateとは何なのか？

Windowsでコードを見る場合
VSCodeで見ると
改行がCRコードだとエラーが出る。
Windowsの場合（CR+LF）なので
改行コードをLFに修正すると消える。

もしくは
.prettierrcファイルに
"endOfLine":"auto"
と設定すれば消える。

サンプルコードで `yarn install` に失敗する

問題

サンプルコードを動作させるために yarn install を実行すると､以下の通り失敗する｡

$ yarn install
yarn install v1.22.17
$ typesync || :
»  TypeSync v0.8.0
✔  No new typings added, looks like you're all synced up!
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0". Got "14.4.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

回避策

私の手元では以下の通り回避しました｡

• noenv install 14.19.0 で 14.x 系の最新 ( 当時 ) のバージョンをインストールする｡
• サンプルコードのディレクトリ配下で nodenv local 14.19.0 のようにコマンドを実行して､使用する Node.js バージョンを変更する｡

補足

書籍 (Ⅰ. 言語・環境編 ) には､

Node では JavaScript の挙動がバージョン 14.4 以前と 14.5 以降では異なるところがあって、最初 に学ぶ段階では以前の挙動のほうがわかりやすいと思う。だから今回は最新版をインストールする ときでもそれに加えて 14.4.0 もインストールしておいてね

と記載があることから､サンプルコードは 14.4.0 で動作させる前提であるように見受けられる｡
もし､サンプルコードを実行する Node.js バージョンを変更するのであれば上記の記述も合わせて見直すなどしたほうがよさそう｡