普段はRailsを使って開発しているが個人プロダクトでReactを使ってみたかったので本書を手にとった。
振り返った時に思い出せるように、簡単にまとめていく。

第１章こんにちはReact

環境構築からyarnの説明までreactの概要。

ndenvが非推奨になっていたため、nodenvを入れる。
参考にさせてもらった記事。
https://qiita.com/silmisilon/items/a2cc637eb7e59fa13f2c

第２章ナウでモダンな JavaScript

新しいJSの構文紹介。

varは使わない
- ブロックをすり抜けるから不要なバグを生む

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

非同期通信がほとんどなJSでは状態変化に人間の脳がついていけない。だから関数型が適する。関数型プログラミングの概要。

第４章型のあるTypeScriptは強い味方

TypeScriptの概要。

ストリングリテラル型（文字列リテラル型）
- let pet: 'cat' | 'dog' | 'rabbit' = 'dog';
- enumようにも使える
constは再代入できないが要素の上書きや追加はできてしまう
- そのためReadonlyArray<string>がある

第５章拡張記法JSX

JSXの実際の使い方。ifやコメントなど。

第６章 LintとPrettierでコードをクリーンに

セッティング関連の紹介
- https://github.com/oukayuka/ReactBeginnersBook-2.0/tree/master/06-lint/03-mysetting

・ eslint 
・ eslint-config-airbnb
・ eslint-config-prettier
・ eslint-plugin-import
・ eslint-plugin-jest
・ eslint-plugin-jsx-a11y
・ eslint-plugin-prettier
・ eslint-plugin-react
・ eslint-plugin-react-hooks
・ @typescript-eslint/eslint-plugin
・ @typescript-eslint/parser
・ stylelint
・ stylelint-config-prettier
・ stylelint-config-standard
・ stylelint-order
・ prettier

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

Reactの基本思想
- 仮想DOM
- コンポーネント指向
- 単方向データフロー
LocalStateのthisの違い
- アロー関数にすると実行時オブジェクトとなる
e: SyntheticEventという引数
- e.preventDefault();で元々の挙動を抑えられる
updateされるのは２つの場合のみ
- Propsの変更
- LocalStateの変更
コンポーネントのライフサイクル
- componentDidMount()
- shouldComponentUpdate()
- componentDidUpdate()
- componentWillUnmount()
- バージョン16.3から17にかけて大きく変更
クラスコンポーネントよりも関数コンポーネントで書く
- クラス内のthisの挙動が難解
- ライフサイクルメソッドの挙動が複雑
- 導入予定の各種最適化のため
コンポーネントとコンテナ
- 見た目のコンポーネント
- 機能のコンテナ

第８章 Hooksで関数コンポーネントを強化する

Hooksでのライフサイクル相当のもの

useEffect(() => {
  doSomething();

  return clearSomething();
}, [watchVar]);

HooksのAPIで重要なもの
- useState
- useEffect

第９章ルーティングでURLを制御する

SPAでは原則的にサーバーへリクエストが飛ぶことはない
React Router ではルーティング遷移時にスクロール位置が変わらない
- componentDidMount() に window.scrollTo(0, 0) を仕込んだコンポーネントを作る
- DOM ツリーの上のほうでマウントさせる

第１０章 Reduxでアプリの状態を管理する

MVCはインタラクティブなフロントエンドには適さない
- データの方向を単方向にしたい
  - Fluxパターン
Reduxの三つの原則
- Single source of truth （信頼できる唯一の情報源）
- State is read-only （状態は読み取り専用）
- Changes are mode with pure functions （変数は純粋関数で行なわれる）
  - Reducer
    - (prevState, action) => newState
    - Actionが同じなら新旧の差分も同じという保証
Reduxは導入すべきか
- コンポーネントをまたいでデータを共有しない業務アプリはない
- 一度導入すれば以降はStore Stateで管理できる
- 初めからReduxに任せるべき
- 背景や思想を知る
Flux Standard Action
- 適宜使う

第１１章 Reduxで非同期処理を扱う

非同期通信するための方法について

Redux Thunk
- Action CreatorにAPI連携を書く
- 「理解しやすく導入しやすいけど、放っておくとどこまでもコードが汚くなる」
Redux-Saga
- 開始・成功・失敗を定義する
- 「綺麗に書けるけど、学習コストが高くてコード量も増える」

読後まとめ

とてもいい本だった。React、Hooks、Redux、などの解説が丁寧なのに加えて、それらが開発された背景や変遷なども詳細に説明してくれるので、機能の理解だけでなく「腑に落ちる」という気持ちにさせてくれた。

商業ベースの本ではここまで突っ込んだ内容にできないだろうし、やはりフロントエンド界隈のような鮮度の高い情報を必要とする世界ではこういった形態の書籍がこれからも有用になってくるのかなと思った。

ぜひ著者の次の本も読みたい。