私流Reactコンポーネントの作り方

はじめまして。
Advent Calenderのお祭り感に便乗して初めてQiitaに記事を投稿します。
普段は主にフロントエンドエンジニアとして働いています。

今日はReactでコンポーネントを作る際の手順や気を付けていることについて、思いつく限り書きます。

環境

• React
• TypeScript（稀にJavaScript）
• ESLint、Prettier
• フレームワーク
  • 今のプロジェクトではNext.js
• スタイリング方法
  • 今のプロジェクトではCSS Modules（Next.js にビルトインされている）
• コンポーネントライブラリ
  • 今のプロジェクトではAntDesign
• フォルダ構成
  • ベースはAtomic Design
  • 今のプロジェクトでは
    • PagesとTemplatesはNext.jsの機能によせている
    • MoleculesとOrganismsは区別が難しいのでまとめてPartsとしている

手順

1. 設計書やデザインカンプを眺める
   共通化を意識して対象の画面以外もざっくり眺めます。

2. コンポーネントを切り分ける
   デザインカンプの作成時点でデザイナーさんが切り分けてくれている場合もあります。

3. 並べ方を考える ←重要！
   レスポンシブを意識し、画面幅や文字数などの可変の要素に影響されないようなアルゴリズムを考えます。
   例

   • 特定の領域の上下左右の端や中心に配置する
     • 左右にそれぞれ配置したいときはspace-betweenを使いがち
     • 中心に配置したいときはflex:1を使いがち
   • marginやpadding以外には固定値をなるべく使わない
     • ちなみにmarginとpaddingの使い分けイメージ
       • marginはバラン：子要素同士が間隔をあけて並ぶ
       • paddingはお弁当箱：親要素が子要素の侵入を防ぐ

4. 置き場を用意する
   プロジェクトのディレクトリ構成に準拠してファイルや空のコンポーネントを用意します。
   ファイル名やコンポーネント名はPascalCaseにするのが一般的です。

5. JSXのタグまたはUIライブラリのコンポーネントを並べる
   3で考えたとおりに並べます。

6. スタイルを整える ←難しい！
   プロジェクトで決まっているスタイリング方法でスタイルを整えます。
   importantやstyle属性などの優先度の強い手段はなるべく最後までとっておくとよいです。
   また、コンポーネントライブラリが想定している範囲外のカスタマイズは難易度が高いです。ブラウザの開発者ツールを使用してデフォルトのスタイルを確認しながら地道に上書きしていくことになります。事前にデザイナーさんと使用するコンポーネントライブラリについて認識合わせができると理想的です。

7. ロジック、Stateを考える
   ロジックについては今回は割愛します。
   値はReactの公式ドキュメントに示されているプロセスに従って、なるべくStateで保持します。
   状態管理ライブラリやContextは便利な反面、きちんと使い所を押さえて設計しないと収拾がつかなくなります。

8. Propsを考える
   こちらもReactの公式ドキュメントに従っておけば間違いないです。
   加えて、以下も意識しています。

   • 同じオブジェクトやAPIが出処の値は今のところ使っていなくても持ち続ける
   • 共通化できない部分はフラグで分岐せずに関数で受け取る
   • 内部で呼び出している子コンポーネントのPropsはまるまる受け取る

9. APIを呼び出す
   プロジェクトの方針に従ってAPIを呼び出します。
   今のプロジェクトでは省力化コンポーネントを使用しています。