JavaScript Location

概要: このチュートリアルでは、JavaScriptのLocationオブジェクトと、ロケーションを効果的に操作する方法について学習します。

Locationオブジェクトは、ドキュメントの現在の場所（URL）を表します。Locationオブジェクトにアクセスするには、windowまたはdocumentオブジェクトのlocationプロパティを参照します。

window.locationとdocument.locationの両方は、同じLocationオブジェクトにリンクしています。

JavaScript Locationのプロパティ

現在のURLが以下の場合

http://localhost:8080/js/index.html?type=listing&page=2#title
Code language: JavaScript (javascript)

次の図は、Locationオブジェクトのプロパティを示しています。(図は省略)

JavaScript Location

Location.href

location.hrefは、URL全体を含む文字列です。

"http://localhost:8080/js/index.html?type=listing&page=2#title"
Code language: JSON / JSON with Comments (json)

Location.protocol

location.protocolは、最後のコロン（:）を含むURLのプロトコルスキームを表します。

'http:'
Code language: JavaScript (javascript)

Location.host

location.hostは、ホスト名を表します。

"localhost:8080"
Code language: JSON / JSON with Comments (json)

Location.port

location.portは、URLのポート番号を表します。

"8080"
Code language: JSON / JSON with Comments (json)

Location.pathname

location.pathnameには、先頭に/が付き、その後にURLのパスが続きます。

"/js/index.html"
Code language: JSON / JSON with Comments (json)

Location.search

location.searchは、URLのクエリ文字列を表す文字列です。

"?type=listing&page=2"
Code language: JSON / JSON with Comments (json)

Location.hash

location.hashは、’#'に続いてURLのフラグメント識別子を含む文字列を返します。

"#title"
Code language: JSON / JSON with Comments (json)

Location.origin

location.originは、特定の場所のオリジンの正規形を含む文字列です。

"http://localhost:8080"
Code language: JSON / JSON with Comments (json)

Location.username

location.usernameは、ドメイン名の前にあるユーザー名を含む文字列です。

Location.password

location.passwordは、ドメイン名の前に指定されたパスワードを表す文字列です。

ロケーションの操作

Locationオブジェクトには、assign()、reload()、replace()といういくつかの便利なメソッドがあります。

assign()

assign()メソッドはURLを受け取り、すぐにそのURLに移動し、ブラウザの履歴スタックにエントリを作成します。

location.assign('https://javascripttutorial.dokyumento.jp');
Code language: JavaScript (javascript)

window.locationまたはlocation.hrefをURLに設定すると、assign()メソッドが暗黙的に呼び出されます。

window.location = 'https://javascripttutorial.dokyumento.jp';
location.href = 'https://javascripttutorial.dokyumento.jp';
Code language: JavaScript (javascript)

hostname、pathname、またはportプロパティを変更すると、新しい値でページが再読み込みされます。hashプロパティを変更してもページは再読み込みされませんが、ブラウザの履歴スタックに新しいエントリが記録されます。

ブラウザの履歴スタックに新しいエントリが作成されると、ブラウザの戻るボタンをクリックして前のページに移動できます。

replace()

replace()メソッドはassign()メソッドに似ていますが、ブラウザの履歴スタックに新しいエントリを作成しません。そのため、戻るボタンをクリックして前のページに戻ることはできません。

次のコードは、3秒後にhttps://javascripttutorial.dokyumento.jpに移動するためにreplace()メソッドを使用しています。(コード例は省略)

setTimeout(() => {
    location.replace('https://javascripttutorial.dokyumento.jp');
}, 3000);
Code language: JavaScript (javascript)

reload()

reload()メソッドは、現在表示されているページを再読み込みします。引数なしでreload()メソッドを呼び出すと、ブラウザは最も効率的な方法でページを再読み込みします（例：前回の要求以降変更されていない場合、ブラウザのキャッシュからページリソースを読み込みます）。

reload();

サーバーからの強制的な再読み込みを行うには、reload()メソッドにtrueを渡します。(コード例は省略)

reload(true);    
Code language: JavaScript (javascript)

ネットワーク遅延やシステムリソースなどの多くの要因によって、reload()の後のコードが実行されるかどうかは保証されません。そのため、reload()をコードの最後の行に配置することをお勧めします。

まとめ

Locationオブジェクトは、ページの現在のURLを表します。これはwindow.locationまたはdocument.locationを介してアクセスできます。
Locationオブジェクトには、protocol、host、pathname、searchなど、URLを表す多くのプロパティがあります。
ロケーションを操作するには、プロパティに新しい値を設定するか、assign()、replace()、reload()メソッドを使用します。

このチュートリアルは役に立ちましたか？