JavaScriptでページをリダイレクトする2つの方法！location.hrefとreplaceの違いを解説

Webページのリダイレクトには、HTMLのmetaタグを使ったクライアントサイドの方法や、HTTPリダイレクトを使ったサーバーサイドの方法など、複数の手段があります。本記事では、その中でもJavaScriptを使ってページをリダイレクトする方法について詳しく解説します。

JavaScriptでリダイレクトを行う2つの方法

JavaScriptでページをリダイレクトするには、主に2つの方法があります。どちらもwindowオブジェクトに含まれるlocationオブジェクトを使用します。

1. location.hrefを使う方法

1つ目は、locationオブジェクト（windowオブジェクトの一部）が持つhrefプロパティを使う方法です。やり方は非常にシンプルで、location.hrefにリダイレクト先のURLを代入するだけです。以下は、ページ読み込み時に実行される関数内でリダイレクト処理を行う例です。

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body onload=handleRedirect("https://www.careerkarma.com/blog/html")>
     https://www.careerkarma.com/blog/html へ移動しています。
     5秒以内にリダイレクトされない場合は、<a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">こちらのリンク</a>をクリックしてください。
 </body>
 <script>
   const handleRedirect = (url) => {
     location.href = url;
   }
 </script>
</html>

コードのポイントを順に見ていきましょう。まず、ドキュメントの最後、bodyタグの直前にscriptタグを追加し、そこにJavaScriptのコードを記述しています。handleRedirectという関数はurlという引数を受け取り、その値をlocation.hrefに代入することでリダイレクトを実現します。

次に、bodyタグにはonloadイベントを設定しています。このonloadイベントは、ページの読み込みが完了したタイミングで、割り当てられたJavaScript関数を実行します。ここでは、リダイレクト先のURLを引数として渡しているため、ページが表示されると同時に指定したURLへ即座に遷移します。

リダイレクトまでに少し時間差を持たせたい場合は、setTimeout関数を使うと便利です。以下のように記述します。

const handleRedirect = (url) => {
     setTimeout(() => {
       location.href = url;
     }, 2000);
   }

この例では、2000ミリ秒（2秒）経過した後にリダイレクトが実行されます。それ以外の部分は変更する必要がありません。

なお、location.hrefを使う方法では、元のページがブラウザの履歴（historyスタック）に残るため、ユーザーはブラウザの「戻る」ボタンで前のページに戻ることができます。もし履歴を残さずにURLを置き換えたい場合は、次に紹介するreplaceメソッドを使用しましょう。

2. location.replace()を使う方法

先ほどの方法がlocationオブジェクトのプロパティに新しいURLを「代入」していたのに対し、location.replace()はメソッドであり、現在のURLを指定したURLに「置き換える」という動作を行います。

このメソッドは、元のURLをブラウザの履歴スタックに残しません。つまり、リダイレクト先のURLが元のページの履歴を上書きするため、「戻る」ボタンでリダイレクト前のページには戻れません。具体的なコードは以下の通りです。

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body onload=location.replace("https://www.careerkarma.com/blog/html")>
     https://www.careerkarma.com/blog/html へ移動しています。
     5秒以内にリダイレクトされない場合は、<a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">こちらのリンク</a>をクリックしてください。
 </body>
</html>

ご覧のとおり、この1行だけでリダイレクトが完結するため、scriptタグはまったく必要ありません。ドキュメントが読み込まれるとlocation.replaceメソッドが実行され、括弧内で指定したサイトへ自動的に遷移します。

location.hrefとlocation.replace()の比較まとめ

項目	location.href	location.replace()
種類	プロパティ（代入）	メソッド（呼び出し）
履歴への影響	元のページが履歴に残る	元のページが履歴から消える
「戻る」ボタン	前のページに戻れる	前のページに戻れない

用途に応じて両者を使い分けることで、より柔軟なページ遷移を実現できます。以上、JavaScriptを使って新しいWebページへリダイレクトする方法でした。

JavaScript関数の使い方を徹底解説！初心者向けステップバイステップガイド

Javaの挿入ソート入門：アルゴリズムの仕組みと実装方法をわかりやすく解説

JavaScriptで別のWebページにリダイレクトする方法を解説
JavaScriptを使えば、ボタンのクリックや特定の条件を満たしたタイミングで、ユーザーを別のWebページへ簡単に誘導（リダイレクト）できます。最も一般的なのは、window.location.href プロパティに移動先のURLを代入する方法です。主なリダイレクトの方法 window.location.href = URL：最もシンプルで広く使われる方法です。 window.location.assign(URL)：hrefと同じ動作をし、ブラウザの履歴にも残ります。 window.location.replace(URL)：現在のページを置き換えるため、「戻る」ボタンで元のページに
JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説
JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="