以下のリンクをクリックすると、それぞれのセクションにジャンプできます。

• window.locationとは
• window.location.protocol
• window.location.host
• window.location.hostname
• window.location.port
• window.location.pathname
• window.location.search
• window.location.hash

window.locationとは

window.locationは、現在のWebページのURL情報を取得したり、別のURLにリダイレクトしたりするために使用されるオブジェクトです。

例えば、以下のコードを実行すると現在のURL情報をコンソールに出力します。

console.log(window.location);

このオブジェクトには、URLの各部分にアクセスするためのプロパティが含まれています。それらを以下で詳しく解説します。

window.location.protocol

プロパティwindow.location.protocolは、URLのプロトコル部分を示します。たとえば、HTTPやHTTPSが含まれます。

例:

// 現在のプロトコルを取得
console.log(window.location.protocol); // 例: "https:"
    

使用例: セキュリティのため、HTTP接続の場合にHTTPSにリダイレクトする。

if (window.location.protocol === "http:") {
    window.location.protocol = "https:";
}
    

window.location.host

プロパティwindow.location.hostは、ホスト名とポート番号を含む部分を返します。

例:

// ホスト名とポート番号を取得
console.log(window.location.host); // 例: "example.com:8080"
    

ポート番号が明示されていない場合、デフォルトのポート番号（80や443）は省略されます。

window.location.hostname

window.location.hostnameは、ポート番号を除いたホスト名部分を返します。

例:

// ホスト名を取得
console.log(window.location.hostname); // 例: "example.com"
    

ポート番号が必要な場合はwindow.location.hostを使用します。

window.location.port

プロパティwindow.location.portは、現在のURLで指定されているポート番号を返します。

例:

// ポート番号を取得
console.log(window.location.port); // 例: "8080"
    

ポート番号が省略されている場合、空の文字列を返します。

window.location.pathname

window.location.pathnameは、URLのパス部分（スラッシュ以降、クエリ文字列やハッシュを除く）を返します。

例:

// パス部分を取得
console.log(window.location.pathname); // 例: "/about/us"
    

使用例: 特定のパスに基づいて動作を変更する。

if (window.location.pathname === "/login") {
    console.log("ログインページです");
}
    

window.location.search

window.location.searchは、クエリ文字列部分（”?”以降）を返します。

例:

// クエリ文字列を取得
console.log(window.location.search); // 例: "?user=123&lang=ja"
    

使用例: クエリパラメータを解析する。

const params = new URLSearchParams(window.location.search);
console.log(params.get("user")); // 例: "123"
    

window.location.hash

window.location.hashは、URLのハッシュ部分（”#”以降）を返します。

例:

// ハッシュ部分を取得
console.log(window.location.hash); // 例: "#section2"
    

使用例: ページ内リンクの現在位置を取得する。

if (window.location.hash === "#contact") {
    console.log("コンタクトセクションです");
}