mcpField
V
vue-best-practices

vue-best-practices

github.com/vinayakkulkarni開発43191 回インストール15 週間前に更新
リポジトリ

vue-best-practices について

Vue コードのレビュー、リファクタリング、生成に使えるパフォーマンスガイドです。リアクティビティ、コンポーネント、算出値、テンプレート、Composition APIを扱う18の優先度付きルールを収録しています。

主な機能

  1. 01優先度付きのパフォーマンスルール18項目
  2. 02リアクティビティAPIの指針
  3. 03コンポーネント描画の最適化
  4. 04算出値とウォッチャーの実践方法
  5. 05テンプレートの最適化
  6. 06Composition APIのパターン

活用シーン

  1. 01Vueコードの性能問題のレビュー
  2. 02リアクティブな状態処理のリファクタリング
  3. 03大規模リスト描画の最適化

インストール

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

$npx skills add https://github.com/vinayakkulkarni/vue-nuxt-best-practices --skill vue-best-practices

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

同梱ファイル

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

AGENTS.md
metadata.json
package.json
rules/
_sections.md
_template.md
component-async.md
component-functional.md
component-keep-alive.md
component-v-memo.md
component-v-once.md
composable-return-refs.md
composable-single-responsibility.md
computed-cache.md
computed-dependencies.md
reactivity-avoid-destructure.md
reactivity-raw-values.md
reactivity-ref-vs-reactive.md
reactivity-shallowRef.md
reactivity-toRefs.md
template-avoid-v-if-v-for.md
template-key-attribute.md
template-v-show-vs-if.md
watch-deep-avoid.md
scripts/
build.ts
validate.ts

詳細

Vue のベストプラクティス

Vue.js アプリケーション向けの包括的なパフォーマンス最適化ガイドです（公式 Vue 3.5 以降のドキュメントに照らして検証済み）。影響度の高い順に分類された 5 カテゴリー、18 のルールで、自動リファクタリングとコード生成を支援します。

適用するタイミング

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

  • Vue コンポーネントを新しく作成するとき
  • リアクティブな状態や算出プロパティを実装するとき
  • パフォーマンス上の問題についてコードをレビューするとき
  • 既存の Vue コードをリファクタリングするとき
  • レンダリングや再レンダリングを最適化するとき
  • Composition API または Options API を使用するとき

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

優先度カテゴリー影響度接頭辞
1リアクティビティの基本CRITICALreactivity-
2コンポーネントのパフォーマンスCRITICALcomponent-
3算出プロパティとウォッチャーHIGHcomputed- / watch-
4テンプレートの最適化MEDIUM-HIGHtemplate-
5Composition API のパターンMEDIUMcomposable-

クイックリファレンス

1. リアクティビティの基本（CRITICAL）
  • reactivity-ref-vs-reactive - 基本のリアクティビティ API として ref() を優先する
  • reactivity-avoid-destructure - リアクティブオブジェクトを分割代入しない
  • reactivity-toRefs - 分割代入が必要な場合は toRefs()/ゲッターを使用する
  • reactivity-shallowRef - リアクティブにする必要のない大きなデータには shallowRef() を使用する
  • reactivity-raw-values - toRaw() は限定的な回避手段として扱う
2. コンポーネントのパフォーマンス（CRITICAL）
  • component-async - 大規模なコンポーネントには defineAsyncComponent を使用する
  • component-keep-alive - KeepAlive でコンポーネントの状態をキャッシュする
  • component-v-memo - 1000 件以上のリストには v-memo によるマイクロ最適化を使用する
  • component-v-once - 静的コンテンツには v-once を使用する
  • component-functional - ステートレスコンポーネントはシンプルに保つ
3. 算出プロパティとウォッチャー（HIGH）
  • computed-cache - 派生値にはメソッドではなく computed() を使用する
  • computed-dependencies - プロパティごとのきめ細かな依存関係追跡を理解する
  • watch-deep-avoid - 大きなオブジェクトに対するディープウォッチャーは避ける
4. テンプレートの最適化（MEDIUM-HIGH）
  • template-v-show-vs-if - 頻繁な切り替えには v-show、まれな切り替えには v-if を使用する
  • template-key-attribute - v-for では常に一意なプリミティブ値のキーを使用する
  • template-avoid-v-if-v-for - 同じ要素で v-if と v-for を併用しない
5. Composition API のパターン（MEDIUM）
  • composable-single-responsibility - composable 1 つにつき関心事は 1 つにする
  • composable-return-refs - リアクティブオブジェクトではなく ref を返す

使用方法

詳しい説明とコード例については、個々のルールファイルを読んでください。

rules/reactivity-ref-vs-reactive.md
rules/component-v-memo.md
rules/_sections.md

各ルールファイルには次の内容が含まれています。

  • 重要である理由の簡単な説明
  • 説明付きの誤ったコード例
  • 説明付きの正しいコード例
  • 追加の背景情報と参考資料

コンパイル済みドキュメント全文

すべてのルールを詳しく解説した完全版ガイドについては、AGENTS.md を参照してください。

コメント

Markdown 対応