vue-development-guides

Vue.js 開発ガイド

タスクチェックリスト

• コア原則に従っている
• 特別な理由がない限り、デフォルト設定に従っている
• リアクティビティのベストプラクティスに従っている
• コンポーネントのベストプラクティスに従っている
  • Vue SFC のベストプラクティスに従っている
  • コンポーネントの責務を絞っている
    • 必要に応じて、大きなコンポーネントを小さなコンポーネントに分割している
    • 該当する場合、状態や副作用をコンポーザブルに移している
  • データフローのベストプラクティスに従っている

---

コア原則

• 状態の予測可能性を保つ： 信頼できる唯一の情報源を設け、それ以外はすべてそこから導出します。
• データフローを明示する： ほとんどの場合、Props で下方向に渡し、Events で上方向に伝えます。
• 小さく、責務を絞ったコンポーネントを優先する： テスト、再利用、保守が容易になります。
• 不要な再レンダリングを避ける： 算出プロパティとウォッチャーを適切に使用します。
• 読みやすさを重視する： 明確で、コード自体が説明となる記述を心がけます。

デフォルト設定（ユーザーから別の指示がない限り）

• Options API よりも Composition API を優先します。

リアクティビティ

重要：リアクティブな状態を管理する際は、コンポーネントまたはコンポーザブルの作成・更新時に、必ず references/reactivity-guide.md に従ってください。

コンポーネント

重要：Vue SFC を扱う際は、ベストプラクティスとして必ず references/sfc-guide.md に従ってください。

• デフォルトでは、<script setup lang="ts">（TypeScript）を使用した Vue 単一ファイルコンポーネント（SFC）を優先します。
• Vue SFC では、セクションを次の順序で配置します：<script> → <template> → <style>。

コンポーネントの責務を絞る

コンポーネントに明確な責務が複数ある場合（例：データの調整と UI、または複数の独立した UI セクション）は、分割します。

• 1 つの「巨大なコンポーネント」よりも、小さなコンポーネントとコンポーザブルを優先します。
• UI セクションは子コンポーネントに移します（Props で受け取り、Events で外部に伝えます）。
• 状態や副作用はコンポーザブル（useXxx()）に移します。

注：このルールは、デフォルトで Vue / Nuxt プロジェクトのエントリーコンポーネント（例：App.vue）にも適用されます。

データフロー

重要：コンポーネント間で次の機能を使ってデータを受け渡し、受け取る際は、必ず references/data-flow-guide.md に従ってください。

• Props
• Emits
• v-model
• provide/inject

アプリ全体でデータを共有する場合は、references/state-management-guide.md に従い、状態管理ソリューションとして Store の使用を検討してください。