HTMLで実際のURLを取得する方法
ウェブページを開発する際、現在のドキュメントのURLを取得する必要がある場合があります。 JavaScriptを使用すると、`document.URL`プロパティを使用して簡単に実現できます。
document.URLプロパティ
HTMLのDOM URLプロパティは、現在のドキュメントの完全なURLを含む文字列を返すために使用されます。この文字列には、(http://)などのHTTPプロトコルも含まれます。
戻り値
`document.URL`プロパティは、ドキュメントの完全なURLを表す文字列値を返します。
例
次の例は、`document.URL`プロパティを使用して、現在のドキュメントのURLを取得して表示する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<title>URLの取得</title>
</head>
<body>
<h2>現在のURL:</h2>
<p id="url"></p>
<script>
document.getElementById("url").innerHTML = document.URL;
</script>
</body>
</html>
このコードを実行すると、"現在のURL:"という見出しの下に、現在のページの完全なURLが表示されます。
URLの構成要素
`document.URL`プロパティは完全なURLを返しますが、URLの個々の構成要素（プロトコル、ホスト名、パスなど）を取得したい場合もあります。 そのためには、`window.location`オブジェクトのプロパティを使用できます。
| プロパティ | 説明 |
|---|---|
window.location.href |
現在のページの完全なURL (document.URLと同じ) |
window.location.protocol |
ページで使用されているプロトコル (例: "http:") |
window.location.host |
ドメイン名とポート番号 (例: "www.example.com:80") |
window.location.hostname |
ドメイン名 (例: "www.example.com") |
window.location.port |
ポート番号 (例: "80") |
window.location.pathname |
URLのパス部分 (例: "/path/to/page.html") |
window.location.search |
クエリ文字列 (例: "?key1=value1&key2=value2") |
window.location.hash |
フラグメント識別子 (例: "#section1") |
よくある質問
1. document.URLとwindow.location.hrefの違いは何ですか？
機能的には、`document.URL`と`window.location.href`はどちらも現在のページの完全なURLを返します。 どちらを使用しても問題ありませんが、`window.location`オブジェクトはURLの他の構成要素にもアクセスできるため、より汎用性の高いオプションと言えます。
2. URLのクエリ文字列から特定のパラメータ値を取得するにはどうすればよいですか？
`window.location.search`プロパティを使用してクエリ文字列を取得し、JavaScriptの組み込み関数または外部ライブラリを使用して解析できます。 例えば、URLSearchParamsインターフェースを使用して、キーと値のペアを簡単に取得できます。
3. JavaScriptを使用してURLを変更するにはどうすればよいですか？
`window.location.href`プロパティに新しいURLを代入することで、現在のページのURLを変更できます。 また、`window.location.assign()`メソッドを使用して、新しいページに移動することもできます。