Reactコンポーネント命名規則：ファイル、Props、Hooks

ReactにはJSX自体によって強制される強力な命名規則があります — コンポーネントは大文字で始めなければなりません。

コンポーネント：PascalCase

すべてのReactコンポーネントはPascalCaseを使います：UserProfile、ShoppingCart、NavBar。これは必須です — JSXは小文字のタグをHTML要素として扱うためです。

Props：camelCase

PropsはcamelCaseを使います：userName、isLoading、onSubmit、maxRetries。

Hooks：use + PascalCase

カスタムHooksはuseで始めます：useAuth、useFetch、useLocalStorage。

イベントハンドラー

Props：on + イベント（onClick、onSubmit）。ハンドラー関数：handle + イベント（handleClick、handleSubmit）。

ファイル名

種類	規則	例
コンポーネント	PascalCase	UserProfile.tsx
Hook	camelCase	useAuth.ts
ユーティリティ	camelCase	formatDate.ts
スタイル	PascalCase	UserProfile.module.css
テスト	ソースに合わせる	UserProfile.test.tsx

名前を変換

コンポーネントにはPascalCaseコンバーター、PropsにはcamelCase、またはハブを使いましょう。