vue-development

Vue 開発

概要

TypeScript、Composition API、ユーザー行動テストを活用したモダンな Vue 3 開発です。基本原則： TypeScript のジェネリクスを使用し（実行時検証ではなく）、モダンな API を使用し（手動の props ではなく defineModel）、ユーザーの行動をテストします（実装の詳細ではなく）。

危険信号 — 作業を止めて修正

以下のいずれかを考えたり、実行したりしていることに気づいたら、すぐに作業を止めてください。

• 「スピード優先で」／「簡単なデモだから」／「緊急だから」→ 近道を使っている
• 「あとで整理すればいい」→ よくないパターンを受け入れている
• 「TypeScript は冗長すぎる」→ 型を省略している
• 「本番環境で使える状態です」→ 型安全性がない
• 「既存のコードスタイルに合わせている」→ 既存コードがレガシーパターンを使っている場合
• 「タスクに明記されているので……」→ よくない要件に文字どおり従っている
• スクリプト内で props を使わずに const props = defineProps() を使用している
• 手動で modelValue プロパティと update:modelValue の emit を組み合わせている → defineModel() を使用する
• 「値を受け取り、変更を emit するコンポーネント」→ 手動の props／emit ではなく、defineModel() を使用する
• TypeScript が使えるのに、実行時のプロパティ検証を使用している
• emit に配列構文を使用している：defineEmits(['event']) → 型安全性が不足している
• テストで setTimeout() を使用している → 適切な非同期ユーティリティを使用する
• wrapper.vm.* の内部状態をテストしている → ユーザーに見える動作をテストする
• ルートで index.vue を使用している → ルートグループ (name).vue を使用する
• 汎用的なルートパラメーター [id] を使用している → [userId]、[postSlug] のように明示的に指定する
• Composable から showToast()、alert()、モーダルを呼び出している → エラー状態を公開し、UI はコンポーネント側で処理する
• 外部 Composable を1つのコンポーネントだけで使用している → まずインラインで実装し、再利用するときに切り出す

これらはすべて、モダンなパターンを使うべきだということです。例外はありません。

クイックルール

コンポーネント： defineProps<{ }>()（スクリプト内で使用しない限り const は不要）、defineEmits<{ event: [args] }>()、v-model には defineModel<type>() を使用します。@references/component-patterns.md を参照してください。

テスト： @testing-library/vue + MSW を使用します。非同期処理には findBy* または waitFor() を使用してください。setTimeout() の使用や内部状態のテストは絶対に避けてください。@references/testing-patterns.md を参照してください。

ルーティング： [id] ではなく [userId] のように明示的なパラメーターを使います。index.vue は避け、(name).vue を使用します。ネストには . を使います：users.edit.vue → /users/edit。@references/routing-patterns.md を参照してください。

Composable： コンポーネント固有のロジックはまずインラインで実装し、再利用するときに外部ファイルへ切り出します。外部 Composable には use を接頭辞として付け、UI ロジックは含めないでください（代わりにエラー状態を公開します）。@references/composable-patterns.md を参照してください。

重要なパターン：defineModel()

覚えておくべき最も重要なパターンです。すべての双方向バインディングで使用してください。

<script setup lang="ts">
// ✅ For simple v-model
const value = defineModel<string>({ required: true })

// ✅ For multiple v-models
const firstName = defineModel<string>('firstName')
const lastName = defineModel<string>('lastName')
</script>

<template>
  <input v-model="value" />
  
</template>

理由： 定型コードを5行から1行に減らせます。手動で modelValue プロパティと update:modelValue の emit を組み合わせる必要はありません。

コンポーネント実装のワークフロー

複雑な Vue コンポーネントを実装する際は、TodoWrite を使って進捗を管理してください。

TodoWrite checklist for component implementation:
- [ ] Define TypeScript interfaces for props/emits/models
- [ ] Implement props with defineProps<{ }>() (no const unless used in script)
- [ ] Implement emits with defineEmits<{ event: [args] }>()
- [ ] Add v-model with defineModel<type>() if needed
- [ ] Write user-behavior tests with Testing Library
- [ ] Test async behavior with findBy* queries or waitFor()
- [ ] Verify: No red flags, no setTimeout in tests, all types present

TodoWrite のタスクを作成する場面：

• 状態、v-model、テストを含む新しいコンポーネントを実装するとき
• コンポーネントをモダンなパターンにリファクタリングするとき
• 型付きパラメーターを使ったルーティングを追加するとき
• 非同期ロジックを含む Composable を作成するとき

正当化の言い訳一覧

言い訳	実態
「速さ／緊急時／時間がない」	正しいパターンでも所要時間は変わりません。TypeScript は高速です。
「TypeScript は冗長すぎる」	defineProps<{ count: number }>() のほうがコードが少なくて済みます。
「あとで整理すればよい」	最初から正しく書きましょう。
「これは本番環境で使える」	型安全性がなければ、本番環境で使える状態ではありません。
「シンプルな配列構文で問題ない」	型がないと、TypeScript なら検出できる実行時エラーが発生します。
「手動の modelValue が正しかった」	それは Vue 2 の話です。Vue 3.4 以降では defineModel() を使いましょう。
「テストが不安定なので、タイムアウトを追加する」	タイムアウトではバグを隠してしまいます。適切な非同期処理を使いましょう。
「既存のコードスタイルに従っている」	レガシーコードは存在します。改善のために最新のパターンを使いましょう。
「タスクに X と明記されている」	意図を理解しましょう。要件に問題があっても、適切な実装が必要です。
「コンポーザブルでトーストを表示できる」	UI はコンポーネントの役割です。エラー状態を公開しましょう。
「[id] は業界標準だ」	明示的な名前を使えば、バグを防ぎ、TypeScript の自動補完を利用できます。
「counter.ts で問題ない」	「use」を先頭に付ける必要があります：useCounter.ts
「test-utils が標準だ」	ユーザーの振る舞いを対象とするテストでは、Testing Library が最も信頼されています。

詳細なリファレンス

包括的なガイドについては、@references/ ディレクトリを参照してください：component-patterns.md、testing-patterns.md、testing-composables.md、routing-patterns.md、composable-patterns.md

このスキルを使用しない場合

• Vue 2 のプロジェクト（API が異なります）
• Options API のコードベース（このスキルは Composition API に重点を置いています）
• TypeScript を使用していないプロジェクト（ただし、導入することをおすすめします）

実環境での効果

ベースライン： プレッシャーのある状況で正しいパターンを使えた割合は 37.5% このスキルの使用時： プレッシャーのある状況で正しいパターンを使えた割合は 100%

型安全性によって実行時エラーを防げます。defineModel() によって定型コードを減らせます。Testing Library によって実際のユーザーの問題を検出できます。