【JavaScript】locationとは？ブラウザURLの操作や使い方を初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

皆さんは、ウェブブラウザのアドレスバーに表示されているURLを、JavaScriptから直接操作できる方法をご存じでしょうか。

JavaScriptのlocationオブジェクト は、ブラウザが表示しているページのURL情報を扱うための便利な機能です。

たとえば、特定のURLにリダイレクトしたり、クエリパラメータ（?param=value など）を取得したり、URLを変更しながらページ遷移なしに画面の状態を制御したりすることができます。

本記事では、JavaScriptで用いられるlocationオブジェクトの概要や、実務での活用場面を初心者向けにわかりやすく解説していきます。

慣れてくると、URLまわりの制御をスムーズに行えるようになるでしょう。

ぜひ、最後まで読んでみてください。

この記事を読むとわかること

  • JavaScriptのlocationオブジェクトとは何か
  • locationオブジェクトを使ったURL操作やリダイレクトの方法
  • クエリパラメータやハッシュの取得と更新の仕組み
  • 実務で想定される利用シーン
  • 注意すべきセキュリティやブラウザ上の制限事項

JavaScriptのlocationオブジェクトとは何か

JavaScriptで ブラウザのURL情報 を扱いたいときに役立つのが locationオブジェクト です。

DOM（Document Object Model）の一部としてブラウザに備わっており、window.location という形でアクセスできます。

URLそのものの取得や、ページ遷移（リダイレクト）、クエリパラメータの読み書きなどを行うのが主な役割です。

初心者の方が最初に混乱しやすいのは、locationオブジェクトのさまざまなプロパティやメソッドの意味合いだと思います。

以下では、まずlocationオブジェクトの基本構造をざっくり見ていきましょう。

locationオブジェクトの主な機能

locationオブジェクトには、多数のプロパティやメソッドが用意されています。

一般的によく使う機能としては、次のようなものが挙げられます。

URLの取得・変更

現在のページのURLを取得し、location.href を書き換えることでページの移動も可能です。

プロトコル、ホスト名、パスの分割取得

location.protocol、location.hostname、location.pathname などを使い、それぞれの要素にアクセスできます。

クエリパラメータやハッシュの取得・設定

location.search や location.hash でURLの末尾に付く部分を扱えます。

リロードやリダイレクト

location.reload() でページの再読み込み、location.replace() で履歴に残さないリダイレクトなどが行えます。

これらを組み合わせることで、ブラウザ操作がより柔軟になります。

次の章では、もう少し具体的にlocationオブジェクトのプロパティを見ていきましょう。

locationオブジェクトのプロパティと基本的な使い方

location.href

URL全体 をあらわす代表的なプロパティです。

現在のページのURLを文字列として取得できるだけでなく、値を代入するとページを移動することもできます。

// 現在のURLを取得
console.log(location.href);

// 別のページへ移動
location.href = "https://example.com/newpage";

たとえば、ユーザーがボタンをクリックしたときに特定のURLへ移動させる場合などに利用します。

実務でも、アクセス制限があるセクションへはログインページにリダイレクトするといった場面で重宝します。

location.protocol

URLの先頭に記載されるプロトコル（http: など）を取得します。

console.log(location.protocol); // "https:"

現代では https: が推奨される場面が多いですが、状況によっては http: が使われることもあるため、環境によっては値が違うことを念頭に置きましょう。

ときどき、通信プロトコルに応じてAPIリクエストのURLを切り替える場面で役立つことがあります。

location.hostname

このプロパティは、ホスト名（ドメイン名）を取得します。

例えば https://example.com/users?id=123 の場合、example.com が取得されます。

console.log(location.hostname); // "example.com"

サーバーサイドで設定されたサブドメイン構成が複雑な場合など、フロントエンド側でホスト名をチェックしたいシーンもあるでしょう。

location.port

ポート番号を取得します。

デフォルトで 80（http）や 443（https）を使う環境だと空文字になる場合もあります。

console.log(location.port); // "8080" など、場合によっては空文字

開発環境で独自のポート番号を使っているケースや、コンテナを用いたローカル開発などで確認が必要な場合に便利です。

location.pathname

サーバー上のパス部分を取得します。

https://example.com/users?id=123 の場合、/users が返ってきます。

console.log(location.pathname); // "/users"

シングルページアプリケーション（SPA）でルーティングを実装する際に、URLパスをトリガーに画面切り替えを行う場面などでよく見かけます。

location.search

クエリパラメータ（?key=value&key2=value2 のような部分）を取得できます。

console.log(location.search); // "?id=123&mode=edit" など

この文字列を解析し、オブジェクト形式に分解してからプログラムの挙動を切り替えるのが一般的です。

実務でも「どのユーザーIDを表示するか」「管理画面かどうかを判定するか」といった形で、多用されます。

location.hash

URLの末尾に付く ハッシュ を表します。

console.log(location.hash); // "#section1" のような値

ページ内の特定要素へスクロールしたい場合や、SPAで画面遷移に使うケースがあるため、ハッシュ自体を柔軟に操作できるのは便利です。

locationを使ったURLの操作

ページのリロード

locationオブジェクトを使ってページをリロード（再読み込み）するには、location.reload() メソッドを使います。

// ページをリロードする
location.reload();

ボタンをクリックすると最新情報を取得したい場合や、動的に内容が変化するページでの更新を強制したい場合に役立ちます。

リダイレクトの方法

冒頭に少し触れたとおり、location.href への代入でリダイレクトが実現できますが、location.replace() を使うと ブラウザの履歴に残さず に移動できます。

// 履歴に追加される
location.href = "https://example.com/newpage";

// 履歴に残らないリダイレクト
location.replace("https://example.com/newpage");

後者は、ブラウザの「戻る」ボタンで前のページに戻れなくなるので、セキュリティ上やユーザーフローを考慮して使い分けることが多いです。

たとえば、ログイン直後の画面では戻るボタンを押されると困るケースがあるため、そのようなときには location.replace() が便利です。

URLの手動変更とhistory操作

SPAなどで画面遷移をする際、実際にはページをリロードしたくない場合があります。

一方でURLだけは変えておきたいケースも多いです。

HTML5以降の history.pushState() や history.replaceState() などを組み合わせると、リロードせずにURLを書き換えられます。

history.pushState({}, "", "/newpath");

locationオブジェクト単独ではなく、historyオブジェクトと一緒に使うことで、より柔軟なURL操作が可能です。

実務では、ユーザーに対してページ遷移が起こったように見せたいけれど、内部処理ではJavaScriptで表示内容を動的に切り替えているケースがよくあるでしょう。

そういったときに history と location をセットで使います。

クエリパラメータを活用した実務例

簡単なパラメータ取得の方法

locationオブジェクトの search プロパティを使うと、クエリパラメータをまるごと取得できます。

ただし、そのままだと文字列で "?id=123&mode=edit" のようになっているため、分割して使う必要があります。

以下のサンプルコードでは、クエリパラメータをオブジェクトに変換する簡易例を示します。

function getQueryParams() {
  const queryString = location.search;
  if (!queryString) return {};

  // 先頭の "?" を取り除いて "&" で分割
  const pairs = queryString.substring(1).split("&");
  const params = {};

  pairs.forEach(pair => {
    const [key, value] = pair.split("=");
    params[key] = decodeURIComponent(value || "");
  });

  return params;
}

// 使い方例
const params = getQueryParams();
console.log(params.id);   // "123"
console.log(params.mode); // "edit"

業務では、例えば「ユーザーIDをもとに、特定のプロフィール情報を表示する」「プレビューか本番モードかをパラメータで判定する」といった用途で使われます。

動的にクエリパラメータを追加して再読み込み

フォームから受け取った入力をURLパラメータに反映させたいケースもあります。

以下の例では、URLに ?search=... のような形でパラメータを付け加えてページをリロードするイメージです。

function setSearchQuery(query) {
  // 新しいクエリパラメータを作成
  const newUrl = `${location.pathname}?search=${encodeURIComponent(query)}`;
  location.href = newUrl;
}

// ユーザーが検索ボックスに入力して検索ボタンを押したタイミングで実行
document.getElementById("search-btn").addEventListener("click", () => {
  const query = document.getElementById("search-input").value;
  setSearchQuery(query);
});

クエリパラメータを利用すると、検索結果ページやフィルタリング状態を共有URLとして扱いやすくなるという利点があります。

ハッシュを利用したコンテンツ切り替え

ハッシュの監視

URLの末尾につく # 以降の部分をハッシュと呼びます。

ハッシュの内容を監視することで、ページの特定のセクションを表示・非表示に切り替えるといったことが可能です。

たとえばSPAで、タブ切り替えやモーダルウィンドウの開閉状態をハッシュで表現し、URLを共有して再現できるようにするケースがあります。

サンプルコード

以下の例は、ハッシュの値に応じて異なるコンテンツを表示する簡単なコード例です。

window.addEventListener("hashchange", () => {
  handleHashChange();
});

function handleHashChange() {
  const hash = location.hash; // 例: "#profile" "#settings" など
  document.querySelectorAll(".content-section").forEach(section => {
    section.style.display = "none";
  });

  if (hash === "#settings") {
    document.getElementById("settings-section").style.display = "block";
  } else {
    // デフォルトはプロフィールを表示
    document.getElementById("profile-section").style.display = "block";
  }
}

// 最初の読み込み時にも呼び出す
handleHashChange();

ハッシュの変更検知には window.addEventListener("hashchange", ...) を使うのが一般的です。

リロードせずにURLのハッシュだけを変えて、画面内容を切り替えるような実装に活用できます。

ハッシュ値はサーバーには送信されず、ブラウザ上でのみ扱われます。 そのため、サーバー側の処理に影響を与えない点も覚えておきましょう。

locationオブジェクトを使う実務での活用例

マルチデバイス切り替え時の自動リダイレクト

ウェブサイトによっては、モバイル端末とPCで異なるページレイアウトを用意している場合があります。

ユーザーがPC用のURLにアクセスしたとき、モバイル端末であれば自動的にモバイル用ページへリダイレクトしたいことがあります。

function redirectIfMobile() {
  const userAgent = navigator.userAgent;
  const isMobile = /iPhone|Android/.test(userAgent);

  if (isMobile && location.hostname === "example.com") {
    // モバイル専用ドメインへリダイレクト
    location.replace("https://m.example.com" + location.pathname + location.search);
  }
}

redirectIfMobile();

このように、locationオブジェクトを使ってホスト名やパスを再設定することで、モバイル専用ページへ素早く誘導できる仕組みが実現できます。

シングルページアプリケーションでのURLハンドリング

実務では、ReactやVueなどのフレームワークを使ったSPAが広く使われています。

これらのフレームワークは内部的に history.pushState() や location を活用し、ページ遷移なしに画面切り替えを行います。

URLを変えてもページがリロードされないのに、あたかも別ページに移動したかのように表示が変わるのは、history APIとlocationオブジェクトが連携しているからです。

表面的にはフレームワーク側のルーティング設定だけを意識していれば十分な場合もありますが、もし低レベルなURL操作に踏み込みたいときにはlocationオブジェクトの理解が欠かせません。

フォーム送信後のパラメータ付きリダイレクト

例えば検索フォームや問い合わせフォームが送信された後、結果表示ページへユーザーを飛ばしたいケースでは、locationオブジェクトにパラメータを組み込んでリダイレクトできます。

function redirectAfterFormSubmit(formValues) {
  // formValuesは {name: "Alice", age: "20"} などを想定
  const query = Object.keys(formValues)
    .map(key => `${key}=${encodeURIComponent(formValues[key])}`)
    .join("&");

  const newUrl = `/result?${query}`;
  location.href = newUrl;
}

こうすることで、結果画面に必要な情報をURLパラメータとして渡し、同ページで再度読み取りが可能になります。

複数の画面にわたってフォーム情報を保持したいケースでも役に立ちます。

注意すべきポイントとセキュリティ面

クロスサイトスクリプティング（XSS）

locationオブジェクトのプロパティを使ってクエリパラメータなどを表示ページに反映させる場合、入力値の検証やエスケープを行わないとXSSのリスクが生じます。

たとえば、攻撃者が仕組んだスクリプトをURLに仕込み、それを表示ページがそのまま実行してしまう可能性があります。

セキュリティを意識しないで実装すると、意図せず危険なコードを走らせてしまうかもしれません。

HTTPSの利用

locationプロトコルが http: の場合、通信が暗号化されていません。

重要情報をURLパラメータに含めて送信するシチュエーションでは、https: の利用が強く望まれます。

もし開発環境やテスト環境では http: で動かしていても、本番環境では常に https: にするように注意しましょう。

これによって、URLに含まれるパラメータが盗聴されるリスクが大幅に減らせます。

ブラウザ上のポップアップブロック

locationを使って自動的に別サイトへ移動させるコードを書く場合、ユーザーのブラウザによってはポップアップブロックの対象になることがあります。

とくに window.open() と組み合わせるケースでは注意が必要です。

ユーザーが明確にクリックアクションを起こした場合は問題ないですが、読み込み完了後に勝手にリダイレクトを繰り返すと、迷惑行為とみなされる可能性があります。

そのため、ユーザー体験を損なわないように適切なタイミングや理由づけでリダイレクト処理を設計しましょう。

よくあるトラブルシューティング

ローカル開発環境でポート番号が空になる

ブラウザによっては、URLにポート番号が含まれない形でアクセスしていると location.port が空文字になる場合があります。

開発時に localhost:3000 など特定のポートを使う場合は問題ないですが、設定によっては localhost だけでアクセスするときもあるでしょう。

いずれにせよ location.port が必ず値を返すわけではないという点を理解しておくと、デバッグ時に混乱が少なくなります。

リダイレクト後に戻るボタンで意図しないページへ遷移

location.href と location.replace() の違いを把握せずに使うと、ユーザーが「戻る」ボタンを押したときに混乱を招くことがあります。

location.replace() は履歴を残さないので、戻るボタンで１つ前のページに戻れなくなることを理解しておきましょう。

ユーザーフローに合わせて、どちらを使うべきかを検討するのが大切です。

この記事のまとめに入る前に

これまで、JavaScriptのlocationオブジェクトを中心に、URL操作、クエリパラメータ、ハッシュの利用方法や実務での応用例などを見てきました。

ブラウザを扱う上で非常に基本的な要素ではありますが、意外と深掘りすると色々な活用シーンが存在するのがわかるのではないでしょうか。

ここでは セキュリティ面やブラウザ依存の挙動 を考慮することも、とても重要だということを繰り返しお伝えしてきました。

locationオブジェクトは、多くのJavaScriptフレームワークでも内部的に使われています。 低レベルな挙動を理解しておくことで、デバッグや問題解決がしやすくなります。

まとめ

JavaScriptの locationオブジェクト は、ブラウザ上のURLに関するあらゆる情報を取り扱える便利な仕組みです。

具体的には以下のようなことが可能です。

  • location.href や location.replace() を使ったリダイレクトやページ移動
  • location.search を活用したクエリパラメータの取得・設定
  • location.hash を応用したハッシュルーティング
  • history APIとの組み合わせによるページ遷移の柔軟なコントロール

これらをうまく使いこなすと、初心者の方でも実装の幅が格段に広がります。

実務においても「URLをどのように操作するか」は開発チーム全体の設計に関わり、ユーザー体験を大きく左右するポイントです。

ぜひ今回学んだ内容を足がかりに、ブラウザの仕組みやJavaScriptの画面遷移ロジックを深掘りしてみてください。

今後、ウェブアプリケーションのさまざまな場面で「どうやってURLを扱うか」という疑問が生まれたとき、locationオブジェクトを思い出すと解決へのヒントが見つかるでしょう。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説