JavaScript Location オブジェクト：网页 URL を操作する鍵

JavaScript Location 位置オブジェクト

この文章では、JavaScript の Location オブジェクトについて掘り下げ、現在のページの URL 情報の取得、新しいページへのジャンプ、ページのリフレッシュなど、実用的な操作テクニックを学びます。

1. Location オブジェクトとは？

Location オブジェクトは、JavaScript に組み込まれているオブジェクトで、現在のウェブページの URL を取得および変更するために使用されます。 URL の各構成要素（プロトコル、ホスト名、パス、クエリ文字列など）にアクセスするためのプロパティとメソッドを提供します。 Location オブジェクトを使用すると、開発者は現在のウェブページの URL と容易に対話し、ページナビゲーションやデータの受け渡しなどの機能を実現できます。

2. URL 情報の取得

Location オブジェクトは、URL のさまざまな部分を個別に取得するためのプロパティを提供します。

プロパティ	説明
`location.href`	URL 全体を文字列として取得します。
`location.protocol`	URL のプロトコル部分（例： "http:" や "https:"）を取得します。
`location.hostname`	URL のホスト名部分（例： "www.example.com"）を取得します。
`location.port`	URL のポート番号部分（例： "80" や "443"）を取得します。
`location.pathname`	URL のパス部分（例： "/path/to/page.html"）を取得します。
`location.search`	URL のクエリ文字列部分（例： "?key1=value1&key2=value2"）を取得します。
`location.hash`	URL のハッシュ値部分（例： "#section1"）を取得します。


<script>
  console.log(location.href); // URL 全体を出力
  console.log(location.hostname); // ホスト名を出力
  console.log(location.pathname); // パスを出力
  // ... その他のプロパティも同様に取得可能
</script>

3. URL を変更してページをジャンプする

Location オブジェクトを使用して、現在のページの URL を変更し、新しいページにジャンプすることができます。

メソッド	説明
`location.assign(url)`	指定された URL にジャンプします。履歴に残ります。
`location.replace(url)`	指定された URL にジャンプします。履歴には残りません。
`location.href = url`	`location.href` プロパティに新しい URL を代入することでもジャンプできます。


<a href="#" onclick="location.assign('https://www.example.com')">Example.com へジャンプ</a>

4. ページをリフレッシュする

Location オブジェクトを使用して、現在のページをリフレッシュすることができます。

メソッド	説明
`location.reload()`	現在のページをリロードします。
`location.reload(true)`	ブラウザのキャッシュを無視して、サーバーからページを強制的にリロードします。


<button onclick="location.reload()">ページをリロード</button>

5. 注意点

location.replace() メソッドを使用してページをジャンプした後、ユーザーはブラウザの「戻る」ボタンで前のページに戻ることができません。
location オブジェクトの操作を頻繁に行ったり、不適切に使用したりすると、ページのちらつきや読み込みの遅延など、ユーザーエクスペリエンスに影響を与える可能性があります。
ユーザーが入力した URL データを処理する場合は、クロスサイトスクリプティング（XSS）などのセキュリティ上の問題を防ぐために、必ず安全性を検証してください。

まとめ

JavaScript の Location オブジェクトは、開発者にウェブページの URL を操作するための便利なインターフェースを提供します。そのプロパティとメソッドを習得することで、ページナビゲーション、データの受け渡し、その他の URL 関連の機能をより適切に制御できます。

参考文献

Location - Web API | MDN

QA

質問: location.href と location.assign() の違いは何ですか？
回答: location.href は URL を直接変更するプロパティであり、location.assign() は新しい URL に移動するためのメソッドです。 location.assign() を使用すると、ブラウザの履歴に移動が記録されますが、location.href を使用すると、場合によっては記録されないことがあります。
質問: location.reload() を使用してページをリロードしたときに、キャッシュを使用せずにサーバーから最新のデータを取得するにはどうすればよいですか？
回答: location.reload(true) を使用します。これにより、ブラウザはキャッシュを使用せずにサーバーからページを強制的にリロードします。
質問: JavaScript を使用して、現在の URL のクエリパラメータを取得するにはどうすればよいですか？
回答: location.search プロパティを使用してクエリ文字列を取得し、それを解析してパラメータを取得します。 URLSearchParams オブジェクトを使用すると、クエリパラメータの解析と操作が容易になります。