ネーミング規則

12.4.1. ルート name 規則

• ルート name は PascalCase で記述します。
• ドメインエンティティを基に命名します。画面タイプをサフィックスとして結合して一意性を確保します。
• ネストされたルートの子ルートは親ドメインをプレフィックスとして含みます。

画面タイプ	ネーミングパターン	例
一覧	{ドメイン}List	UserList, ProjectList
詳細	{ドメイン}Detail	UserDetail, ProjectDetail
作成	{ドメイン}Create	UserCreate, ProjectCreate
編集	{ドメイン}Edit	UserEdit, ProjectEdit
設定サブ	{親}{項目}	SettingsProfile, SettingsSecurity

// 正しい例
{ name: 'UserList' }
{ name: 'UserDetail' }
{ name: 'SettingsProfile' }

// 誤った例
{ name: 'user-list' }      // kebab-case 使用禁止
{ name: 'userList' }        // camelCase 使用禁止
{ name: 'Users' }           // 画面タイプの欠落

---

12.4.2. path 規則

• ルート path は kebab-case で記述します。
• リソースパスは 複数形 を使用します。
• RESTful パターンを準拠し、動詞の代わりに名詞を使用します。
• 動的セグメントは :パラメータ名 形式で定義します。

用途	path パターン	例
一覧取得	/{リソース}	/users, /projects
詳細取得	/{リソース}/:id	/users/:id
作成	/{リソース}/new	/users/new
編集	/{リソース}/:id/edit	/users/:id/edit
ネストされたリソース	/{親}/:id/{子}	/projects/:id/members

// 正しい例
{ path: '/users' }
{ path: '/users/:id' }
{ path: '/users/new' }
{ path: '/project-members/:id/edit' }

// 誤った例
{ path: '/user' }            // 単数形使用禁止
{ path: '/getUsers' }        // 動詞使用禁止
{ path: '/user_list' }       // snake_case 使用禁止
{ path: '/Users' }           // PascalCase 使用禁止

---

12.4.3. パラメータおよびクエリのネーミング

• Path パラメータは camelCase で記述します。
• Query パラメータは snake_case で記述します。
• 型安全なパラメータ処理のために変換ユーティリティを使用します。

// path パラメータ: camelCase
{ path: '/users/:userId/posts/:postId' }

// query パラメータ: snake_case
// /users?page_size=20&sort_by=created_at

// src/composables/useTypedRoute.ts
import { computed } from 'vue'
import { useRoute } from 'vue-router'

export function useTypedRoute<
  TParams extends Record<string, string> = Record<string, string>,
  TQuery extends Record<string, string> = Record<string, string>,
>() {
  const route = useRoute()

  const typedParams = computed(() => route.params as unknown as TParams)
  const typedQuery = computed(() => route.query as unknown as TQuery)

  return { params: typedParams, query: typedQuery, route }
}

// 使用例
interface UserDetailParams {
  userId: string
}

const { params } = useTypedRoute<UserDetailParams>()
const userId = computed(() => Number(params.value.userId))

---

12.4.4. プログラマティックナビゲーション

• プログラマティックナビゲーションは path の代わりに name を使用します。
• name ベースのナビゲーションはパス変更の影響を受けないため、メンテナンスに有利です。
• Composition API では useRouter と useRoute composable を使用します。

import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 正しい例: name ベースのナビゲーション
router.push({ name: 'UserDetail', params: { id: userId } })
router.replace({ name: 'Login', query: { redirect: route.fullPath } })

// 誤った例: path の直接使用（使用禁止）
router.push(`/users/${userId}`)
router.push({ path: '/login', query: { redirect: route.fullPath } })

• テンプレートでも同様に name ベースで記述します。

<template>
  <!-- 正しい例 -->
  <RouterLink :to="{ name: 'UserDetail', params: { id: user.id } }">
    {{ user.name }}
  </RouterLink>

  <!-- 誤った例 -->
  <RouterLink :to="`/users/${user.id}`">
    {{ user.name }}
  </RouterLink>
</template>

項目	規則
ルート name	PascalCase、ドメイン + 画面タイプ
ルート path	kebab-case、複数形名詞、RESTful
Path パラメータ	camelCase
Query パラメータ	snake_case
ナビゲーション方式	name ベース必須、path 直接使用禁止
composable 使用	useRouter、useRoute 必須