JavaScriptで現在のページのURLを取得する方法

window.location.hrefでURLを取得する基本

ブラウザで現在表示しているWebページのURLを取得するには、window.location.hrefプロパティを使用します。このプロパティには、プロトコル（https://）から始まる完全なURLが文字列として格納されています。

以下のコードをブラウザの開発者ツール（コンソール）に入力してEnterキーを押すと、現在のページのURLを簡単に確認できます。

var currentURL = window.location.href;
console.log(currentURL);

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

locationオブジェクトには、URLの各部分を個別に取得できる便利なプロパティが用意されています。用途に応じて使い分けるとよいでしょう。

• window.location.href：完全なURL全体
• window.location.origin：プロトコルとドメイン（例：https://example.com）
• window.location.host：ホスト名とポート番号
• window.location.hostname：ドメイン名のみ
• window.location.pathname：パス部分
• window.location.search：クエリ文字列（?以降）
• window.location.hash：ハッシュフラグメント（#以降）

具体的な使用例

たとえば、現在のページが https://example.com/blog/post?id=123#section である場合、各プロパティは次のような値を返します。

console.log(window.location.href);     // "https://example.com/blog/post?id=123#section"
console.log(window.location.origin);   // "https://example.com"
console.log(window.location.hostname); // "example.com"
console.log(window.location.pathname); // "/blog/post"
console.log(window.location.search);   // "?id=123"
console.log(window.location.hash);     // "#section"

URLの取得は、ページの状態に応じた処理の分岐、SNSシェアボタンの実装、アクセス解析など、さまざまな場面で活用されるJavaScriptの基本的なテクニックです。window.location.hrefの使い方をマスターしておくと、Web開発の幅が大きく広がります。