JavaScriptで画面遷移を実装する方法：モダンな手法からSPAの制御まで

現代のウェブ開発において、画面遷移の制御はユーザーエクスペリエンスを左右する非常に重要な要素です。

JavaScriptを用いた画面遷移には、単なるURLの変更から、ページをリロードしないシームレスなSPA（Single Page Application）の構築まで幅広い手法が存在します。

本記事では、基本的な実装方法から最新のブラウザAPIを活用した高度なテクニックまで、実務で役立つ知識を詳しく整理していきます。

JavaScriptによる画面遷移の基本手法

JavaScriptで最も一般的に利用されるのは、window.locationオブジェクトを使用した方法です。

このオブジェクトを操作することで、ブラウザに対して新しいページへの移動を指示できます。

window.location.hrefによる遷移

window.location.hrefにURLを代入することで、指定したページへ遷移します。

これはブラウザの「戻る」ボタンで前のページに戻ることができる、最も標準的な遷移方法です。

// 指定したURLに遷移する
window.location.href = 'https://example.com/next-page';

window.location.replaceによる遷移

window.location.replaceメソッドを使用すると、現在のページ履歴を上書きして遷移します。

この方法では、遷移後にブラウザの「戻る」ボタンを押しても元のページに戻ることができません。

ログイン後のリダイレクトや、二重送信を防止したいフォーム送信後の遷移に適しています。

// 履歴を残さずに遷移する
window.location.replace('https://example.com/dashboard');

locationオブジェクトの主なプロパティ比較

用途に応じて適切なプロパティやメソッドを選択することが重要です。

SPAを実現するHistory APIの活用

モダンなウェブアプリケーションでは、ページ全体をリロードせずにコンテンツだけを切り替える手法が一般的です。

これを実現するために長年使われてきたのがHistory APIです。

history.pushStateによるURL操作

history.pushStateを使用すると、ページをリロードせずにブラウザのURLバーの表示のみを変更できます。

これにJavaScriptによるDOMの書き換えを組み合わせることで、高速な画面遷移を実現します。

// 状態オブジェクト、タイトル、URLを指定して履歴を追加
const state = { page: 'about' };
const title = 'About Us';
const url = '/about';

history.pushState(state, title, url);

// この後にDOMを更新する処理を記述する
console.log('URLが /about に変更されました（リロードなし）');

URLが /about に変更されました（リロードなし）

popstateイベントによる戻る操作の検知

History APIを使用してURLを変更した場合、ユーザーがブラウザの「戻る」ボタンを押した際の挙動を制御する必要があります。

popstateイベントを監視することで、履歴の変更を検知して適切なコンテンツを再描画できます。

window.addEventListener('popstate', (event) => {
    if (event.state) {
        console.log('保存された状態:', event.state);
        // 状態に基づいてコンテンツを切り替える処理
    }
});

次世代の標準：Navigation API

従来のHistory APIには、イベントの制御が複雑であるという課題がありました。

この問題を解決するために登場したのがNavigation APIです。

Navigation APIを利用することで、より直感的かつ強力に画面遷移をインターセプト（遮断・制御）できます。

navigation.navigateによる遷移

新しいnavigationオブジェクトを使用すると、遷移処理をPromiseとして扱うことができます。

// モダンな遷移の実装
if (window.navigation) {
    navigation.navigate('/new-page').finished.then(() => {
        console.log('遷移が完了しました');
    });
}

遷移のインターセプト

すべての遷移を中央で管理し、必要に応じてキャンセルしたり、カスタム処理を挟んだりすることが容易になります。

これにより、SPAのルーティングロジックをより簡潔に記述できるようになりました。

navigation.addEventListener('navigate', (event) => {
    // 同一ドメイン内の遷移のみを対象にする
    if (event.canIntercept) {
        event.intercept({
            async handler() {
                console.log('遷移をインターセプトしました');
                // データをフェッチしてDOMを更新するなどの非同期処理
                const response = await fetch('/api/content');
                const html = await response.text();
                document.getElementById('app').innerHTML = html;
            }
        });
    }
});

View Transitions APIによる滑らかな視覚効果

2026年現在のモダンブラウザでは、画面遷移時のアニメーションを容易に実装できるView Transitions APIが広く普及しています。

これまでは複雑なCSSアニメーションが必要だった「ページ間の要素の移動」が、わずかなコードで実現可能です。

基本的な使用方法

document.startViewTransitionにDOMを更新する関数を渡すだけで、ブラウザが自動的に新旧の状態をキャプチャし、クロスフェードなどのアニメーションを適用します。

function updateDOM() {
    document.getElementById('content').textContent = '新しいコンテンツ';
}

// アニメーションを伴う画面更新
if (document.startViewTransition) {
    document.startViewTransition(() => updateDOM());
} else {
    updateDOM();
}

このAPIはSPAのルーティングと組み合わせることで、ネイティブアプリのようなスムーズな体験を提供します。

フォーム送信時の画面遷移制御

JavaScriptで画面遷移を制御する場合、HTMLフォームのデフォルトの挙動を調整することも多いです。

event.preventDefault()を使用してデフォルトの送信を止め、Fetch APIなどでデータを送信した後にプログラムで遷移させます。

非同期通信後の遷移例

ユーザーが入力したデータをサーバーに送信し、成功した場合のみダッシュボードへ移動させるフローです。

const form = document.querySelector('#login-form');

form.addEventListener('submit', async (event) => {
    event.preventDefault(); // デフォルトのページ遷移をキャンセル

    const formData = new FormData(form);
    const response = await fetch('/api/login', {
        method: 'POST',
        body: formData
    });

    if (response.ok) {
        // ログイン成功時に履歴を上書きして遷移
        window.location.replace('/dashboard');
    } else {
        alert('ログインに失敗しました');
    }
});

実務における注意点とベストプラクティス

JavaScriptによる画面遷移を実装する際には、アクセシビリティやパフォーマンスへの配慮が欠かせません。

アクセシビリティ（a11y）の確保

JavaScriptだけで遷移を作ると、スクリーンリーダーがページの変更を正しく認識できない場合があります。

遷移後にフォーカスを適切な位置（ページの先頭やメイン見出しなど）に移動させることが推奨されます。

また、重要なリンクには必ず<a>タグを使用し、クリックイベントで遷移を制御するようにしましょう。

SEOへの配慮

検索エンジンはJavaScriptを実行してリンクを辿ることができますが、基本的なURL構造が壊れていると正しくインデックスされません。

各画面には一意のURLを割り当て、サーバーサイドでもそのURLで正しいコンテンツを返せるようにする（フォールバック）ことが不可欠です。

実装方法の選択基準

プロジェクトの規模や目的に応じて、以下の表を参考に手法を選択してください。

まとめ

JavaScriptによる画面遷移は、古典的なlocation.hrefから、最新のNavigation APIやView Transitions APIまで、時代と共に進化を続けています。

単純にページを移動させるだけでなく、ユーザーがいかにストレスなく、かつ直感的にコンテンツを切り替えられるかを考えることが重要です。

各手法のメリットとデメリットを理解し、ブラウザ履歴の管理やアクセシビリティにも配慮した実装を心がけましょう。

特にモダンな開発においては、新しいAPIを活用することで、より少ないコードで高品質なユーザー体験を提供できるようになります。

まずは基本的なLocationオブジェクトの操作から習得し、徐々に非同期通信やHistory管理を組み合わせた高度な遷移制御に挑戦してみてください。