[Javascript] Location情報クラス（モジュール版）

プログラム言語のデフォルト機能を便利に改造する、ユゲタです。 コピペで使える便利ライブラリのコーナーです。 javascriptでURLのクエリを扱いたいけど、クエリはlocation.searchで?**=**&@@=@@という文字列でしか取得できません。 できれば、key=valの連想配列データで扱いたいので、classオブジェクトとして利用できるライブラリを作っておきました。 ソースコードと使い方を簡単に紹介しておくので、便利に使ってくだされ！

ソース

export class Urlinfo{ constructor(){} // 全部 get href(){ return location.href } // ハッシュ get hash(){ return location.hash } // クエリ文字列 get query(){ return location.search.replace(/^\?/,'') } // クエリを連想配列で取得 get queries(){ return Object.fromEntries(new Map(this.query.split('&').map(e => [e.split('=')[0],e.split('=').slice(1).join('=')]))) || {} } // ドメイン get host(){ return location.hostname } // ポート get port(){ return location.port } // プロトコル get protocol(){ return location.protocol.replace(/\:$/,'') } // 階層 + ファイル名 get path(){ return location.pathname } // プロトコル + ホスト + ポート get origin(){ return location.origin } // ファイル名 get filename(){ return this.path.split('/').pop() } // 階層 get dir(){ return this.path.split('/').slice(0,-1).join('/') } }

How to

上記のソースを、urlinfoというファイル名で保存して、それを以下のような形でご利用ください。 試しに、 import { Urlinfo } from 'urlinfo.js' const urlinfo = new Urlinfo() console.log(urlinfo) // 実行結果 // 次のURLで実行https://example.com:8888/sample/index.html?a=1&b=2&c=3#test { dir : "sample" filename : "index.html" hash : "test" host : "example.com" origin : "https://example.com:8888" path : "sample/index.html" port : "8888" protocol : "https" queries : { a : 1, b : 2, c : 3 } query : "a=1&b=2&c=3" }

カンタン解説

クエリをオブジェクトデータにする箇所の複雑な関数のつなぎ込みを見てください。 get queries(){ return Object.fromEntries(new Map(this.query.split('&').map(e => [e.split('=')[0],e.split('=').slice(1).join('=')]))) || {} } 見事な感じでワンライナー化してみました。 読み解いていくと、 this.queryは、すぐ手前にある get queryで、location.searchを取得しているのを呼び出しているだけですが、それを、"&"文字列で、splitして配列化します。 次に、map関数で、keyとvalueに分割しますが、テクニックとしては、[key , value]のような配列で返すようにします。 それをnew Mapでマップオブジェクトに変換して、 最後に、Object.fromEntriesとすると、mapオブジェクトを連想配列データに変換してくれます。 あと、ちょっとした便利テクニックとしては、プロトコルが、https:と返ってくるのを最後の：（コロン）をreplaceしたり、 クエリも、"?a=1&b=2"と無駄に?がついてくるのを除外したりしました。

あとがき

こうしたちょっとしたスニペットを手元に持っていて簡単に使えるようにすると、プログラミング速度が格段にアップするので、たくさんのスニペットを作ることをオススメしますよ。 ちなみに、一度書いたソースをなるべくスニペット化しておく習慣を作ると、スキルアップがハンパないって事ですよね。 あ、良い忘れてましたが、今回のソースはclassモジュールなので、javascriptは、type="module"として利用してくださいね。 ※この意味がわからない人は、このソース自体便利に思わないかも・・・すんません。