vue-router-best-practices

vue-router-best-practices スキルの概要

vue-router-best-practices が役立つこと

vue-router-best-practices は、Vue Router 4 に特化した実践的なトラブルシューティング兼実装ガイドです。特に、ナビゲーションガード、ルートパラメータ変更時の挙動、ルートコンポーネントのライフサイクルまわりの問題に強みがあります。すでに Vue 3 + Vue Router を使っているアプリで、一般論ではなく正しい実装パターンをすばやく知りたいときに最も有効です。

このスキルを導入すべき人

このスキルは、次のようなフロントエンド開発者に適しています。

• 認証付きルートや権限ベースのルートを本番運用している
• ルートパラメータだけが変わるときに古いデータが残る不具合を調査している
• まだ next() を使っている古いガード実装を移行したい
• リダイレクトループや気づきにくいルーティング不具合を避けたい

実際の課題が「本番環境でルーティングを安全かつ予測可能にしたい」なら、汎用的な Vue 向けプロンプトよりも、このスキルのほうが適しています。

汎用プロンプトと違う理由

vue-router-best-practices の価値は、実アプリで繰り返し問題になりやすい、影響の大きい Vue Router の落とし穴に焦点を絞っている点です。

• パラメータやクエリ更新では beforeEnter が発火しない
• beforeRouteEnter では this にアクセスできない
• async ガードを書いても、実際にはナビゲーションを止められていない
• グローバルガードで無限リダイレクトが起きる
• ルートパラメータ変更時にコンポーネント状態が古いまま残る
• Vue Router 4 では古い next() パターンが残っている

そのため、バグ修正、コードレビュー、移行作業で特に使い勝手が良いスキルです。

カバーしない範囲

これは Vue Router の完全な講座でも、ルーティング API のリファレンスでも、あらゆるルーターモードを扱う設計ガイドでもありません。意図的にスコープを絞っており、実際のナビゲーション挙動に影響する実務上の正しさを支援するためのスキルです。

vue-router-best-practices スキルの使い方

vue-router-best-practices の導入コンテキスト

vue-router-best-practices は、AI がルーター設定、ルートコンポーネント、ガードロジックを確認できるコーディングワークフロー内で使うのが効果的です。スキル本体は vuejs-ai/skills リポジトリの skills/vue-router-best-practices にあります。

• SKILL.md
• reference/router-beforeenter-no-param-trigger.md
• reference/router-beforerouteenter-no-this.md
• reference/router-guard-async-await-pattern.md
• reference/router-navigation-guard-infinite-loop.md
• reference/router-navigation-guard-next-deprecated.md
• reference/router-param-change-no-lifecycle.md
• reference/router-simple-routing-cleanup.md
• reference/router-use-vue-router-for-production.md

利用中のプラットフォームがスキルのインストールに対応しているなら、通常の add/import フローでこのリポジトリを取り込み、そのうえで vue-router-best-practices を指定してください。

プロンプトの前に先に読むべきファイル

最短で要点をつかむなら、次の順番で読むのがおすすめです。

1. SKILL.md
2. reference/router-navigation-guard-next-deprecated.md
3. reference/router-navigation-guard-infinite-loop.md
4. reference/router-param-change-no-lifecycle.md
5. reference/router-beforeenter-no-param-trigger.md

この読み順にすると、リスクの高いミスを先に把握できます。具体的には、壊れたガード制御フロー、リダイレクトループ、ルート駆動データの陳腐化です。

このスキルに必要な入力

vue-router-best-practices skill は、症状だけでなく具体的なルーティングコードを渡したときに最も力を発揮します。特に有効なのは次のような入力です。

• router/index.ts または router.ts
• meta を含む route records
• beforeEach のようなグローバルガード
• コンポーネント内ガード
• /users/:id のような動的ルートで描画されるコンポーネント
• 本来どう遷移すべきか、現状はどうなっているかの簡潔な再現説明

コードがないと、出力はどうしても一般論寄りになり、信頼性も下がります。

曖昧な相談を強いプロンプトに変える

弱いプロンプト:

• “My Vue Router is buggy. Help.”

強いプロンプト:

• “Use vue-router-best-practices to review this Vue Router 4 setup. When navigating from /orders/1 to /orders/2, access checks do not rerun and stale order data remains visible. We use a route-level beforeEnter, an async beforeEach, and onMounted in OrderDetail.vue. Identify the bug sources, explain which Vue Router behaviors are causing them, and rewrite the guards and component logic using Vue Router 4 return-based patterns.”

この形なら、モデルがどの reference ファイルを当てるべきか判断しやすく、実際に使える修正案まで出しやすくなります。

vue-router-best-practices を使う最適なワークフロー

実務では、次の流れが使いやすいです。

1. 問題が出ている route config と guard code を貼る。
2. どのナビゲーション経路で失敗するのかを正確に説明する。
3. 既知の落とし穴のどれに当てはまるか、モデルに整理させる。
4. 修正後の実装を依頼する。
5. 直接アクセス、同一ルートでのパラメータ変更、リダイレクト、未認証アクセスを含む簡単なテストチェックリストも求める。

Vue Router の不具合はシナリオ依存で起きることが多いため、抽象的に「best practices を教えて」と聞くより、この進め方のほうが結果につながります。

このスキルが特に強いユースケース

vue-router-best-practices usage が特に有効なのは、次のケースです。

• 認証・ロールベースのルーティング
• ルートパラメータで内容が切り替わる詳細ページ
• Vue Router 3 から 4 への整理・移行
• 再利用されるコンポーネントインスタンスのデバッグ
• 壊れやすい next() 制御フローの置き換え
• ガードロジックをグローバル・ルート単位・コンポーネント内のどこに置くべきかの見直し

このスキルが修正できる代表的なパターン

このスキルでは、次のような選択肢の見極めを支援できます。

• beforeEach と beforeEnter と onBeforeRouteUpdate のどれを使うべきか
• watch(() => route.params.id) を使うべきか、:key で再マウントを強制すべきか
• return ベースの guard を使うべきか、非推奨の next() を残すべきでないか
• コンポーネント側で取得するべきか、guard 側で事前チェックするべきか
• 本番アプリでは Vue Router を使うべきか、単純な hash routing で十分か

いずれもスタイル論ではなく、実装上の現実的な判断ポイントです。

より良い出力を得るための実用プロンプトテンプレート

より良い vue-router-best-practices guide の結果を得たいなら、次のテンプレートが使えます。

• “Use vue-router-best-practices on this Vue 3 app.”
• “Environment: Vue 3, Vue Router 4, Composition API.”
• “Problem: [describe exact navigation bug].”
• “Expected behavior: [what should happen].”
• “Current behavior: [what actually happens].”
• “Files: [paste router config and affected component].”
• “Please: identify the Vue Router gotcha, explain why it happens, propose the safest fix, and include edge cases to test.”

この形式にすると、原因の切り分け、挙動の説明、安全な修正方針、テスト観点まで一通り引き出しやすくなります。

結果の質を大きく上げるコツ

もし分かっていれば、次の情報も渡してください。

• ルート変更が path 全体なのか、params/query だけなのか
• コンポーネントが ID をまたいで再利用されるのか
• 認証が同期判定なのか、API ベースなのか
• Options API と Composition API のどちらを使っているのか
• まだ next() に依存しているのか

こうした情報によって、どの vue-router-best-practices install と運用アドバイスが当てはまるかが直接変わります。

vue-router-best-practices スキル FAQ

vue-router-best-practices は初心者にも向いているか

はい。Vue の基本は理解していて、ルーティング特有の分かりにくい挙動で困っている初心者には十分向いています。Vue Router の入門を一から案内するタイプではありませんが、参照資料が具体的な不具合と修正に寄っているため、本番で起きやすいミスには取り組みやすい構成です。

通常のコーディングプロンプトではなく、これを使うべきタイミング

問題がルート遷移、ガードの実行タイミング、再利用されるルートコンポーネント、リダイレクト挙動に関係しているなら vue-router-best-practices を使うべきです。通常のプロンプトでもそれらしいコードは返ってくるかもしれませんが、このスキルのほうが、たとえば params だけの遷移では beforeEnter が再実行されない、といった Vue Router 固有の落とし穴を見逃しにくくなります。

このスキルは Vue Router 4 専用か

はい。元の資料は明確に Vue Router 4 のパターンを対象にしており、非推奨の next() スタイルから return ベースの guard へ移行する考え方も含まれています。

特にどんなリスクの防止に役立つか

特に防止効果が大きいのは、次のような問題です。

• ガードが再実行されず、未認可アクセスを許してしまう
• パラメータ変更時にページデータが古いまま残る
• async のナビゲーションチェックが停止したり誤作動したりする
• 無限リダイレクトループ
• beforeRouteEnter に関するライフサイクルの誤解

このスキルが向かないケース

次のような問題が中心なら、このスキルは見送ったほうがよいです。

• フレームワーク固有の抽象化を含む SSR ルーティング
• ナビゲーションと無関係な、一般的な Vue コンポーネント設計
• 初歩から体系的に学ぶフルチュートリアル
• Vue 以外のフロントエンド用ルーティングライブラリ

これは vue-router-best-practices for Frontend Development に特化したスキルであり、万能なルーティング総合ハンドブックではありません。

vue-router-best-practices スキルを改善する方法

コードの羅列ではなく、ナビゲーションシナリオを伝える

vue-router-best-practices の出力精度を上げるには、次のように実際の遷移を具体的に説明してください。

• どの URL から
• どの URL へ
• params/query だけが変わるのか
• ユーザーはリダイレクトされるべきか、ブロックされるべきか、そのまま通すべきか

Vue Router の不具合は、特定の遷移パスでしか表面化しないことが多いためです。

router 側と component 側のコードを両方含める

よくある失敗は、問題の半分だけを見て診断してしまうことです。たとえば route guard は正しくても、コンポーネントが onMounted に依存しているせいで /users/1 から /users/2 へ移動した後に古いデータを表示し続けることがあります。両方のファイルを出せば、ガードロジックとコンポーネントのライフサイクル挙動をまとめて判断できます。

修正だけでなく、配置判断も尋ねる

より良いプロンプト:

• “Should this logic live in beforeEach, beforeEnter, onBeforeRouteUpdate, or a watch, and why?”

単に “fix this bug” と頼むより、この聞き方のほうが強い答えを引き出せます。このスキルは、どのルーティングレイヤーに責務を置くべきかの判断で特に価値を発揮するからです。

ありがちな失敗パターンを確認する

最初の回答を受け取った後は、次の点を確認してください。

• 修正案がまだ「パラメータ変更でも beforeEnter が動く」前提になっていないか
• 解決策が next() と return ベースのパターンを混在させていないか
• 認証リダイレクトの遷移先が現在ルートのままで、再びループしないか
• async チェックで await していても、エラーやタイムアウト処理が抜けていないか
• 古いデータ対策として、軽い watch で済むのに強制再マウントにしていないか

パッチ後はテストチェックリストも依頼する

改善のための良い一手は、次のように依頼することです。

• “Now give me a minimal test checklist for direct visit, authenticated visit, unauthenticated redirect, same-route param change, query change, and invalid ID.”

vue-router-best-practices skill の活用では特に重要です。多くのルーティング不具合は、最初の正常系が通ったあとに初めて見つかるためです。

参照資料をピンポイントのレビュー用に使う

最初の回答を得たら、もっとも関係の深い reference で再確認させてください。

• router-beforeenter-no-param-trigger.md
• router-navigation-guard-infinite-loop.md
• router-param-change-no-lifecycle.md

この二段階目の確認で、見落としや微妙なミスが拾えることが多く、本番のルーティングコードを触る前の安心材料になります。