JavaScript - Location Object

こんにちは、Web開発者の卵さんたち！今日は、JavaScriptの中でも最も有用で興味深いオブジェクトの1つであるLocationオブジェクトについて深く掘り下げます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのを楽しみにしています。コーヒー（またはお好みでティー）を1杯取り、始めましょう！

Window Location Object

Locationオブジェクトは、あなたのWebブラウザのGPSのようなものです。ブラウザウィンドウの現在のURLに関する情報を保持し、そのURLを変更するメソッドを提供します。インターネットの広大な海の中であなたのナビゲーターのように考えてください！

Locationオブジェクトにアクセスするためには、window.locationまたは単にlocationを使用します。以下の簡単な例を見てみましょう：

console.log(window.location);
console.log(location); // どちらも同じ結果を返します

このコードをブラウザのコンソールで実行すると、現在のページのURLのすべてのプロパティが表示されます。すごいですね？

JavaScript Location Object Properties

では、Locationオブジェクトの異なるプロパティを分解してみましょう。これらのプロパティは、住所の異なる部分のように、私たちがWeb上での位置を特定するための特定の情報を提供します。

1. href

hrefプロパティは、現在のページの完全なURLを返します。

console.log(location.href);
// 出力例: https://www.example.com/page?id=123#section

2. protocol

このプロパティは、使用されているプロトコル（通常は"http:"または"https:"）を示します。

console.log(location.protocol);
// 出力: https:

3. host

hostプロパティは、ドメイン名とポート番号（指定されている場合）を返します。

console.log(location.host);
// 出力例: www.example.com:8080

4. hostname

hostと似ていますが、hostnameはポート番号なしのドメイン名だけを返します。

console.log(location.hostname);
// 出力: www.example.com

5. port

このプロパティは、URLのポート番号を指定します。

console.log(location.port);
// 出力例: 8080 (またはデフォルトのポートの場合は空)

6. pathname

pathnameプロパティは、URLのパス（ドメイン名の後ろのすべて）を返します。

console.log(location.pathname);
// 出力例: /page

7. search

このプロパティは、URLのクエリ文字列部分（'?'を含む）を返します。

console.log(location.search);
// 出力例: ?id=123

8. hash

hashプロパティは、URLのアンカーパート（'#'を含む）を返します。

console.log(location.hash);
// 出力例: #section

JavaScript Location Object Methods

プロパティを探検したので、Locationオブジェクトと対話するためのメソッドを見てみましょう。これらのメソッドは、私たちのWebブラウザGPSの控件のようなものです。

1. assign()

assign()メソッドは、新しいドキュメントをロードします。

location.assign("https://www.example.com");

これは、新しいURLをアドレスバーに入力してEnterを押すのと同じです。

2. reload()

名前の通り、このメソッドは現在のドキュメントを再読み込みします。

location.reload();

これは、ブラウザのリフレッシュボタンをクリックするのと同じです。

3. replace()

replace()メソッドは、現在のドキュメントを新しいものに置き換えます。

location.replace("https://www.example.com");

replace()とassign()の違いは、replace()はブラウザの履歴に新しいエントリを作成しないため、ユーザーが元のページに戻ることはできません。

Location Object Properties List

以下は、私たちが話し合ったすべてのLocationオブジェクトのプロパティをまとめた表です：

プロパティ	説明
href	完全なURL
protocol	URLのプロトコルスキーム（例: "http:" または "https:"）
host	URLのホスト名とポート番号
hostname	URLのホスト名
port	サーバーがURLに使用するポート番号
pathname	URLのパスとファイル名
search	URLのクエリ部分
hash	URLのアンカーパート

Location Object Methods List

そして、以下はLocationオブジェクトのメソッドをまとめた表です：

メソッド	説明
assign()	新しいドキュメントをロード
reload()	現在のドキュメントを再読み込み
replace()	現在のドキュメントを新しいものに置き換え

そして、ここまでがJavaScriptのLocationオブジェクトの大旅行です。GPSのように、LocationオブジェクトはあなたがWebページをナビゲートし、コントロールするためのものです。

このまとめを終えるにあたり、私の初期の教師生活のユニークな話を思い出しました。私の生徒の1人がlocation.reload()メソッドに非常に興奮し、無限ループを作成してしまい、ブラウザが無限にリフレッシュしてしまいました。私たちはそれを笑ってしまいましたが、重要な教訓を学びました：力には責任が伴います！

このガイドが役立ったことを願って、あなたがLocationオブジェクトを使ったJavaScriptの冒険において自信を持って進めることができることを願っています。続けて練習し、好奇心を持ち、幸せなコーディングを！

Credits: Image by storyset