Reactでプロダクト作る時に心がけていること
React + TypeScriptで複数人がプロダクトを作るときに覚書のために記しておく
(技術用語等間違っている箇所がありましたらご指摘お願いします。)
.tsxファイルに見た目の関心事以外のロジックが混入していないか
.tsxファイルで見た目に関するコード以外のロジックが混入していると全体的なコードの可読性が低下する。
例えばボタンをクリックしたらAPIを叩いて非同期処理を走らせるとして、その処理を全部載せでReactのコンポーネント側に書くみたいなこととか。
なのでちゃんとカスタムフックを書くこと。一にも二にもまずはこれが大事。
ちゃんと隠せるものは隠そう。
例えばFirebaseでGoogle認証を使いたい時、コンポーネント側に直接書くのではなく
カスタムフックとして定義して後は呼び出すだけにしておく。
これによって
1.コード量が単純に減る
2.再利用ができる状態になる(カスタムフックの真髄)
3.View側がReact以外との技術上の直接的依存関係を減らせる
export const useSignInWithGoogle = () => {
const { google } = authProvider
const signInWithGoogle = () => {
auth.signInWithRedirect(google)
}
return {
signInWithGoogle,
}
}
フックにも書き方としてちゃんとルールがあるが、万が一そのルールを破られることがあってはいけないので、大人しくeslint-plugin-react-hooksを使おう。
扱いの難しいuseEffectの依存関係の設定もこれで安全に扱えるし入れておいて損なし。
カスタムフックが凝集度高く保たれているか
せっかくカスタムフックで隠蔽しても、カスタムフック本体が肥大化するとこれも中々辛い。
肥大化しないようにカスタムフックで宣言した状態変数がちゃんと同じカスタムフック内の全ての内部関数で使われているかチェックすること。
もしそうじゃない場合は定義したカスタムフックの役割が不適切なのでちゃんと分割をしよう。
.tsxの単一ファイルあたりのコード行が200~250行以上になってないか
人間の認知できる範囲には限界があるが、それはコード量にも同じことが言える。
200~250行のコード行数のReactコンポーネントファイル(CSS in JSでも)だと自分には認知の限界が来て、10秒以内での把握がしづらくなる。(個人差にもよるがとりあえず)
これがさらに増えるとコンポーネントとして設計や切り分け粒度がおかしい現象としてレビュー時とかに捉えるようにしている。コンポーネントは肥大化しないようにしよう。
StorybookとJestは最初から入れること
これはコード云々とは話がそれるが、StorybookとJestはちゃんと最初から入れた方が良い。
Jestでテストコード書く文化がない企業がいまだにあるかもしれないが、そういう状況でもビジネスロジック周りから小さく始めるでも良いので書いた方が良い。ソフトウェアの信頼性が向上する。
StorybookはデザイナーとのUIチェックできるし、これも入れておく。
Discussion