JavaScriptのlocation.hrefを使ったページ遷移方法｜リダイレクト・注意点

location.hrefとは

locationオブジェクトの基本概念

locationオブジェクトは、現在ブラウザに表示されているページのURLに関する情報を持つオブジェクトです。windowオブジェクトのプロパティとして提供されており、URLの取得・変更・ページ遷移の制御に使われます。

locationオブジェクトが持つ主なプロパティは以下の通りです。

hrefプロパティの役割と意味

location.hrefは現在のページの完全なURL文字列を取得・設定するプロパティです。

// 現在のURLを取得（読み取り）
console.log(location.href);
// 出力例: "https://example.com/page?id=1#section"

// URLを設定すると（書き込み）ページが遷移する
location.href = "https://example.com/other-page";

読み取りと書き込みの両方ができる点が特徴です。値を設定するとブラウザが指定したURLに移動します。

window.locationとの関係

window.locationとlocationは同じオブジェクトを指しています。ブラウザのJavaScript環境ではwindowがグローバルオブジェクトであるため、window.プレフィックスは省略可能です。

// 以下の3つはすべて同じ意味
window.location.href = "https://example.com";
location.href = "https://example.com";
window.location = "https://example.com";  // locationオブジェクト自体に代入も可能

// 現在のURLの確認（すべて同じ結果）
console.log(window.location.href === location.href); // true

locationオブジェクトの各プロパティの詳細な仕様はこちらの記事も参考になります。

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

別ページへの移動方法

location.href = “URL”; の基本例

最もシンプルなページ遷移の実装です。location.hrefに移動先のURLを文字列で代入するだけで動作します。

// 絶対URL（外部サイトへの遷移）
location.href = "https://example.com/";

// 絶対URL（同一サイト内の別ページへ）
location.href = "https://example.com/about";

// 相対URL（同一サイト内・カレントディレクトリ基準）
location.href = "about.html";
location.href = "./products/list.html";
location.href = "../index.html";

// パスのみの指定（同一オリジン内）
location.href = "/contact";
location.href = "/products?category=books";

// ハッシュ（アンカー）でページ内の特定位置に移動
location.href = "#section-2";

Tips： 同一サイト内の遷移には相対URLまたはパスのみを使うことで、ドメインが変わっても動作するコードになります。

現在のページをリロードする方法

location.href = location.href; の使い方

現在のURLを自分自身に設定することでページを再読み込みできます。より明示的な方法としてlocation.reload()もあります。

// location.hrefを使ったリロード
location.href = location.href;

// より明示的なリロード方法（推奨）
location.reload();

// 強制リロード（キャッシュを無視）
// ※ 一部ブラウザでは通常のreload()と同じ動作になる場合がある
location.reload(true);

リダイレクトの応用

条件分岐でのページ切り替え例

ユーザーの状態やデータに応じて遷移先を動的に切り替えるパターンです。

// ログイン状態によるリダイレクト
const isLoggedIn = checkLoginStatus(); // ログイン確認関数

if (isLoggedIn) {
  location.href = "/dashboard";  // ダッシュボードへ
} else {
  location.href = "/login";       // ログインページへ
}

// ユーザーロールによる振り分け
const userRole = getUserRole(); // "admin" | "user" | "guest"

switch (userRole) {
  case "admin":
    location.href = "/admin/panel";
    break;
  case "user":
    location.href = "/mypage";
    break;
  default:
    location.href = "/";
    break;
}

// クエリパラメーターを付けて遷移
const productId = 123;
location.href = `/products?id=${productId}`;

// 一定時間後にリダイレクト（タイマー使用）
setTimeout(() => {
  location.href = "/home";
}, 3000); // 3秒後にトップページへ

location.hrefと他のlocationプロパティの違い

location.assign()との違い

location.assign()はlocation.hrefの代入とほぼ同じ動作をします。どちらもブラウザの履歴に新しいエントリを追加してページ遷移します。

// 以下の2つは同じ動作
location.href = "https://example.com/new-page";
location.assign("https://example.com/new-page");

// assign()は無効なURLに対してエラーを投げる
try {
  location.assign("javascript:void(0)"); // セキュリティ制限によりエラー
} catch (e) {
  console.error("無効なURL:", e);
}

location.replace()との違い

location.replace()はブラウザの履歴に新しいエントリを追加せず、現在のページを置き換えてページ遷移します。遷移後に「戻る」ボタンを押しても元のページに戻れません。

// replace()は履歴を置き換える（戻れない）
location.replace("https://example.com/new-page");

// 使い分けの例
// ログインページからダッシュボードへ（戻らせたくない場合）
location.replace("/dashboard");

// 通常のページ遷移（戻れる必要がある場合）
location.href = "/products";

location.replace()とlocation.hrefの履歴管理の違いはこちらの記事でも詳しく解説されています。

履歴への影響（戻るボタンとの関係）

3つのページ遷移方法の履歴への影響をまとめます。

ログインページからダッシュボードへの遷移など、「戻ってほしくない」ページ遷移にはlocation.replace()を使うのが正しい実装です。location.hrefを使うと戻るボタンでログインページに戻れてしまいます。

location.hrefを使う際の注意点

クロスドメインの制限

location.hrefでのページ遷移自体はクロスドメインでも可能です。ただし、異なるオリジンのlocationオブジェクトを操作しようとするとセキュリティエラーが発生します。

// 同一オリジン内の遷移（問題なし）
location.href = "https://example.com/other-page";

// 別オリジンへの遷移（問題なし）
location.href = "https://other-site.com/";

// クロスオリジンのiframe内のlocationを操作（エラーになる）
const iframe = document.getElementById("myIframe");
try {
  // iframe内が別オリジンの場合、アクセス不可
  iframe.contentWindow.location.href = "https://example.com"; // SecurityError
} catch (e) {
  console.error("クロスオリジンエラー:", e.message);
}

未確認のURLを設定するリスク

ユーザー入力や外部データをそのままlocation.hrefに設定すると、オープンリダイレクト脆弱性を生む可能性があります。

// 危険なパターン：URLパラメーターをそのまま使用
const params = new URLSearchParams(window.location.search);
const redirectUrl = params.get("redirect");
location.href = redirectUrl; // フィッシング攻撃に悪用される可能性がある

// 安全なパターン：ホワイトリストで検証してから使用
const ALLOWED_PATHS = ["/home", "/products", "/contact"];

function safeRedirect(path) {
  if (ALLOWED_PATHS.includes(path)) {
    location.href = path;
  } else {
    location.href = "/"; // 許可されていない場合はトップへ
    console.warn("不正なリダイレクト先:", path);
  }
}

const redirectPath = params.get("redirect");
safeRedirect(redirectPath);

ユーザー入力や外部データをそのままlocation.hrefに設定することは避けてください。必ずホワイトリストによる検証または同一オリジンかどうかの確認を行ってください。

ページ遷移時のデータ保持や状態管理

location.hrefでページ遷移すると、JavaScriptの変数やメモリ上のデータはすべてリセットされます。遷移後もデータを保持したい場合は適切な手段を選択します。

// データを保持しながらページ遷移する方法

// 方法1：URLクエリパラメーターで渡す
const userId = 123;
const userName = encodeURIComponent("田中太郎");
location.href = `/profile?id=${userId}&name=${userName}`;

// 方法2：sessionStorageに保存してから遷移
sessionStorage.setItem("formData", JSON.stringify({ name: "田中", age: 30 }));
location.href = "/confirmation";

// 遷移先で取得
const data = JSON.parse(sessionStorage.getItem("formData"));

// 方法3：localStorageに保存（セッションをまたいで保持）
localStorage.setItem("userToken", "abc123");
location.href = "/dashboard";

// 遷移先で取得
const token = localStorage.getItem("userToken");

応用例

ボタンやリンククリックでページ遷移

ボタン要素にクリックイベントを設定してページ遷移を実装する基本パターンです。ボタンクリックでのlocation.href活用例はこちらの記事も参考になります。

// HTMLボタンのクリックイベントでページ遷移
document.getElementById("toProductsBtn").addEventListener("click", () => {
  location.href = "/products";
});

// インラインイベントハンドラ（HTML側での設定）
// <button onclick="location.href='/about'">会社概要へ</button>

// 複数のボタンを管理する例
const navButtons = document.querySelectorAll("[data-href]");
navButtons.forEach(button => {
  button.addEventListener("click", (e) => {
    const url = e.currentTarget.dataset.href;
    if (url) {
      location.href = url;
    }
  });
});

// HTML例
// <button data-href="/products">商品一覧</button>
// <button data-href="/contact">お問い合わせ</button>

フォーム送信後のリダイレクト

フォームの送信処理が完了した後に確認ページや完了ページへリダイレクトする実装例です。フォーム送信後のリダイレクト実装の詳しい解説はこちらの記事も参考になります。

// フォーム送信後のリダイレクト
document.getElementById("contactForm").addEventListener("submit", async (e) => {
  e.preventDefault(); // デフォルトの送信を止める

  const formData = new FormData(e.target);

  try {
    const response = await fetch("/api/contact", {
      method: "POST",
      body: formData
    });

    if (response.ok) {
      // 送信成功：完了ページへ（戻らせない場合はreplace）
      location.replace("/contact/complete");
    } else {
      // 送信失敗：エラーページへ
      location.href = "/contact/error";
    }
  } catch (error) {
    console.error("送信エラー:", error);
    location.href = "/contact/error";
  }
});

条件による自動リダイレクト

ページ読み込み時にユーザーの状態を確認して自動リダイレクトするパターンです。

// DOMContentLoaded後に認証チェックを実行
document.addEventListener("DOMContentLoaded", () => {
  const token = localStorage.getItem("authToken");
  const currentPath = location.pathname;

  // 保護されたページへのアクセス制御
  const protectedPaths = ["/dashboard", "/mypage", "/admin"];
  const isProtected = protectedPaths.some(path => currentPath.startsWith(path));

  if (isProtected && !token) {
    // 未認証ユーザーをログインページへリダイレクト
    // 元のURLをパラメーターで渡して、ログイン後に戻れるようにする
    const returnUrl = encodeURIComponent(location.href);
    location.replace(`/login?return=${returnUrl}`);
    return;
  }

  // ログイン済みユーザーがログインページにアクセスした場合
  if (currentPath === "/login" && token) {
    const params = new URLSearchParams(location.search);
    const returnUrl = params.get("return");
    location.replace(returnUrl || "/dashboard");
  }
});

シングルページアプリでの一部活用方法

SPAではルーティングをJavaScriptで管理するため、location.hrefによる完全なページ遷移は通常行いません。ただし、外部サイトへの遷移や認証系のリダイレクトにはlocation.hrefが使われます。

// SPAでのlocation.href活用場面

// 1. 外部サービスのOAuth認証ページへ
const clientId = "your_client_id";
const redirectUri = encodeURIComponent("https://yourapp.com/callback");
location.href = `https://accounts.google.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code`;

// 2. SPA内でのハッシュルーティング
location.href = "#/products";  // ハッシュのみ変更（ページ再読み込みなし）
location.hash = "/products";   // 同じ意味

// 3. React Router / Vue Router での完全リダイレクト
// ※ SPA内のルーティングはhistory.pushState()を使うのが推奨
// 以下は外部リダイレクトが必要な場合のみ使用
const handleLogout = () => {
  localStorage.removeItem("authToken");
  location.href = "/login"; // SPAのリセットを伴う場合は完全遷移
};

// 現在のURLの情報を取得してルーティングに活用
const currentHash = location.hash;     // "#/products"
const currentPath = location.pathname; // "/app"
const currentQuery = location.search;  // "?page=1"

また、JavaScriptを使ったWeb開発の実践ガイドはkakiro-webでも発信しています。

まとめ

location.hrefは最も基本的なJavaScriptのページ遷移手段

location.hrefはURLを代入するだけでページ遷移が実現できる、JavaScriptの最もシンプルなページ遷移手段です。現在のURLの取得・別ページへの遷移・条件分岐によるリダイレクトなど、Webアプリケーション開発の様々な場面で活用できます。

assignやreplaceとの使い分けで履歴管理が可能

• location.href / location.assign()： 履歴に追加される。通常のページ遷移・戻るボタンを使わせたい場面に使う
• location.replace()： 履歴を置き換える。ログイン後リダイレクト・エラーページなど戻らせたくない場面に使う
• location.reload()： 現在のページを再読み込みする場面に使う
• 遷移の意図を明示したい場合はassign()を使うとコードの可読性が上がる

クロスドメインや状態保持の注意点を理解して活用

ユーザー入力をそのままlocation.hrefに設定するオープンリダイレクト脆弱性を避けるため、URLは必ずホワイトリストで検証してください。またページ遷移でJavaScriptの状態はリセットされるため、データの引き継ぎにはURLパラメーター・sessionStorage・localStorageを適切に使い分けることが、堅牢なWebアプリケーション実装への鍵です。