JavaScriptでURLに移動・リダイレクトする方法：完全ガイド

window.location の値は、ブラウザで現在表示しているURLを表します。JavaScriptではこの値を置き換えることで、別のURLへ移動できます。ユーザーを別のページへリダイレクトしたい場合に便利です。また、assign() メソッドや replace() メソッドを使うこともできます。

ユーザーを別のサイトや更新後のパス名へリダイレクトしたい理由はいくつかあります。最も一般的なのは、認可（authorization）の状態——つまりクライアントがサイトにログインしているかどうか——に応じてリダイレクトを行うケースです。この記事では、JavaScriptを使ってWebページ上でこれを実現する方法を詳しく見ていきます。

JavaScriptでURLに移動する3つの方法

JavaScriptのブラウザ履歴API（History API）を使うと、新しいURLへ移動できます。新しいURLへナビゲートするには、以下のいずれかの方法を使用します。

• window.location に新しい値を代入する
• window.location.assign() メソッドを使う
• window.location.replace() メソッドを使う

この3つの方法は、どれも同じ目的である「別のURLへの移動」を実現できます。それでは、それぞれの方法を順番に見ていきましょう。

window.location に値を代入して移動する

新しいURLへ移動するには、ブラウザのHistory APIが提供する location オブジェクトを使用します。セッション履歴を利用することで、location オブジェクト自体に新しいURLを再代入したり、同じオブジェクトの href プロパティを使ったりできます。

このアプローチの構文は次のとおりです。

window.location = "url";

「url」には、ユーザーに訪問させたいURLを指定します。このコード行が実行されると、JavaScriptによるリダイレクトが開始され、ユーザーがWebブラウザで表示しているページが切り替わります。

実際のコード例を見てみましょう。

const handleClick = (e) => {
      console.log("click")
      window.location = ('https://example.com') 
      // window.location.href = ('https://example.com')
      console.log(window.location)
    }

handleClick() 関数が実行されると、まずJavaScriptコンソールにメッセージが出力されます。その後、コードは新しいURLへリダイレクトを行います。

window.location.assign() メソッド

location オブジェクトには assign() というリダイレクト用メソッドが用意されています。このメソッドは、現在のURLを指定したURLに割り当て、そのURLを履歴スタックに追加します。

履歴スタックとは、ユーザーが閲覧したページの記録のことです（「戻る矢印」ボタンで前のページに戻れる仕組みを思い浮かべてください）。

構文は以下のとおりです。

window.location.assign("url");

先ほどの例とは異なり、この方法では変数（window.location）に値を代入する必要はありません。代わりにメソッドを呼び出すだけで、ユーザーが表示するWebページを変更できます。

履歴スタックは、ブラウザが「戻る」ボタンや「進む」ボタンでどのページへ移動すべきかを記憶しておくための仕組みです。

このメソッドの完全な使用例を見てみましょう。

const handleClick = (e) => {
      console.log("click")
      window.location.assign('https://example.com');      
}

同じサイト内の別のページへリダイレクトしたい場合は、location オブジェクトの pathname プロパティを使用します。

const handleClick = (e) => {
      console.log("click")
      window.location.pathname = ('/newpage.html')
      console.log(window.location)
}

window.location.replace() メソッド

replace() メソッドを使うと、ユーザーが「戻る」ボタンで前のページに戻れないように制御することも可能です。assign() メソッドは直前に閲覧していたページをブラウザ履歴に保存するため、前のページに戻ることができます。一方、replace() メソッドはユーザーを新しいサイトへ移動させると同時に、前のページへ戻れなくします。

replace() メソッドの構文は次のとおりです。

window.location.replace("url");

assign() と同様に、replace() もメソッドであり、引数としてユーザーを誘導したいURLを1つ受け取ります。

カスタム関数と組み合わせれば、メソッド実行時にユーザーが表示するURLを変更できます。

const handleClick = (e) => {
      console.log("click")
      window.location.replace('https://example.com'); 
}

assign() と replace() の違いまとめ

• assign()：移動先のURLを履歴スタックに追加するため、「戻る」ボタンで前のページに戻れる。
• replace()：履歴を残さずにページを置き換えるため、「戻る」ボタンで前のページに戻れない。

まとめ

JavaScriptでURLへ移動する方法は3つあります。window.location への値の代入、window.location.assign() メソッド、そして window.location.replace() メソッドです。「戻る」ボタンでの前ページへのアクセスを許可したい場合は assign() を、履歴を残したくない場合は replace() を使うなど、用途に応じて使い分けるとよいでしょう。

さらにJavaScriptについて学びたい方は、学習ロードマップや初心者〜中級者向けの学習リソース集を活用するのがおすすめです。実際にコードを書きながら、リダイレクト処理の挙動の違いを試してみてください。