JavaScriptでページ遷移を簡単に実装する5つの方法

はじめに
●JavaScriptでページ遷移を行う方法
●応用例とサンプルコード
- ○サンプルコード1：カウントダウンタイマーを使った自動ページ遷移
- ○サンプルコード2：選択した項目に応じたページ遷移
●注意点
まとめ

はじめに

この記事を読めば、JavaScriptでページ遷移を簡単に実装することができるようになります。

ページ遷移とは、あるページから別のページに移動することです。

今回はJavaScriptを使ったページ遷移の方法を5つ紹介し、それぞれの方法に対応したサンプルコードを提供します。

また、応用例として、カウントダウンタイマーを使った自動ページ遷移や選択した項目に応じたページ遷移のサンプルコードも紹介します。

●JavaScriptでページ遷移を行う方法

○方法1：window.locationを使用したページ遷移

window.locationを使ってページ遷移をするコードを紹介します。

この例では、ボタンをクリックすることで指定したURLに遷移します。

document.getElementById("button").addEventListener("click", function() {
  window.location.href = "https://www.example.com";
});

○方法2：location.replaceを使用したページ遷移

location.replaceを使ってページ遷移をするコードを紹介します。

この例では、ボタンをクリックすることで指定したURLに遷移し、戻るボタンで元のページに戻れないようにします。

document.getElementById("button").addEventListener("click", function() {
  location.replace("https://www.example.com");
});

○方法3：window.openを使用したページ遷移

window.openを使ってページ遷移をするコードを紹介します。

この例では、ボタンをクリックすることで新しいタブで指定したURLが開きます。

document.getElementById("button").addEventListener("click", function() {
  window.open("https://www.example.com", "_blank");
});

○方法4：HTMLのリンクとJavaScriptを組み合わせたページ遷移

このコードでは、HTMLのリンクとJavaScriptを組み合わせてページ遷移を実行する方法を紹介しています。

この例では、リンクをクリックするとJavaScriptの処理が実行され、指定したURLに遷移します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページ遷移サンプル</title>
</head>
<body>
  <a href="#" id="link">リンクをクリック</a>

  <script>
    document.getElementById("link").addEventListener("click", function(event) {
      event.preventDefault();
      window.location.href = "https://www.example.com";
    });
  </script>
</body>
</html>

○方法5：JavaScriptで動的にリンクを作成してページ遷移

このコードでは、JavaScriptを使って動的にリンクを作成し、ページ遷移する方法を紹介しています。

この例では、ボタンをクリックするとリンクが作成され、そのリンクをクリックすると指定したURLに遷移します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページ遷移サンプル</title>
</head>
<body>
  <button id="create-link">リンクを作成</button>
  <div id="link-container"></div>

  <script>
    document.getElementById("create-link").addEventListener("click", function() {
      const link = document.createElement("a");
      link.href = "https://www.example.com";
      link.textContent = "作成されたリンク";
      document.getElementById("link-container").appendChild(link);
    });
  </script>
</body>
</html>

●応用例とサンプルコード

○サンプルコード1：カウントダウンタイマーを使った自動ページ遷移

このコードでは、カウントダウンタイマーを使って一定時間経過後に自動的にページ遷移する方法を紹介しています。

この例では、10秒後に指定したURLに遷移します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カウントダウンタイマーとページ遷移サンプル</title>
</head>
<body>
  <p id="countdown">10</p>

  <script>
    let countdown = 10;
    const timer = setInterval(function() {
      countdown--;
      document.getElementById("countdown").textContent = countdown;

      if (countdown === 0) {
        clearInterval(timer);
        window.location.href = "https://www.example.com";
      }
    }, 1000);
  </script>
</body>
</html>

○サンプルコード2：選択した項目に応じたページ遷移

このコードでは、ドロップダウンリストから選択した項目に応じて異なるページに遷移する方法を紹介しています。

この例では、選択された項目の値に基づいて指定したURLに遷移します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>選択した項目に応じたページ遷移サンプル</title>
</head>
<body>
  <select id="select-page">
    <option value="">選択してください</option>
    <option value="https://www.example.com/page1">ページ1</option>
    <option value="https://www.example.com/page2">ページ2</option>
    <option value="https://www.example.com/page3">ページ3</option>
  </select>

  <script>
    document.getElementById("select-page").addEventListener("change", function() {
      const selectedValue = this.value;
      if (selectedValue) {
        window.location.href = selectedValue;
      }
    });
  </script>
</body>
</html>

●注意点

ページ遷移によって、現在のページで行われている処理が中断されることがあります。
適切なタイミングでページ遷移を行うように注意してください。
window.location.hrefを使用すると、ブラウザの履歴に遷移先のURLが追加されます。
履歴を残さずにページ遷移を行いたい場合は、window.location.replace()を使用してください。