Zenn
👀

目には目を、汎用的なコンポーネントには汎用的な命名を

2024/08/09に公開
React
frontend
component
tech

はじめに

ことわざの使い方おかしいぞという指摘には目をつぶりまして、

最近のフロントエンドでは features ディレクトリを採用しているプロジェクトが増えていると思います
そこでは features ディレクトリと components ディレクトリが分かれ
ある特定の機能やドメインに関するコンポーネントやロジックは features ディレクトリに配置し、
汎用的なコンポーネントは components ディレクトリに配置するという構成が一般的です

├─ app/
│  ├─ features/
│  │  ├─ tasks/
│  └─ components/
│     ├─ Button/

どのコンポーネントが汎用的かを考え、適切なディレクトリに配置することは多くの方が意識しているかと思います
しかし、そのコンポーネントの命名の汎用性についてはあまり意識されていないかもしれません

私は今まで意識できておらず、レビューで指摘されたことがきっかけで気がつきました
同じような方はこの記事が参考になれば幸いです

本題

進捗度を表示するコンポーネントを作成するとします
例は React を使用しています

悪い例: components ディレクトリ内だがドメイン用語を含む場合

この「ProgressBar」コンポーネントは、一見汎用的なコンポーネントのように見えますが、
props にドメイン用語（completedTasks, totalTasks）を含んでおり、名前の汎用性が低いです
このままでは components ディレクトリに配置するには適していません。

components/ProgressBar.tsx
export const ProgressBar = ({ completedTasks, totalTasks }) => {
  const progress = (completedTasks / totalTasks) * 100;
  return (
    <div>
      <p>{progress}%</p>
      <div style={{ width: `${progress}%` }} />
    </div>
  );
};

良い例: 汎用的なコンポーネント

props 名も汎用的なもの（value, maxValue）にすることで、さまざまな用途で使用できるようになります

components/ProgressBar.tsx
const ProgressBar = ({ value, maxValue }) => {
  const progress = (value / maxValue) * 100;
  return (
    <div>
      <p>{progress}%</p>
      <div style={{ width: `${progress}%` }} />
    </div>
  );
};

汎用的な命名のメリット

  • コンポーネントの再利用性が高まる
  • コンポーネントの理解が容易になる
  • ドメイン用語の変更に強くなる

まとめ

ディレクトリ構成で汎用と特化を分けるだけでなく、命名にも汎用性を意識しましょうという話でした
これはコンポーネントだけでなく、関数や変数なども同様だと考えます
汎用的な名前ってどんなものだ？と困ったら Material-UI などの UI ライブラリを参考にするといいかもしれません

最後まで読んでいただきありがとうございました！
これからもちょくちょく記事を書いていきます
ぜひ Twitter で繋がっていただけると嬉しいです
https://twitter.com/imoken__777

Discussion