コンポーネントネーミングおよび設計

10.2.1. ファイル名

対象	規則	例
コンポーネントファイル	PascalCase	UserProfile.vue
Composable ファイル	camelCase、use プレフィックス	useUser.ts
Store ファイル	camelCase、use プレフィックス	useUserStore.ts
ユーティリティ	camelCase	formatDate.ts
型定義	camelCase	user.ts

---

10.2.2. コンポーネントの使用

テンプレートでコンポーネントを使用する際は PascalCase を使用します。

<!-- 正しい例 -->
<UserProfile :user="currentUser" />

<!-- 誤った例 -->
<user-profile :user="currentUser" />

---

10.2.3. Props 定義

• Props は defineProps に型を明示します。
• デフォルト値が必要な場合は withDefaults を使用します。
• Props 名は camelCase で定義します。

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  items?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
  items: () => [],
})
</script>

---

10.2.4. Emits 定義

• Emits は defineEmits にイベントシグネチャを明示します。
• イベント名は camelCase を使用します。
• ペイロード型を明確に定義します。

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string]
  delete: [id: number]
  submit: [data: FormData]
}>()

function handleSubmit(data: FormData) {
  emit('submit', data)
}
</script>

---

10.2.5. スロットパターン

• デフォルトスロットはレイアウトコンポーネントに使用します。
• 名前付きスロット（Named Slot）は複合レイアウトに使用します。
• スコープ付きスロット（Scoped Slot）はデータ委譲パターンに使用します。

<!-- レイアウトコンポーネント -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header" />
    </div>
    <div class="card-body">
      <slot />
    </div>
    <div class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>