JSのlocationインターフェースを使う機会があったので勉強。
1.locationインターフェース(*)とは？
Location インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。
ーmdn web docs
プロパティからURLの状態を取得したりメソッドで操作できる。
(*)「概念的に共通した部品と機能の集まり（もしくは操作の集まり）のことを インタフェース／interface」といいます」
(https://zenn.dev/ojk/articles/js-interface)
概念として部品とその機能を定義したのがインターフェースで実体化されたものがオブジェクト。
2.実際に中身を見る
https://www.google.co.jp/?id=001&value=%22hello%22
にて実行!
後述のメソッドを使わなくても、location.hrefプロパティを更新するだけで遷移することができます。
| URL | location.origin | location.host | location.hrefにセットする値 | |
|---|---|---|---|---|
| ↓ | https://www.google.com/ | "https://www.google.com" | "www.google.com" | "test" |
| ↓ | https://www.google.com/test | "https://www.google.com" | "www.google.com" | "https://yahoo.co.jp" |
| ↓ | https://www.yahoo.co.jp/ | "https://www.yahoo.co.jp" | "www.yahoo.co.jp" | "www.google.com" |
| https://www.yahoo.co.jp/ | "https://www.yahoo.co.jp" | "www.yahoo.co.jp" |
"test"のようにhref属性に指定する値にhttpsなどからはじまるプロトコル名を省略すると、originプロパティからの相対パスになるようです。
"https://yahoo.co.jp"のようにプロトコル名を指定した場合はそのまま遷移します。
"www.google.com"のようにホスト名を指定した場合は元のＵＲＬに遷移します。
メソッドたち。
| assign() | 引数に指定したURLに遷移。 |
| reload() | 現在のURLを再読み込みする。 |
| replace() | 引数に指定したURLに遷移。ただし戻るボタンを使用して戻ることはできない。 |
| toString() | URL全体を収めた文字列を返す。 |
3.URLから遷移パラメータをいい感じに切り出す
locationインターフェースのsearchプロパティにはクエリ文字列(*)が渡されます。
(*)クエリ文字列：遷移パラメータ、URLパラメータに同じ。
【昔書いたダメな例】
JSでURLから遷移パラメータを切り出そうとしています。
http:＊＊＊＊?id=001&value=02のようなURLを処理するとして、
「substring()でクエリ文字列全体を切り出して、split()でパラメータ名と値を切り分けて…」などと書いていくのは面倒くさい。
そもそもlocationのsearchプロパティにクエリ文字列が格納されているので、substring()による切り出しは全く不要。
URLオブジェクトを使うために、当該ページのURL = location をコンストラクターに渡して初期化しています。
(*)map： 連想配列。合言葉となるキー(key)によって値(value)を取り出す。値を取得するときはget([キー名])メソッドを使用する。列挙するときはfor-inではなくfor-ofやforeachで。