mcpField
V
vue3-best-practices

vue3-best-practices

github.com/eva813開発2222 回インストール31 週間前に更新
リポジトリ

vue3-best-practices について

vue3-best-practicesは、Vue 3の開発とコードレビュー向けのガイドスキルです。影響度別に8カテゴリ、45のルールをまとめ、リアクティビティ、コンポーネント、バンドル、状態管理、移行などを扱います。

主な機能

  1. 01優先度別に整理された45ルール
  2. 02リアクティビティとコンポーネントの最適化
  3. 03バンドルサイズと読み込みの改善
  4. 04Composition APIとテンプレートの指針
  5. 05状態管理とライフサイクルを網羅

活用シーン

  1. 01Vue 3のコンポーネントやcomposableの作成
  2. 02アプリのパフォーマンスレビューと最適化
  3. 03Vue 2からVue 3への移行
  4. 04バンドルサイズと読み込み時間の削減

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/eva813/skills-base --skill vue3-best-practices

インストール後、Claude Code で/vue3-best-practicesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

rules/
bundle-lazy-loading.md
bundle-tree-shaking.md
component-async-components.md
composition-script-setup.md
reactivity-computed-caching.md
reactivity-ref-vs-reactive.md
template-performance.md

詳細

Vue 3 のベストプラクティス

Vue 3 アプリケーション向けの包括的なパフォーマンス最適化および開発ガイドです。影響度に基づいて優先順位付けされた、8 カテゴリにわたる 45 のルールを収録し、自動リファクタリングとコード生成を支援します。

適用する場面

次のような場合に、これらのガイドラインを参照してください。

  • 新しい Vue 3 コンポーネントまたはコンポーザブルを作成するとき
  • リアクティブなデータや算出プロパティを実装するとき
  • パフォーマンス上の問題がないかコードをレビューするとき
  • Vue 2 から Vue 3 へリファクタリングするとき
  • バンドルサイズや読み込み時間を最適化するとき
  • 状態管理（Pinia/Vuex）を扱うとき
  • コンポーネント内で非同期処理を実装するとき

優先度別のルールカテゴリ

優先度カテゴリ影響度プレフィックス
1リアクティビティのパフォーマンスCRITICALreactivity-
2コンポーネントの最適化CRITICALcomponent-
3バンドルサイズと読み込みHIGHbundle-
4Composition APIMEDIUM-HIGHcomposition-
5テンプレートのパフォーマンスMEDIUMtemplate-
6状態管理MEDIUMstate-
7ライフサイクルの最適化LOW-MEDIUMlifecycle-
8高度なパターンLOWadvanced-

クイックリファレンス

1. リアクティビティのパフォーマンス（CRITICAL）
  • reactivity-ref-vs-reactive - プリミティブには ref、オブジェクトには reactive を使用します
  • reactivity-shallow-ref - 大きな不変オブジェクトには shallowRef を使用します
  • reactivity-computed-caching - 算出プロパティのキャッシュを活用します
  • reactivity-watch-vs-watcheffect - 適切なウォッチャーを選択します
  • reactivity-unref-performance - 処理負荷の高い箇所で unref の呼び出しを最小限に抑えます
  • reactivity-readonly-immutable - 不変データには readonly を使用します
2. コンポーネントの最適化（CRITICAL）
  • component-async-components - 負荷の高いコンポーネントには defineAsyncComponent を使用します
  • component-functional - シンプルな表示ロジックには関数型コンポーネントを使用します
  • component-keep-alive - keep-alive で負荷の高いコンポーネントをキャッシュします
  • component-lazy-hydration - 重要度の低いコンポーネントには遅延ハイドレーションを実装します
  • component-prop-validation - 効率的な props 検証を使用します
  • component-emit-performance - イベントの発行を最適化します
3. バンドルサイズと読み込み（HIGH）
  • bundle-tree-shaking - 最適なツリーシェイキングが行われるようインポートを構成します
  • bundle-dynamic-imports - コード分割には動的インポートを使用します
  • bundle-plugin-imports - DX を向上させるために unplugin-auto-import を使用します
  • bundle-lodash-imports - lodash の関数を個別にインポートします
  • bundle-moment-alternatives - moment.js の代わりに day.js を使用します
  • bundle-icons-optimization - アイコンのインポートと使用を最適化します
4. Composition API（MEDIUM-HIGH）
  • composition-script-setup - パフォーマンス向上のため、
  • composition-composables-reuse - 再利用可能なロジックをコンポーザブルに切り出します
  • composition-provide-inject - 依存性注入には provide/inject を使用します
  • composition-expose-selectively - 必要なプロパティのみを公開します
  • composition-reactive-transform - 適切な場合はリアクティブ変換を使用します
  • composition-auto-import - DX を向上させるために自動インポートを設定します
5. テンプレートのパフォーマンス（MEDIUM）
  • template-v-once - 静的コンテンツには v-once を使用します
  • template-v-memo - 負荷の高いリストのレンダリングには v-memo を使用します
  • template-key-optimization - パフォーマンスのために v-for のキーを最適化します
  • template-conditional-rendering - 状況に応じて v-if と v-show を使い分けます
  • template-slot-performance - スロットとスコープ付きスロットの使用を最適化します
  • template-directive-optimization - 効率的なカスタムディレクティブを作成します
6. 状態管理（MEDIUM）
  • state-pinia-optimization - Pinia ストアの構造を最適化します
  • state-store-composition - ストアの合成パターンを使用します
  • state-persistence - 効率的な状態の永続化を実装します
  • state-normalization - 複雑な状態構造を正規化します
  • state-subscription - 状態のサブスクリプションを最適化します
  • state-devtools - デバッグ用に devtools を設定します
7. ライフサイクルの最適化（低〜中）
  • lifecycle-cleanup - onUnmounted でリソースを適切にクリーンアップする
  • lifecycle-async-setup - setup 内の非同期処理を処理する
  • lifecycle-watchers-cleanup - ウォッチャーとエフェクトをクリーンアップする
  • lifecycle-dom-access - ライフサイクルフック内で DOM に安全にアクセスする
  • lifecycle-ssr-considerations - SSR のライフサイクルの違いに対処する
8. 高度なパターン（低）
  • advanced-teleport-usage - ポータルパターンに Teleport を使用する
  • advanced-suspense-async - 非同期コンポーネントで Suspense を実装する
  • advanced-custom-renderer - 必要に応じてカスタムレンダラーを作成する
  • advanced-compiler-macros - コンパイラーマクロを効果的に使用する
  • advanced-plugin-development - 効率的な Vue プラグインを開発する

フレームワークとの統合

Vite との統合
  • Vite の高速な HMR とビルド最適化を活用する
  • 適切なチャンク分割戦略を設定する
  • Vue 固有の最適化には Vite プラグインを使用する
TypeScript との統合
  • Vue 3 の強化された TypeScript サポートを活用する
  • DX を向上させるため、適切な型定義を使用する
  • 最適なビルドパフォーマンスが得られるよう TypeScript を設定する
テストとの統合
  • Composition API で Vue Test Utils を使用する
  • 効率的なコンポーネントテスト戦略を実装する
  • テストのパフォーマンスと信頼性を最適化する

使用方法

詳しい説明とコード例については、各ルールファイルを参照してください。

rules/reactivity-ref-vs-reactive.md
rules/component-async-components.md
rules/composition-script-setup.md

各ルールファイルには以下が含まれています。

  • 重要である理由の簡単な説明
  • 説明付きの不適切な Vue 3 コード例
  • 説明付きの適切な Vue 3 コード例
  • パフォーマンスへの影響と測定結果
  • 追加の背景情報と Vue 3 固有の考慮事項

Vue 2 からの移行

Vue 2 から移行する際の特別な考慮事項：

  • Composition API と Options API のパターン
  • リアクティビティシステムの変更と最適化
  • コンポーネントの定義と登録の更新
  • イベント処理とライフサイクルの変更

パフォーマンスのモニタリング

Vue 3 のパフォーマンスをモニタリングするためのツールと手法：

  • Vue DevTools との統合
  • ブラウザーツールによるパフォーマンスのプロファイリング
  • バンドルの分析と最適化
  • 実行時のパフォーマンスモニタリング

コメント

Markdown 対応