【JavaScript】URLを遷移させる方法

2024.08.01

JavaScriptでページを別のURLへ移動させる方法はいくつもありますが、意味のある選択肢は実は数種類だけです。「履歴を残すか」「再読み込みするか」「新しいタブか」で選びます。

この記事では、よく似た手段を整理しつつ、用途別の使い分けと安全に遷移するための注意点まで解説します。

この記事の結論：通常の遷移は location.href = URL、履歴を残さないなら location.replace(URL)、新しいタブは window.open(URL, "_blank", "noopener")、再読み込みせずURLだけ変える（SPA）なら history.pushState() を使います。
スポンサーリンク

ページを遷移する（location.href）

最も一般的なのは location.href に新しいURLを代入する方法です。通常のリンククリックと同じく、ページを読み込み直して遷移し、履歴にも残ります。

JavaScript：URLへ遷移
// 絶対URL
location.href = "https://example.com";

// 自サイト内なら相対パスでもOK
location.href = "/mypage";
これらはすべて同じ動作です：location.assign("URL") と window.location = "URL" も、location.href = "URL" とまったく同じ（遷移＋履歴追加）です。どれを使っても構いませんが、意図が明確な location.href が読みやすくおすすめです。

履歴を残さず遷移する（location.replace）

現在のページを履歴に残したくないときは location.replace() を使います。遷移後に「戻る」ボタンで前のページに戻れなくなります。

JavaScript：履歴を残さず遷移
location.replace("https://example.com");

ログイン後のリダイレクトなど、戻ってほしくない遷移に向いています（ログイン画面に戻って二重ログインになるのを防ぐ、など）。

新しいタブで開く（window.open）

同じタブではなく新しいタブ・ウィンドウで開くには window.open() を使います。セキュリティのため、第3引数に "noopener" を指定します。

JavaScript：新しいタブで開く
window.open("https://example.com", "_blank", "noopener");
noopenerを付ける理由：noopener を付けないと、開いた先のページから window.opener 経由で元のページを操作される（タブナビング）恐れがあります。外部サイトを新しいタブで開くときは必ず指定してください。

ページ内の位置へ移動する（location.hash）

同じページ内の特定の位置へスクロールしたいときは location.hash を使います。指定したIDを持つ要素までスクロールします（ページの再読み込みは起きません）。

JavaScript：id=”section1″ の位置へ
location.hash = "section1";
// URLが ...#section1 になり、その要素までスクロールする

再読み込みせずURLだけ変える（pushState / replaceState）

SPA（ページ全体を読み込み直さないアプリ）では、history.pushState() でURLだけを変更します。pushState は履歴を追加、replaceState は現在の履歴を置き換えます。

JavaScript：URLだけ変更する
// 履歴を追加してURLを変える
history.pushState({ page: 1 }, "", "/new-url");

// 現在の履歴を置き換える
history.replaceState({ page: 1 }, "", "/new-url");
注意：pushStateは「遷移」しません：pushState はURLを書き換えるだけで、ページの中身は自動では変わりません。表示の更新は自分で行い、戻る・進むに対応するには popstate イベントで画面を復元します。戻る・進むの実装は戻る・進むボタンを実装する方法、ナビゲーション制御はブラウザの戻るボタンを無効化する方法で詳しく解説しています。

ページをリロードする（location.reload）

同じページを再読み込みするだけなら location.reload() です。

JavaScript：リロード
location.reload();

フォーム送信後にリロードすると「再送信しますか？」の警告が出ることがあります。それを避けたいときは、送信後に location.replace() で結果ページへ置き換え遷移するのが定番（PRGパターン）です。

注意：ユーザー入力をそのまま遷移先にしない（オープンリダイレクト）

?next=... のようなURLパラメータをそのまま遷移先に使うと、外部の悪意あるサイトへ誘導される「オープンリダイレクト」の脆弱性になります。自サイト内のURLかどうかを検証してから遷移しましょう。

JavaScript：自サイト内のURLだけ許可する
function safeInternalUrl(next) {
  try {
    const url = new URL(next ?? "", location.origin);
    // 同じオリジンのときだけパスを返す。外部URLは "/" にフォールバック
    return url.origin === location.origin
      ? url.pathname + url.search + url.hash
      : "/";
  } catch {
    return "/"; // 不正なURLはトップへ
  }
}

const next = new URLSearchParams(location.search).get("next");
location.href = safeInternalUrl(next);

new URL() で現在のオリジンを基準に解決し、同一オリジンか確認するのが確実です。これなら //evil.com や https://evil.com などの外部URLを弾けます。URLパラメータの取得はURLのパラメータを取得する方法、現在のURL情報の取得は現在のURLを取得する方法を参考にしてください。

よくある質問（FAQ）

QJavaScriptでページを別URLに移動するには？
Alocation.href = "https://example.com" で遷移できます。location.assign() や window.location = "..." も同じ動作です。履歴を残したくない場合は location.replace() を使います。
Q新しいタブでURLを開くには？
Awindow.open("https://example.com", "_blank", "noopener") で新しいタブで開きます。noopener を付けて、開いた先から元ページを操作されるタブナビングを防ぎましょう。
Q現在のページをリロードするには？
Alocation.reload() でリロードできます。フォーム再送信の警告を避けたいときは、送信後に location.replace() で結果ページへ置き換え遷移する方法（PRGパターン）が有効です。
Qhref / assign / replace の違いは？
Ahref と assign は遷移して履歴に残す（同じ動作）、replace は履歴に残さず置き換える（戻れなくなる）違いがあります。SPAでURLだけ変えたいなら history.pushState() を使います。

まとめ

URL遷移は、通常は location.href（assign や window.location= も同じ）、履歴を残さないなら location.replace、新しいタブなら window.open(..., "noopener")、再読み込みせずURLだけ変えるなら history.pushState、と使い分けます。

pushState はURLを変えるだけで中身は自分で更新する点、そしてユーザー入力を遷移先にする場合はオープンリダイレクトに注意する点を押さえておきましょう。