vue3-frontend

Vue 3 フロントエンド開発スキル

包括的な Vue 3 フロントエンド開発スキルです。コンポーネントのテンプレート、ベストプラクティスガイド、移行支援、一般的なパターンを提供します。

主な機能

1. コンポーネント開発

<script setup> 構文と Composition API を使用して、新しい Vue 3 コンポーネントを作成します。

利用可能なテンプレート：

• assets/component-templates/BasicComponent.vue - 基本的なコンポーネントのテンプレート
• assets/component-templates/FormComponent.vue - 完全なフォームコンポーネント（バリデーションを含む）
• assets/component-templates/DataTable.vue - データテーブルコンポーネント（並べ替え、ページネーション、検索を含む）
• assets/component-templates/Modal.vue - モーダルコンポーネント（すべての機能を含む）

使用方法：

# 複製範本到專案
cp assets/component-templates/BasicComponent.vue src/components/YourComponent.vue

2. Composable の開発

再利用可能なロジックの抽象化を作成します。

利用可能なテンプレート：

• assets/composable-templates/useFetch.js - API リクエストのラッパー
• assets/composable-templates/useLocalStorage.js - localStorage と同期する状態

使用方法：

# 複製到專案
cp assets/composable-templates/useFetch.js src/composables/

3. Vue 2 から Vue 3 への移行

Vue 2 プロジェクトから Vue 3 への移行を支援します。

移行ワークフロー：

1. 破壊的変更については references/migration-guide.md を読みます
2. 既存のコードで非推奨の API を特定します
3. ガイドの移行パターンを適用します
4. 十分にテストします

主な移行領域：

• グローバル API（Vue.use → app.use）
• リアクティビティシステム（Vue.set → 直接代入）
• v-model 構文（value/input → modelValue/update:modelValue）
• ライフサイクルフック（destroyed → unmounted）
• フィルターの削除（computed/methods を使用）
• イベントバスの置き換え（mitt/Pinia を使用）

4. コードレビューと最適化

Vue 3 のコード品質を確認して最適化します。

レビュー用チェックリスト：

• パフォーマンス向上のために <script setup> を使用する
• ref/reactive を適切に使用する
• computed と methods を使い分ける
• v-show と v-if を使い分ける
• v-for で key を使用する
• コンポーネントを分割する
• props を検証する
• エラーを処理する

リファレンスドキュメント

必読のリファレンス

特定のタスクに取り組む際は、必ず以下を読みます。

移行タスク：

• references/migration-guide.md - すべての破壊的変更を網羅した、Vue 2 から Vue 3 への完全な移行ガイド

Composition API の使用：

• references/composition-api.md - Composition API の包括的なリファレンス（ref、reactive、computed、watch、ライフサイクルなど）

ベストプラクティス：

• references/best-practices.md - コンポーネント設計、リアクティビティ、パフォーマンス、コード構成、エラー処理、TypeScript を網羅した Vue 3 のベストプラクティス

一般的なパターン：

• references/common-patterns.md - フォーム処理、データ取得、リストのレンダリング、モーダル、状態管理、ルーティング、i18n

各リファレンスを読むタイミング

コンポーネントを書く前に：

1. コンポーネント設計パターンについて best-practices.md を確認します
2. common-patterns.md の関連パターンを確認します

移行の前に：

1. migration-guide.md 全体を読みます
2. 新しい API 構文について composition-api.md を参照します

機能を実装するとき：

• フォーム → common-patterns.md の Form Handling セクション
• データ取得 → common-patterns.md の Data Fetching セクション
• 状態管理 → common-patterns.md の State Management セクション
• i18n → common-patterns.md の i18n セクション

一般的な開発ワークフロー

ワークフロー 1：新しいコンポーネントを作成する

# 1. Choose appropriate template
view assets/component-templates/

# 2. Read best practices
view references/best-practices.md

# 3. Copy and customize template
cp assets/component-templates/BasicComponent.vue src/components/MyComponent.vue

# 4. Follow naming conventions (PascalCase)
# 5. Define props with validation
# 6. Use <script setup> syntax
# 7. Keep component focused and small

ワークフロー 2：Vue 2 のコードを Vue 3 に移行する

# 1. Read migration guide first
view references/migration-guide.md

# 2. Identify patterns to migrate
# - Options API → Composition API
# - this.$set → direct assignment
# - filters → computed/methods
# - Event Bus → mitt/Pinia

# 3. Apply changes systematically
# 4. Test each change
# 5. Update dependencies

ワークフロー 3：データ取得を実装する

# 1. Review data fetching patterns
view references/common-patterns.md
# Look for "Data Fetching Patterns" section

# 2. Choose approach:
# - Custom composable (useFetch template)
# - VueUse (@vueuse/core)
# - TanStack Query

# 3. Implement with error handling and loading states

ワークフロー 4：パフォーマンスを最適化する

# 1. Review performance section
view references/best-practices.md
# Look for "Performance Optimization" section

# 2. Check for issues:
# - Using methods instead of computed
# - Unnecessary v-if usage
# - Missing keys in v-for
# - Large components without splitting
# - No lazy loading

# 3. Apply optimizations:
# - Use computed for derived data
# - v-show for frequent toggles
# - defineAsyncComponent for heavy components
# - Virtual scrolling for large lists

ワークフロー 5：フォームを開発する

# 1. Use form template or VeeValidate pattern
view assets/component-templates/FormComponent.vue
view references/common-patterns.md
# Look for "Form Handling Patterns" section

# 2. Implement validation
# 3. Handle errors and loading states
# 4. Add success/error feedback

クイックリファレンスコマンド

コンポーネントのテンプレート

# List all templates
ls -la assets/component-templates/

# Copy specific template
cp assets/component-templates/[TemplateName].vue src/components/

Composable のテンプレート

# List all composables
ls -la assets/composable-templates/

# Copy specific composable
cp assets/composable-templates/[composableName].js src/composables/

ドキュメントを読む

# Migration guide
view references/migration-guide.md

# Composition API reference
view references/composition-api.md

# Best practices
view references/best-practices.md

# Common patterns
view references/common-patterns.md

ベストプラクティスのまとめ

コンポーネント設計

• パフォーマンスと DX の向上のため、常に <script setup> を使用します
• props を完全に検証するよう定義します
• 再利用可能なロジックには composable を使用します
• コンポーネントは小さく、役割を絞ります（200 行未満）
• 複雑なロジックは composable に切り出します

リアクティビティ

• プリミティブには ref() を使用します
• オブジェクトには reactive() を使用します
• 派生データには computed() を使用します
• 古い値が必要な場合は watch() を使用します
• 依存関係を自動追跡するには watchEffect() を使用します

パフォーマンス

• テンプレート内の計算には methods ではなく computed() を使用します
• 頻繁に切り替える場合は v-show を使用します
• 初回のレンダリング条件には v-if を使用します
• v-for では常に一意の key を使用します
• defineAsyncComponent() で重いコンポーネントを遅延読み込みします
• 大規模なリストには仮想スクロールを使用します

コード構成

src/
├── assets/          # Static resources
├── components/      # Reusable components
│   ├── common/      # Base components
│   ├── layout/      # Layout components
│   └── features/    # Feature components
├── composables/     # Reusable logic
├── stores/          # Pinia stores
├── router/          # Router config
├── views/           # Page components
├── utils/           # Utility functions
└── services/        # API services

TypeScript のサポート

TypeScript を使用する場合：

• インターフェースでプロパティの型を定義します
• コンポーザブルではジェネリクスを使用します
• emit を適切に型付けします
• 必要に応じて defineComponent を使用します

詳細については、best-practices.md の TypeScript 統合のセクションを参照してください。

よくある注意点

1. リアクティブオブジェクトを分割代入するとリアクティビティが失われます

   • toRefs() を使用するか、プロパティに直接アクセスします

2. Vue 2 スタイルで配列／オブジェクトを直接変更する

   • Vue 3 では $set は不要で、直接変更できます

3. ref で .value を付け忘れる

   • ref は <script> 内では .value が必要ですが、<template> 内では不要です

4. プリミティブ値に reactive() を使用する

   • プリミティブ値には ref() を、オブジェクトには reactive() を使用します

5. 副作用のクリーンアップを忘れる

   • 必ず onBeforeUnmount() 内でクリーンアップするか、watchEffect() のクリーンアップを使用します

その他のリソース

• Vue 3 公式ドキュメント：https://vuejs.org/
• Vue 3 移行ガイド：https://v3-migration.vuejs.org/
• Composition API FAQ：https://vuejs.org/guide/extras/composition-api-faq.html
• VueUse：https://vueuse.org/（ユーティリティコンポーザブル）
• Pinia：https://pinia.vuejs.org/（状態管理）

このスキルを使うためのヒント

1. 必ずリファレンスから始める：コーディングの前に、関連ドキュメントを読みます
2. テンプレートを出発点として使用する：テンプレートがある場合は、ゼロから書かないようにします
3. ワークフローに従う：ワークフローにはベストプラクティスが反映されています
4. ベストプラクティスを定期的に確認する：パターンを身につけます
5. 行き詰まったとき：common-patterns.md で類似の例を確認します