React勉強
まきのらくらくデバック
VSCode
VS Codeの拡張機能「Debugger for Chrome」をインストール
※現在はデフォルトでインストールされている
Chrome
Chromeの拡張機能「React Developer Tools」をインストール
まきのコンポーネントのスタイル戦略
CSS Modules
使用例
/* style.css */
.common {
font-size: 10px;
}
.normal {
composes: common;
color: green;
}
import styles from "./style.css";
const MyAwesomeComponent = () => (
<div className={styles.normal}>Awesome!</div>
);
ブラウザ上ではこのように認識される。
クラス名はは<ファイル名>-<クラス名>__<ハッシュ> というフォーマットで自動生成される。
<div class="style-normal__227xg">Awesome!</div>
CSS in JS ライブラリ
外部ファイルでスタイルを定義するのではなく、JavaScript を用いて CSS を記述するアプローチ
私は使用したことがないが調べた限りだと「styled-components 」「emotion」が良く使われている。
参考記事
まきのスタイルガイドを作る
なぜ必要なのか？
デザイナーだけでなくフロントエンドエンジニアの双方がデザインを行うようなってきている。
そのため、基準となるものを作成する必要があるため。
フロントエンドエンジニアがデザインをする必要が出てきたのか
- スマートフォンのネイティブアプリの普及により、Web アプリも同様に高度なUI・UX を
求められるようになる。 - その要求に応えるためにJavaScript によるSPA が登場、さらにその開発における複雑さを
解決するためにコンポーネント指向が導入されていった。 - ロジックと見た目が融合したコンポーネントは、フロントエンドエンジニアにしか手を出
せない。 - デザイナーはもっぱら見た目だけを厳密に定義する本来の役割に戻り、CSS はフロントエ
ンドエンジニアの領分になる。
Storybook を使おう
基本的には公式ドキュメントに記載されている。
トラブルなどが起きた際は以下の方法で解決する。
GitHub Issue やMedium の記事やStack Overflow とかに行き当たることがあるので、それ
らを読み込んで解決策を試してみる。
公式サイト
まきのユニットテストを書く
Storybookを使う
Storybook のプラグインに StoryShots がある。
Storybook にストーリー登録したコンポーネントのスナップショット テストを自動的にやってくれる。
スナップショットテストってなんだ？
『スナップショットテスト』とは、既存の UI のスナップショットを DOM テキストや画像ファイルで取得しておいて、比較して変更があった場合にアラートを上げてく れるもののこと
Jest で API ハンドラをテストする
準備
Jest
プロジェクト作成時にすでに「Jest」の環境が用意されている。
axios
非同期通信用に「axios」を使用するのでライブラリ「axios-mock-adapter」をインストールする
yarn add -D axios-mock-adapter
Storybook
yarn add -D @storybook/addon-storyshots @types/storybook__addon-storyshots react-test-renderer yarn add -D require-context.macro babel-plugin-macros babel-loader
テストの考え方
Ruby では TDD、テスト駆動開発が推奨されている。
javascriptの場合はあまりTDDなどは行われていないらしい
※デバッガを活用して逐次動作を確認しながら作り、その後に必要最低限のテストを書く方が流行っているようだ。
まきのE2Eテストを自動化する
Web フロントエンドにおいて E2E テストの主な選択肢
1.Puppeteer(１番人気)
2.Cypress
3.TestCafe
まきのプロフェッショナル React の流儀
Advanced Thinking in React
○React設計ステップ
- ページをコンポーネントの階層構造に落とし込み、併せて各コンポーネントの Props を決 定する
- どのコンポーネントを Container にするかを決め、その Local State および connect する Props を決定する
- ページを構成する主要なコンポーネントを、スタイルガイドとして Storybook に登録する
- Container が発行する Action と発行に使う Action Creator を作成、それに対応する Reducer
も併せて作る - その Action が必要とする API ハンドラを作成、ユニットテストも併せて書く
- 4 と 5 による Saga を作成、ユニットテストも併せて書く
- Container Component を作成する
- 正常系の E2E テストを作成する
Store のスケーリング戦略
○Store
Reduxではアプリケーション全体で共有するデータを保管する場所が必要になります。その場所はstoreと
呼ばれ、アプリケーションを構成するコンポーネントとは全く独立した場所に作成します。storeの中に共
有を行うデータstateが保存されます。