component-naming

コンポーネントの命名規則スキル

このスキルは、コードベース全体で一貫した React コンポーネントの命名規則を徹底するのに役立ちます。

このスキルを使用する場面

• 新しい React コンポーネントを作成するとき
• PR でコンポーネント名をレビューするとき
• 既存のコンポーネントをリファクタリングするとき
• コードベースの一貫性を確保するとき

命名規則

1. パスカルケース

すべての React コンポーネントにはパスカルケースを使用します。

// ✅ Good
export const TrendChart = () => {};
export const HeroPost = () => {};

// ❌ Bad
export const trendChart = () => {};
export const trend_chart = () => {};

2. ドメイン + 役割のパターン

ドメインのコンテキストとコンポーネントの役割を組み合わせて、明確にします。

// ✅ Good - Clear domain and role
export const TrendChart = () => {};       // Trend (domain) + Chart (role)
export const HeroPost = () => {};         // Hero (domain) + Post (role)
export const MetricCard = () => {};       // Metric (domain) + Card (role)
export const LatestCoePremium = () => {}; // LatestCoe (domain) + Premium (role)

// ❌ Bad - Too generic or unclear
export const Chart = () => {};            // No domain context
export const Data = () => {};             // Meaningless
export const Item = () => {};             // No specificity

3. サブパーツには複合コンポーネントを使用する

関連するサブコンポーネントにはドット記法を使用します。

// ✅ Good - Compound component pattern
export const HeroPost = () => {};
HeroPost.Image = () => {};
HeroPost.Title = () => {};
HeroPost.Meta = () => {};

// Usage
<HeroPost>
  <HeroPost.Image src={...} />
  <HeroPost.Title>...</HeroPost.Title>
  <HeroPost.Meta date={...} />
</HeroPost>

// ❌ Bad - Flat naming for related components
export const HeroPostImage = () => {};
export const HeroPostTitle = () => {};
export const HeroPostMeta = () => {};

4. 問題のある接尾辞を避ける

以下の接尾辞は使用しないでください。

// ❌ Avoid these suffixes
export const MetricCardContainer = () => {};  // -Container
export const ChartWrapper = () => {};         // -Wrapper
export const DataComponent = () => {};        // -Component
export const ListElement = () => {};          // -Element

// ✅ Use clear domain + role instead
export const MetricCard = () => {};
export const TrendChart = () => {};
export const RegistrationList = () => {};

5. レイアウトやスタイルの説明を避ける

名前では見た目ではなく、目的を表すようにします。

// ❌ Bad - Describes layout/styling
export const LeftSidebar = () => {};
export const BigHeader = () => {};
export const RedButton = () => {};
export const TwoColumnLayout = () => {};

// ✅ Good - Describes purpose
export const NavigationSidebar = () => {};
export const PageHeader = () => {};
export const DangerButton = () => {};
export const ComparisonLayout = () => {};

ファイルの命名規則

ファイル名には、コンポーネント名に対応するケバブケースを使用します。

コンポーネント	ファイル名
TrendChart	trend-chart.tsx
HeroPost	hero-post.tsx
MetricCard	metric-card.tsx
LatestCoePremium	latest-coe-premium.tsx

検証チェックリスト

コンポーネント名をレビューするときは、次の点を確認します。

• パスカルケースを使用している
• 明確なドメインのコンテキストがある（「Card」「List」「Item」だけではない）
• 明確な役割がある（Chart、Card、List、Banner など）
• -Container、-Wrapper、-Component の接尾辞がない
• レイアウトやスタイルの説明がない（Left、Big、Red、TwoColumn）
• ファイル名がケバブケースでコンポーネント名と一致している
• 関連するサブコンポーネントに複合パターンを使用している

コードベースの例

望ましいパターン：

• TrendAreaChart - Trends ドメイン + Area Chart の役割
• MarketShareDonut - Market Share ドメイン + Donut の役割
• TopMakesChart - Top Makes ドメイン + Chart の役割
• PremiumBanner - Premium ドメイン + Banner の役割
• MetricCard - Metric ドメイン + Card の役割
• LatestCoePremium - Latest COE ドメイン + Premium の役割

避けるべきアンチパターン：

• 汎用的な名前：Chart、Card、List、Data
• レイアウト名：LeftPanel、MainContent、TopSection
• 接尾辞の乱用：CardContainer、ListWrapper、ItemComponent

関連ファイル

• apps/web/AGENTS.md - Web アプリのコンポーネント規則
• apps/web/src/components/ - Web アプリのコンポーネント
• apps/web/src/app/admin/components/ - 管理インターフェースのコンポーネント