「Reactのコンポーネント名、適当に決めてないか？」
もし君がまだ「なんとなく動くから」という理由で、小文字でコンポーネントを定義したり、命名に一貫性を持たせていないなら、今日でその癖を直そう。なぜなら、Reactの命名規則は単なる「お作法」ではなく、Reactの心臓部である「仮想DOMとレンダリングの仕組み」に直結する重要なルールだからだ。
今日は、なぜReactでは`PascalCase`が必須なのか、その裏側にあるブラウザの事情と、現場で「こいつ、できるな」と思われるための設計思想について話していく。
—
なぜReactは `PascalCase` を強制するのか？
結論から言おう。Reactは「小文字で始まるタグはHTML標準要素、大文字で始まるものはコンポーネント」と区別している。これには歴史的な経緯と、JSXの構文解析の都合が深く関わっている。
JSXのコンパイルの裏側を覗く
JSXは最終的に `React.createElement()` （あるいは新しいJSX Transform）に変換される。ここで、ReactのコンパイラであるBabelやSWCがどうコードを読み解いているか想像してほしい。
// あなたが書いたJSX
コンパイラはこれをこう変換する。
// コンパイル後のイメージ
React.createElement(“div”, null); // 第1引数が文字列なら、これはHTML要素
React.createElement(MyComponent, null); // 第1引数が識別子なら、これはReactコンポーネント
もし君が `
—
現場で差がつくコンポーネント命名の流儀
実務において「名前」はドキュメントそのものだ。読みやすさと検索性を両立させるための、現場レベルのプラクティスを共有する。
1. 意味のある名前を付け、略語を避ける
`Btn` ではなく `PrimaryButton` 、 `Dtl` ではなく `UserDetail` と書こう。IDEのオートコンプリートで名前を探すとき、略語は最大の敵になる。
2. ファイル名とコンポーネント名を一致させる
これは鉄則だ。`components/UserProfile.tsx` に書くコンポーネントは、必ず `export const UserProfile = …` であるべきだ。ディレクトリ名で名前空間を管理する場合も、`index.tsx` 内で定義するコンポーネントには明示的に名前を与えよう。
// 良い例: 明示的な命名
export const UserProfile = () => {
return
;
};
// 悪い例: default exportで匿名関数を使うと、DevToolsでデバッグしにくい
export default () => { … } // 修正: export default function UserProfile() { … }
3. 接頭辞（Prefix）で役割を可視化する
大規模なプロジェクトでは、コンポーネントの「役割」を名前に混ぜるのが有効だ。
- `Base`: 再利用可能なUIパーツ（Button, Input）
- `Layout`: ページ構成要素（Header, Sidebar）
- `Feature`: 特定機能（AuthForm, UserTable）
—
実践サンプル：クリーンな命名と構造
そのままエディタにコピペして、構造の美しさを確認してほしい。
/
- UIコンポーネントの命名サンプル
- PascalCaseを徹底し、役割を明確に分ける設計
/
// 1. 再利用可能な最小単位（Base）
export const BaseButton = ({ label, onClick }: { label: string; onClick: () => void }) => {
return ;
};
// 2. 機能を持つコンポーネント（Feature）
// コンポーネント名はPascalCase、内部の変数はcamelCaseで統一
export const UserProfileCard = ({ name, role }: { name: string; role: string }) => {
const isAdministrator = role === ‘admin’;
return (
{name}
権限: {isAdministrator ? ‘管理者’ : ‘一般ユーザー’}
);
};
—
最後に：コードは「対話」である
命名規則を守ることは、単なるルールの遵守ではない。「次にこのコードを触る人（未来の自分を含む）」に対する誠意だ。
Reactの仮想DOMがどう動こうと、コンポーネント名がPascalCaseであるという「記号」さえ守られていれば、Reactは君の意図を正確に読み取り、高速にレンダリングしてくれる。
技術的な制約を理解した上で、誰が読んでも迷わない、綺麗な名前を付けていこう。そうすれば、チームの生産性は驚くほど向上するはずだ。明日からのコーディングで、ぜひ意識してみてほしい。
コメント