[命名規則] コンポーネント名は動詞から始めない

動詞で始めない理由

ReactコンポーネントはUIを構築する基本的な部品である。そのため、名前はコンポーネントが「何を表現するか」を直感的に伝える必要がある。動詞で始まる名前は、そのコンポーネントが何らかの処理を実行するかのような誤解を招きやすいため、原則として名詞または名詞句を用いることを推奨する（ただし、特定の場合には例外もある）。

動詞で始めると起こる問題

動詞で始まるコンポーネント名は、以下のような問題を引き起こす恐れがある。

FetchUserDataという名前のコンポーネントは、データを取得する処理と誤認されやすく、実際の役割（UI表示）が伝わりづらい
GetUserCard や DisplayProfile のように、動詞と名詞が混在すると、どのコンポーネントがUIを表示するのかロジックを担当するのかが曖昧になり可読性を損なう
- このような不統一はコード全体の可読性を損ない、結果としてメンテナンス性の低下を招きかねない

避けるべき例

以下は、動詞で始まる命名が避けるべき理由を示す例である。FetchUserData という名前は、データ取得の処理を行う関数のように受け取られそうだが、実際はUIコンポーネントである。役割が不明瞭になっている。

export const FetchUserData = () => {
  return (
    <div>
      <h1>Fetch User Data</h1>
      {/* ユーザーデータの取得 */}
    </div>
  );
};

既存のフレームワークやライブラリの命名規則

React公式ドキュメントや著名なUIライブラリ（MUI、Chakra UI）では、コンポーネント名は一貫して名詞または名詞句で命名されている。それぞれのライブラリでは Button、Card、Dialog といった名前が使われており、各コンポーネントが何を表示するのかが直感的に理解しやすい。

著名なUIライブラリでも名詞を使った命名で統一されていることから、動詞で始める命名は避けるべきだと言えるだろう。より統一感のあるコードベースを構築するためにチーム内のコーディング規約を決める際も、こうしたベストプラクティスを参考にすることは重要だと言える。

名詞や名詞句を使う

UIコンポーネントは画面上での表示内容を担うため、その名前が何を示しているかが非常に重要である。したがって、コンポーネント名はその役割を明確に伝える名詞または名詞句で命名することを推奨する。

例外的に動詞を使う合理的なケース

通常は名詞または名詞句で命名するのが望ましいが、以下のような特定のケースでは動詞を含む命名が合理的な場合もある。

高階コンポーネント（HOC）: 例として、エラーハンドリングをラップする HandleErrorBoundary は、その動作を明示するために動詞を用いている
ユーティリティコンポーネント: 非同期処理のローディング状態を管理する WithLoading のように、特定の動作を提供する場合は動詞が適切な場合もある

これらのケースでは、コンポーネントがUIそのものではなく 「動作をラップする高階コンポーネント（HOC）」や「特定の振る舞いを提供するユーティリティコンポーネント」 の役割を持つため、動詞を使うことで意図が明確になる。

もちろん、命名規則の一貫性を維持するためであれば、動詞から始まる命名ではなくチーム内で適切にルール設定をすることの方が重要だろう。仮に動詞を利用しない場合の命名としては、ErrorBoundary や LoadingIndicator などが代替案として考えられる。

良い例

以下は、UIコンポーネントとして適切な命名例。UserProfile という名前は、そのコンポーネントがユーザープロフィールを表示する役割を明確に伝えており、読み手にとって分かりやすい命名となる。

export const UserProfile = () => {
  return (
    <div>
      <h1>User Profile</h1>
      {/* ユーザープロフィールの詳細 */}
    </div>
  );
};

この例では、UserProfileという名前が名詞「User Profile」で構成されており、コンポーネントがユーザープロフィールを表示することを明示している。