JavaScriptのwindow.locationとは？Locationオブジェクトの主なプロパティを徹底解説

window.locationとは

Window.locationは読み取り専用のプロパティで、現在表示しているドキュメントのURL情報を保持するLocationオブジェクトを返します。

Locationインターフェースは、そのオブジェクトがリンクされている場所（URL）を表します。locationオブジェクトには、以下のような便利なプロパティが用意されています。

locationオブジェクトの主なプロパティ一覧

location.href

URL全体を含む文字列（DOMString）です。この値を変更すると、関連付けられたドキュメントが新しいページへ遷移します。また、関連ドキュメントとは異なるオリジンから設定することも可能です。

location.protocol

URLのプロトコルスキームです。末尾のコロン「:」を含みます（例：「https:」）。

location.host

ホスト情報です。ホスト名、コロン「:」、およびポート番号で構成されます（例：「example.com:8080」）。

location.hostname

URLのドメイン名（ホスト名）のみを返します。

location.port

URLのポート番号です。ポートが明示的に指定されていない場合は空文字列になります。

location.pathname

先頭のスラッシュ「/」に続くURLのパス部分です。

location.search

クエスチョンマーク「?」に続くパラメータ（クエリ文字列）です。モダンブラウザではURLSearchParamsやURL.searchParamsを利用することで、クエリ文字列からパラメータを簡単に解析できます。

location.hash

ハッシュ記号「#」に続くフラグメント識別子（ページ内アンカー）です。

location.username

ドメイン名の前に指定されたユーザー名です。

location.password

ドメイン名の前に指定されたパスワードです。

使用例

実際のコードでは、次のようにして現在のURL情報を取得したり、ページをリダイレクトしたりできます。

// 現在のページのURL全体を取得
console.log(window.location.href);

// 現在のドメイン名を取得
console.log(window.location.hostname);

// 別のページへリダイレクト
window.location.href = 'https://example.com';

このようにwindow.locationを使いこなすことで、URLの解析やページ遷移の制御を柔軟に行うことができます。