【技術書まとめ】りあクト！ TypeScriptで始めるつらくないReact開発

普段は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、などの解説が丁寧なのに加えて、それらが開発された背景や変遷なども詳細に説明してくれるので、機能の理解だけでなく「腑に落ちる」という気持ちにさせてくれた。

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

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