Reactコンポーネントファイルの命名規則について・決定版

TL;DR

Reactのコンポーネントファイル（.tsx）の命名は 使っているUIライブラリに合わせるのが最適解。

• shadcn/ui → kebab-case
• Material UI → UpperCamelCase
  ルールを増やすより、ライブラリに揃える方がチーム開発ではシンプルで楽。

---

命名規則の考え方

最近、プロジェクトでReactコンポーネントファイル（.tsx）の命名規則をどうするかを改めて考えた。

---

.ts と .tsx の違い

• .ts → 通常のTypeScriptファイル（ロジック・ユーティリティ・型定義など）。
• .tsx → React専用ファイル。コンパイルも異なるし、中身もコンポーネント中心。ユニットテストを書かないケースも多い。

つまり .tsx は「特別扱い」しても良い。

---

.tsx ファイルの命名スタイル候補

一般的に選択肢は2つ：

1. UpperCamelCase (PascalCase)

   • Button.tsx
   • UserCard.tsx

2. kebab-case

   • button.tsx
   • user-card.tsx

正直どちらも「好みの問題」で、チーム開発だと揉めやすい。

---

新しい考え方：UIライブラリに合わせる

• shadcn/ui → 生成されるコンポーネントファイルは kebab-case。
• Material UI → 内部的には UpperCamelCase。

→ なので、使っているUIライブラリの命名規則に合わせるのが一番シンプル。
これなら議論が減り、統一感も自然に出る。

---

余談：自作コンポーネントの区別

逆に、UIライブラリで使われていない命名規則を「自作コンポーネント専用」にすれば区別もつく。

例:

• UIライブラリが kebab-case（shadcn/uiの場合）
  → 自作は UpperCamelCase
• UIライブラリが UpperCamelCase（Material UIの場合）
  → 自作は kebab-case

ただし、ルールが複雑になると面倒なので、結局はライブラリに揃えるのが一番楽。

---

結論

• .ts と .tsx は分けて考える。
• .tsx の命名規則は「UIライブラリに寄せる」。
• 余計なルールを足すより、シンプルに統一する方がチーム開発では楽。

---

👉 個人的には 「UIライブラリに合わせる」一択で落ち着きそう。