Vue.js vs Next.js: 2つのフレームワークにおけるモーダルルーティングの処理の違い

リンクをクリックしたときにページ全体がリロードされるのではなくダイアログがポップアップ表示される場合、それがモーダルルーティングの働きです。2026年6月30日現在、このパターンはモダンな Web アプリでこれまで以上に一般的になっていますが、Vue.js と Next.js は根本的に異なるアプローチを採用しており、その違いを理解することで何時間もの混乱を回避できます。

重要なインサイト：Vue.js はルーティングロジックをコード内に配置し、Next.js はそれをファイル構造に組み込みます。どちらも機能しますが、まったく異なるメンタルモデルが必要です。

モーダルルーティングとは？

従来のナビゲーションではページ全体が置き換わります。写真のリンクをクリックするとページが更新され、フルビューで写真が表示されます。モーダルルーティングはよりスマートです。クリックしたことを反映して URL は変化しますが、ページ自体はほとんどそのまま維持され、その上にモーダル（ポップアップダイアログ）が表示されて写真が見えます。モーダルを閉じるか戻るボタンを押すと、URL が元に戻りモーダルが消えます。

ページが点滅したりリロードされたりしないため、ユーザーにとってはよりスムーズに感じられます。しかし、ルーティングシステムが「このルートはモーダルを表示すべきか、それともフルページを表示すべきか？」を把握する必要があるため、構築はより複雑になります。

Vue.js のアプローチ：コード駆動型ロジック

Vue.js では、ルーターの設定でこれを完全に制御します。以下がメンタルモデルです：

1. ルーターのセットアップ — コード内でルートとそのコンポーネントを定義します。
2. 子ルートの追加 — モーダルを表すネストされたルートを作成します。
3. 状態の確認 — ユーザーがどのようにアクセスしてきたかに基づいて、コンポーネントがモーダルを表示するかフルページを表示するかを決定します。

たとえば、フォトギャラリーを構築している場合：

import { createRouter, createWebHistory } from 'vue-router'
import GalleryView from './views/GalleryView.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: GalleryView,
      children: [
        {
          path: 'photo/:id',
          component: PhotoModal
        }
      ]
    }
  ]
})

お使いの GalleryView コンポーネントは、アクティブな子ルートが存在するかどうかをチェックします。存在する場合はギャラリーと および モーダルの両方をレンダリングします。ユーザーが /photo/123 に直接アクセスした場合、コンポーネントは代わりに写真のフルページを表示します。

このアプローチは柔軟であり、コンポーネントコード内で完全な制御が可能です。ただし規律が必要であり、毎回両方のケース（モーダル vs. フルページ）を忘れずに処理する必要があります。

Next.js のアプローチ：ファイルシステムルーティングと Intercepted Routes

Next.js 13+ では、 intercepted routesという異なるコンセプトが導入されました。コード内でルーティングロジックを書く代わりに、ファイル構造を使用してどのルートをモーダルにするかを宣言します。

ファイルシステムがルーティングテーブルになります：

app/
  photo/
    [id]/
      page.js         (full page view)
  (.)photo/
    [id]/
      page.js         (modal view)

その (.) 構文は「次のセグメントに一致するルートをインターセプトする」ことを意味します。そのため、ユーザーがギャラリー内から /photo/123 へのリンクをクリックすると、Next.js は (.)photo バージョン（モーダル）を提供します。しかし、ブラウザで /photo/123 に直接アクセスした場合は、フル機能の photo/[id] ページが表示されます。

Next.js が複雑な処理を代行してくれます。コンポーネント内に条件分岐を書く必要はありません。フレームワークがルーティングコンテキストに基づいてどのファイルをレンダリングすべきかを把握します。

メンタルモデルのシフト

思考の観点で両者が分岐するポイントは以下の通りです：

Vue.js の考え方：「ロジックを書いてください。何を表示するかはあなたが決定します。」

Next.js の考え方：「ファイルを構造化してください。何を表示するかはフレームワークが決定します。」

Vue.js はより明示的ですが、より多くのコードを必要とします。Next.js はより暗示的ですが、命名規約やファイル構造に依存します。そのため、規約を誤解すると、エラーを出さずに静かに機能が破綻することがあります。

Vue.js を選択すべき場合

以下の場合には Vue.js を選択してください：

• ルーティングロジックを完全に制御したい場合。
• モーダルがファイルシステムパターンに収まらない複雑な条件付き動作を持っている場合。
• すでに Vue で構築を進めており、モーダルルーティングを段階的に追加したい場合。
• チームが魔法のような規約よりも明示的なコードを好む場合。

Next.js を選択すべき場合

以下の場合には Next.js を選択してください：

• ルーティングの魔法をフレームワークに任せたい場合。
• モーダルのパターンがシンプルである場合（「このルートはモーダルを表示し、あちらは表示しない」など）。
• ボイラープレートの削減と判断事項の少なさを重視する場合。
• 新規に開始するプロジェクトで、ゼロからファイル構造を設計できる場合。

トレードオフの実際

ギャラリーからクリックされたときは写真をモーダルとして開き、検索結果やブックマークからアクセスされたときはフルページとして表示したい場合を考えてみましょう。

Vue.js の場合： リファラーやストアの状態をコンポーネント内で手動で確認し、何をレンダリングするかを決定します。手作業は増えますが、何が起きているかが正確に把握できます。

Next.js の場合： シナリオごとに別々のファイルパスを定義し、フレームワークに自動的にルーティングさせます。コード量は少なくなりますが、ファイル構造が正しいことを信じる必要があります。

具体的な例：フォトギャラリー

app.example.com のフォトギャラリーを構築していると仮定します。写真のサムネイルをクリックするとモーダルが表示され、前に戻るナビゲーションを行うとモーダルが閉じます。

Vue.js のアプローチ：

ルーターには親ルート（ギャラリー）と子ルート（写真）が存在します。ギャラリーコンポーネントは route.name === 'photo' — はいの場合、ギャラリーと および モーダルの両方をレンダリングします。いいえの場合、ギャラリーのみをレンダリングします。

Next.js のアプローチ：

ファイルは app/gallery/page.js および app/(.)gallery/[id]/page.jsに配置されます。ギャラリーページでサムネイルをクリックすると、Next.js がナビゲーションをインターセプトしてモーダルをレンダリングします。条件分岐ロジックを書く必要はなく、ファイル構造がそれを処理します。

デバッグとメンテナンス

Vue.js のモーダルはロジックがコード内に見えるため、デバッグが容易です。モーダルが表示されない場合は、条件分岐を確認します。

Next.js のモーダルは、intercepted routes の仕組みを忘れているとデバッグが難しくなることがあります。フォルダの命名ミスやファイルの配置ミスがあると、明確なエラーメッセージなしに機能が失敗することがあります。

まとめ

モーダルルーティングは、スムーズで高速に感じられる Web アプリを実現するための強力なパターンです。Vue.js と Next.js はどちらもこれをサポートしていますが、正反対の哲学を持っています。Vue は開発者に制御権を与え、Next.js はそれを規律の中に隠します。どちらが正しいというわけではなく、開発者が明示的なコードを好むか、暗示的な魔法を好むかのアプローチの違いにすぎません。チームのスタイルとルーティング要件の複雑さに応じて選択してください。

メリット

• Vue.js： 完全な制御、明示的なコード、既存プロジェクトへの段階的な導入が可能、デバッグが容易。
• Next.js： ボイラープレートの削減、フレームワーク管理のルーティング、よりクリーンなコンポーネント、標準的なパターンに最適。

デメリット

• Vue.js： 記述するコード量が多い、モーダルとフルページの両方のケースを処理する規律が必要、初心者にとって理解が難しい。
• Next.js： ファイル構造による魔法が新しい開発者を混乱させる可能性がある、規約に従っていない場合のデバッグが難しい、変則的なパターンに対する柔軟性が低い。

注意

ここに示されている名前、パス、および構文はプレースホルダーです。本番環境に移行する前にモーダルルーティングを十分にテストしてください。モーダルの状態やブラウザの履歴は扱いが難しい場合があり、誤りがあると「戻る」ボタンが動作しなくなったり、予期せずモーダルが表示されたりすることがあります。これらの例は単純化されています。実際のプロジェクトでは、スクロール位置、body の overflow、アクセシビリティなどの追加処理が必要になることがよくあります。この記事が執筆されて以降に構文が変更されている可能性があるため、ご使用の特定のバージョンに対応する Vue Router および Next.js のドキュメントの最新バージョンを必ず確認してください。

よくある質問

• Next.js における intercepted routing とは何ですか？
• 直接ページにアクセスしたときにモーダルが表示されないようにするにはどうすればよいですか？
• モーダルルーティングは Next.js Pages Router でも使用できますか、それとも App Router のみですか？
• モーダルルーティングでブラウザの「戻る」ボタンを処理するにはどうすればよいですか？
• モーダルルーティングは SEO や通常のページナビゲーションにとってより優れていますか？
• ユーザーがブラウザでモーダルを無効にしている場合はどうなりますか？
• Vue Router でモーダルルーティングをテストするにはどうすればよいですか？
• すべてのルートでモーダルを使用できますか、それともパフォーマンスの制限がありますか？

タグ

#vuejs #nextjs #routing #modals #webdevelopment #javascript #frontend #componentarchitecture