Reactコンポーネントの命名規則｜小文字で書いて動かなかった話

:::note ※Reactの命名で迷っている人向けの「判断用」記事です :::

結論（私の判断基準）

• コンポーネント名は PascalCase 必須。小文字だと動かない
• ファイル名は PascalCase。kebab-caseでも動くが、私はPascalCase派
• props・state は camelCase。booleanは is/has/can プレフィックス

🚀 一括変換 → Case Converter

---

私がやらかした話

やらかし1：小文字でコンポーネントを書いた

// ❌ やった失敗
function userProfile() {
  return <div>...</div>;
}

// 使おうとした
<userProfile />

動かなかった。正確には、HTML要素として扱われて、何も表示されなかった。

Reactはコンポーネントを大文字始まりかどうかで判定する。小文字だと <div> や <span> と同じ扱いになる。

PascalCaseは「好み」ではなく「必須」。

やらかし2：ファイル名の流派で揉めた

チームで「ファイル名は kebab-case にしよう」と決まった。

user-profile.tsx
button.tsx

でも import するときに違和感があった。

import UserProfile from './user-profile';

コンポーネント名は PascalCase なのに、ファイル名は kebab-case。気持ち悪い。

結局、私のチームでは PascalCase に統一した。

ファイル名はチームで統一されていれば、どっちでもいい。でも私は PascalCase 派。

---

コンポーネント名は PascalCase 必須

// ✅ Reactコンポーネントとして認識
<UserProfile />

// ❌ HTML要素として認識
<userProfile />

これは React の仕様。好みの問題ではない。

---

ファイル名の流派

PascalCase（私の選択）

UserProfile.tsx
Button.tsx
HeaderNavigation.tsx

コンポーネント名とファイル名が一致して分かりやすい。

kebab-case

user-profile.tsx
button.tsx
header-navigation.tsx

OSの大文字小文字の扱いを気にしなくていい。GitでWindowsとMacが混在するチームでは安全。

どっちでもいいが、私は PascalCase。

---

props の命名（私のルール）

イベントハンドラ

// on + 動詞
onClick
onChange
onSubmit
onUserSelect

boolean

// is / has / can で始める
isLoading
isDisabled
hasError
canEdit

boolean は is/has/can 必須。これがないと、何が boolean か分からない。

---

state の命名（私のルール）

const [user, setUser] = useState(null);
const [items, setItems] = useState([]);
const [isOpen, setIsOpen] = useState(false);

setter は set + state名（PascalCase）。これは React のお作法。

---

迷ったときの判断

迷い	私の判断
コンポーネント名	PascalCase 必須
ファイル名	PascalCase（チームで統一されていれば何でもOK）
boolean の props	is/has/can プレフィックス必須

---

この記事で解決しない場合

• CSSの命名を知りたい → CSSクラス名の命名規則とBEM
• 命名規則の全体像を知りたい → 命名規則の使い分け

---

Reactのコンポーネント名は PascalCase 必須。小文字で書くと動かない。これは好みではなく仕様。