【技術書まとめ】りあクト！ TypeScript で極める現場の React 開発

読んだ動機

著者の前著を読み、とてもわかりやすかったので次は実際の開発の際に必要なCSS設計やテストなどを学ぶために手に取った。

第１章 デバッグをもっと簡単に

• Degugger for Chrome でのデバッグ方法について
• React Dev Tools について
• Redux Dev Tools について

第2章 コンポーネントのスタイル戦略

• CSS Modules の説明
  • ハイフンは使えない
  • composesはSassでの@extends
• CSS IN JS の歴史
• Emotion の説明
  • 親にJSX Pragma を使ったら子でも使う
  • フラグメントは使用不可
  • ESLint の逃げ設定

'@typescript-eslint/no-unused-vars': [ 'error', { varsIgnorePattern: '[Rr]eact' } ],

第３章 スタイルガイドを作る

• Storybook の説明

第４章 ユニットテストを書く

• テストを書く理由

  • 設計者の意図通りに機能が実現されているかの確認
  • 新規に追加した全ての処理に破綻がないかの確認
  • 既存の機能を破壊していないかの確認
  • モジュラリティの確保

• 実際にやること

  • ロジック部分のテスト
    • APIハンドラ
    • Redux-Saga
  • Storybook のスナップショットテスト
  • 正常系のE2Eテスト

• JestでAPI部分をテストする

• Redux Saga Test Plan の説明

• スナップショットテスト

  • Emotionを使っていればハッシュ値が変わるのでCSS変更もわかる
    • CSS in JS の導入理由

第５章 E2Eテストを自動化する

Cypress の使い方

第6章 プロフェッショナル React の流儀

• Reactの流儀

  1. UIをコンポーネントの階層構造に落とし込む
  2. Reactで静的なバージョンを作成する
  3. UI状態を表現する必要かつ十分なstateを決定する
  4. state をどこに配置すべきなのかを明確にする
  5. 逆方向のデータフローを追加する (Reduxを使うときは必要ない）

• 実際の手順

  • 4.まで作る
  • どれを Container にするか決める
    • 親Containerが子Containerを呼ぶのは避ける
  • Presentational Component を Storybook にスタイルガイドとして登録
  • そのContainer が発行するAction とその ActionCreator をつくる
  • Reducerをつくる
  • API通信が必要ならAPIハンドラとそのユニットテストをつくる
    • モック通信によるテスト
  • Actionに対応したSagaをつくる
  • ReduxDevToolsから生テキストのActionをDispatchして動作確認する
  • ReduxSagaTestPlan を使ってSaga とReducer のユニットテストを書く
  • 最後にContainer Component を作成する
  • 仕上げにCypress でE2Eテストを書く

• Store の構造はドメインモデル

  • ページごとだと重複値が出てきてしまうから
  • 正規化が可能なようにしておく

• セッション情報はLocal Storage に持たせる

  • Redux Persist

読了後のまとめ

前著のReactそのものの中身からさらに進んで、実際の開発現場の流れを知れたことが何よりよかった。
次作も読もうと思う。