【JavaScript】ページ遷移とは？初心者にもわかりやすく手順と活用例を丁寧に解説

フロントエンド開発•2025/2/15

JavaScript

はじめに

JavaScriptを学び始めると、ボタンをクリックした際に別のページへ移動させたり、ユーザーが入力フォームを送信したら画面を切り替えたりといった動きを実装したいと思う場面が出てくるのではないでしょうか。

いわゆるページ遷移と呼ばれるこの操作は、WebアプリケーションやWebサイトの構成を考えるうえで欠かせない要素です。

とはいえ、単純にページを切り替えるだけでも、複数の方法が存在します。

たとえば location.href でURLを指定する単純な方法もあれば、History API を使って履歴を操作しながら部分的に画面を切り替えるような方法もあります。

本記事では、これらのJavaScriptを利用したさまざまなページ遷移の実装方法をわかりやすく整理しながら、初心者の方でも理解しやすい言葉で解説します。

この記事を読むとわかること

JavaScriptを使ったページ遷移の基本的な実装方法
location.href や window.open、History API など具体的な使い分け
実務でのページ遷移活用例（フォーム送信やシングルページアプリケーションなど）
ページ遷移を実装する際の注意点とパフォーマンス、セキュリティ上の考え方

JavaScriptでページ遷移するとは

JavaScriptを使ったページ遷移とは、ユーザーがある操作をしたときに、指定したURLへ移動したり、同一ページ内で特定のコンテンツを切り替えたりする仕組みを実装することを指します。

WebサイトではHTMLのリンクタグ（<a>）をクリックすれば通常はページが変わりますが、JavaScriptを使うことで画面遷移の挙動を細かく制御できます。

たとえば、一定の条件を満たしたときだけ自動で他のURLへ移動させたり、ユーザーにメッセージを表示してからページを切り替えたりすることが可能です。

また、ページを完全にリロードする方法だけでなく、画面の一部だけを切り替える技術（SPAなど）も存在します。

こうした技術を理解すると、より使いやすいサイトやアプリを作れるようになります。

JavaScriptでページ遷移する基本的な方法

location.hrefを使ったページ遷移

JavaScriptでは location というオブジェクトを通じて現在のページ情報を参照できます。

location.href プロパティに新しいURLを代入すると、そのページへ移動できます。


// ボタンをクリックしたら別ページへ移動
const button = document.getElementById("moveButton");
button.addEventListener("click", () => {
  location.href = "https://example.com/newpage.html";
});

上記のように、button をクリックすると newpage.html に移動します。

ユーザーの操作に応じて処理を追加できるので、たとえば「入力内容にエラーがなければ次のページへ進む」などのロジックを組み合わせることが容易です。

実務での活用シーン

購入ボタンを押したら決済ページに飛ばす
ログイン情報が正しい場合のみ、ユーザー用のページへ移動する

location.replaceを使ったページ遷移

location.replace は location.href と似ていますが、ブラウザの履歴に残さない という特性があります。


// 履歴を残さずにページを移動
location.replace("https://example.com/secretpage.html");

これを使うと、戻るボタンを押しても以前のページに戻れなくなるため、不要な履歴を残したくない場面で役立ちます。

実務での活用シーン

セキュリティ上の理由などで、特定ページから移動した痕跡を残したくない場合
重複した画面遷移をユーザーに見せたくない場合

window.openを使ったページ遷移

新しいタブや新しいウィンドウで別ページを開きたいときは window.open を使います。


// 新しいタブで開く例
window.open("https://example.com/newtab.html", "_blank");

1つ目の引数にURL、2つ目の引数でタブやウィンドウを指定します。

_blank は新しいタブで開く指定となります。

実務での活用シーン

外部サイトへのリンクを別ウィンドウで開かせたい場合
メイン画面とは別の設定画面などを開きたい場合

anchorタグとJavaScriptイベントの組み合わせ

基本的にはHTMLの <a href="...">リンク</a> でページを移動できますが、JavaScriptでクリック時の処理を追加しつつ、最終的にページ移動したいケースも考えられます。


<a href="https://example.com/anotherpage.html" id="link">別ページへ移動</a>
<script>
  const link = document.getElementById("link");
  link.addEventListener("click", (event) => {
    // 例えば事前確認のダイアログを出すなど
    const result = window.confirm("本当に移動しますか？");
    if (!result) {
      event.preventDefault();
    }
  });
</script>

この例では confirm で「移動してよいか」を確認し、ユーザーがキャンセルした場合は event.preventDefault() を呼び出して、リンクの遷移を止めています。

このようにJavaScriptで移動前の処理をはさめるのもポイントです。

実務での活用シーン

重要な画面遷移前にユーザーの最終確認を入れたい場合
ダイアログでユーザーの入力結果によって画面移動を制御する場合

History API（pushState、replaceState）を使ったページ遷移

History API は、history.pushState() や history.replaceState() などを使ってブラウザの履歴を操作できる仕組みです。

これを利用すると、実際にページをリロードせずにURLを変えたり、戻るボタンを使った際の挙動を制御したりできます。

シングルページアプリケーション（SPA）などで、URLと画面状態を同期させたいケースに便利です。


// 画面をリロードせずにURLを切り替える
history.pushState({ page: "info" }, "", "/info");

上記例では、URLが https://example.com/info に書き換わりますが、ページ全体はリロードされず、そのままの状態が継続されます。

あとはJavaScript側で、URLのパラメータや location.pathname をもとに表示するコンテンツを切り替えれば、ユーザーにはあたかもページが変わったように見せることができます。

実務での活用シーン

SPAでの画面遷移（Vue RouterやReact Routerなどでこの仕組みが応用されている）
ページを再読み込みせずに複数ステップのフォームを実装する
戻るボタンでも動作が破綻しないような仕組みを作る

ページ遷移の実務的な利用シーン

通常のページ移動

最も一般的なシーンは、HTMLのリンクや location.href を使った画面切り替えです。

Webサイトで多く見られる「商品一覧 -> 商品詳細 -> カート -> 決済ページ」のような流れは、基本的にHTMLリンクや location.href で実現します。

余計なJavaScriptが不要な場合は、なるべくHTMLの標準的な機能を使うほうが開発がシンプルになります。

ただし、次のような場面ではJavaScript側であえてページ遷移を制御することがあります。

一部だけエラー処理を挟みたい
特定の条件を満たさないときに画面遷移を止めたい
非同期通信でサーバーから情報を取得してから次のページへ移りたい

このような場合、クリックイベントをフックして location.href へ代入する方法がよく使われます。

フォーム送信時の挙動

フォーム入力後に「送信ボタン」を押すと、通常は指定のURLへ飛びますが、JavaScriptを使うと送信前にエラーをチェックしたり、確認画面を表示したりできます。


<form id="myForm" action="https://example.com/submit" method="POST">
  <label>名前: <input type="text" name="username" /></label>
  <button type="submit" id="submitBtn">送信</button>
</form>

<script>
  const form = document.getElementById("myForm");
  form.addEventListener("submit", (event) => {
    const username = form.elements["username"].value;
    if (!username) {
      event.preventDefault();
      alert("名前を入力してください");
      // 必要に応じて処理を追加
    }
  });
</script>

上記では、未入力なら event.preventDefault() で送信処理を止めてアラートを表示し、フォームが正しい状態であれば、指定URLへのページ遷移が進みます。

実務での活用シーン

フォーム内容のバリデーション（必須項目のチェック、文字数制限など）
確認ダイアログの表示後にサーバー送信するかを判断
APIでバリデーション結果を取得してからページを移動する

シングルページアプリケーション (SPA)

SPAの特徴は、初回ロード時に主要なHTMLやJavaScriptを読み込み、その後の画面更新は部分的に行う点にあります。

フレームワークやライブラリ（例：React、Vue.js、Angularなど）を用いると、URLのルーティングとコンポーネント描画を結びつけてページ全体をリロードせずに見た目を切り替えることができます。

その際のページ遷移は、History API やフレームワーク側の仕組みを利用します。

SPAにおけるページ遷移のメリット

必要なデータだけを取得するため、画面表示がスムーズになりやすい
移動のたびにページ全体を読み込まないため、ユーザーが使いやすい
バックエンドへのリクエスト回数や通信量を最適化しやすい

一方で、SEO対策や初期読み込み速度などに注意が必要なケースもあるため、状況に応じて選択する必要があります。

複数ステップの画面切り替え（Wizard形式）

ユーザーに複数ステップの入力を促しながら、1ページごとに進むような場合があります。

たとえば、アンケートや申し込みフォームをウィザード形式にして、ユーザーがボタンを押すたびに次の質問に移るような仕組みです。

ステップ1：名前や生年月日を入力
ステップ2：連絡先を入力
ステップ3：確認画面を表示

これをそれぞれ別ページにすることもできますが、JavaScriptと適切なデザインを組み合わせると、ページリロードなしでもステップを切り替えられます。

document.getElementById("step2").style.display = "block"; のように表示を切り替えつつ、履歴を管理するなら History API を利用する、という使い方が考えられます。

ページ遷移を実装する際の注意点

セキュリティ的な注意

ページ遷移先が外部サイトの場合、そのURLをそのまま location.href に設定すると、悪意のあるリンクへ誘導されるリスクが高まることがあります。

ユーザーが入力した値をURLとしてそのまま遷移に使うような実装は、フィッシングなどの脅威となる可能性があるため、安全に取り扱う必要があります。

また、ログイン画面からマイページへ遷移するときなど、認証情報をどう管理するかも重要です。

クッキーを利用している場合は、HTTP Only属性を設定する、同一サイト属性を適切に設定するなど、セキュリティ対策を強化しましょう。

不審なURLやユーザーの入力をそのままリンク先に使う実装は避け、信頼できるドメインに限定するなどの対策が大切です。

パフォーマンス最適化

頻繁に画面遷移が発生するようなサイトは、ユーザー体験に影響を及ぼします。

たとえば、画面を遷移するたびにサーバーへ多数のリクエストが飛び、待ち時間が長くなってしまう場合があります。

SPAや部分的なページ更新を取り入れることで、ページ読み込みの回数を減らす ことができます。

ただし、SPAは最初の読み込みで必要なファイルをまとめて読み込む場合が多いため、逆に最初の表示に時間がかかりすぎないよう注意が必要です。

どのような設計が最も適切かは、サイトの規模やユーザーの利用状況を踏まえて検討すると良いでしょう。

ページタイトルやメタ情報の更新

History API を使ってURLだけを切り替える方法や、SPAで画面の一部だけを変更する場合は、ページタイトルやメタタグなどの情報を手動で更新しなければいけません。


// pushStateやreplaceStateでURLを変えたあと
document.title = "新しいページタイトル";

検索エンジンやブックマーク、共有リンクなどを考慮する場合は、URLやタイトルが正しく反映されるよう調整することが必要です。

システムの規模に応じた判断

シンプルな構成（商品一覧から商品詳細への移動程度）なら、HTMLのリンクや location.href で十分
複数の手順を踏むフォーム なら、JavaScriptによるエラーチェックやウィザード形式の導入が便利
大規模サービス でページ間の移動回数が多い、画面切り替えが複雑という場合は、SPAフレームワークの導入を検討

こうした判断は、サイトの目的やユーザーがどのように利用するかを把握したうえで行うと良いでしょう。

実際のコード例：History APIを活用した簡単なSPA風の切り替え

以下は、1つのHTMLページ内でコンテンツを複数用意し、URLのパスごとに表示切り替えを行うサンプルです。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>JavaScript ページ遷移 サンプル</title>
  <style>
    .content { display: none; }
    .active { display: block; }
    nav a { margin-right: 10px; cursor: pointer; }
  </style>
</head>
<body>
  <nav>
    <a data-path="/">トップ</a>
    <a data-path="/about">アバウト</a>
    <a data-path="/contact">コンタクト</a>
  </nav>

  <div id="page-home" class="content active">
    <h2>トップページ</h2>
    <p>ここはトップページのコンテンツです。</p>
  </div>

  <div id="page-about" class="content">
    <h2>アバウトページ</h2>
    <p>当サイトの概要や運営方針などを紹介します。</p>
  </div>

  <div id="page-contact" class="content">
    <h2>コンタクトページ</h2>
    <p>お問い合わせフォームを設置します。</p>
  </div>

  <script>
    // ページ表示切り替えのロジック
    const showPage = (path) => {
      document.getElementById("page-home").classList.remove("active");
      document.getElementById("page-about").classList.remove("active");
      document.getElementById("page-contact").classList.remove("active");

      switch(path) {
        case "/about":
          document.getElementById("page-about").classList.add("active");
          break;
        case "/contact":
          document.getElementById("page-contact").classList.add("active");
          break;
        default:
          document.getElementById("page-home").classList.add("active");
      }
    };

    // ナビゲーションのリンクがクリックされたとき
    const navLinks = document.querySelectorAll("nav a");
    navLinks.forEach((link) => {
      link.addEventListener("click", (event) => {
        const path = event.target.getAttribute("data-path");
        // ブラウザのアドレスバーを書き換え
        history.pushState({ path }, "", path);
        showPage(path);
      });
    });

    // ブラウザの戻る/進むボタンが押されたとき
    window.addEventListener("popstate", (event) => {
      const path = event.state ? event.state.path : "/";
      showPage(path);
    });
  </script>
</body>
</html>

ここでのポイント

<nav> の中の <a> タグは href を設定せず、data-path 属性にパスを持たせている
クリック時に history.pushState() でURLを更新し、画面の表示コンテンツだけ切り替えている
ブラウザの「戻る」や「進む」でも正しくページが切り替わるように、popstate イベントで制御している
実際にはサーバー側の設定で、URL直打ちでも正しいページを返す仕組みが必要になるケースがある

この方法を応用すると、ユーザーに対してサクサクとしたページ切り替え体験を提供できるようになります。

まとめ

JavaScriptを使ったページ遷移には、location.href や location.replace、window.open といったシンプルな手法から、History API を用いてリロードせずにURLと画面表示を管理する方法まで、さまざまなアプローチがあります。

実装を検討する際は、以下の点に気をつけると良いでしょう。

利用シーンを明確に

シンプルなリンクで済むならHTMLの <a> タグを使うだけにする
条件付きで移動したいなら location.href などをJavaScriptで呼び出す

ユーザー体験とパフォーマンス

頻繁に画面遷移する大規模アプリケーションなら、SPAなどで部分的に画面を切り替えられると操作感が向上しやすい
ただし、初回ロードに時間がかかりすぎないよう配慮が必要

セキュリティ

悪意のあるリダイレクトを防ぐために、ユーザーの入力値をURLに直接反映するときは注意
認証が絡む場合はクッキーやトークンの扱いにも気を配る

JavaScriptによるページ遷移の方法を正しく理解すれば、ユーザーの操作に合わせたスムーズな画面切り替えができるようになります。

みなさんの開発・学習の中で、本記事の情報が参考になれば幸いです。

【JavaScript】ページ遷移とは？初心者にもわかりやすく手順と活用例を丁寧に解説

はじめに

この記事を読むとわかること

JavaScriptでページ遷移するとは

JavaScriptでページ遷移する基本的な方法

location.hrefを使ったページ遷移

実務での活用シーン

location.replaceを使ったページ遷移

実務での活用シーン

window.openを使ったページ遷移

実務での活用シーン

anchorタグとJavaScriptイベントの組み合わせ

実務での活用シーン

History API（pushState、replaceState）を使ったページ遷移

実務での活用シーン

ページ遷移の実務的な利用シーン

通常のページ移動

フォーム送信時の挙動

実務での活用シーン

シングルページアプリケーション (SPA)

SPAにおけるページ遷移のメリット

複数ステップの画面切り替え（Wizard形式）

ページ遷移を実装する際の注意点

セキュリティ的な注意

パフォーマンス最適化

ページタイトルやメタ情報の更新

システムの規模に応じた判断

実際のコード例：History APIを活用した簡単なSPA風の切り替え

ここでのポイント

まとめ

利用シーンを明確に

ユーザー体験とパフォーマンス

セキュリティ

JavaScriptをマスターしよう

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説