[Javascript] 意外と知らかった「location」

2021年8月26日

Javascript テクノロジー

eyecatch Javascripter、ユゲタです。 インタプリタで、プログラミング界隈では、軽く見られがちなJavascriptですが、 webブラウザで利用できる唯一のプログラムとして、唯一無二の人気になっているようです。 そんなJavascriptですが、毎年のようにバージョンアップを続けていて、時間が経過する毎に使いやすくなる上、 機能も向上し、深堀りすればするほど、機能の奥深あを思い知ること間違いないでしょう。 そして、API開発を多く行っているユゲタとしては、自分の作った便利関数でよく使うものの一つに「urlinfo」というのがあります。 それを、デフォルトのlocation機能を使って、便利に代用できるということを知ったので、備忘録としてまとめておきます。

urlinfoってどんな関数?

まずはじめに、以前、ユゲタの作った「urlinfo」関数を紹介しておきます。 [JavaScript] PHPのpathinfoみたいなjavascript関数 タイトルの通りの機能なのですが、urlを指定すると、そのURLの
プロトコル ドメイン(サブドメイン) ディレクトリ URL 指定ファイル名 クエリタグ(配列) ハッシュ値
と、こんな感じでURLから取得できる情報を返してくれるという便利関数です。

locationで取得できる値

とりあえず、locationで取得できる値を一覧で見てみましょう。 // http://localhost.com/test/sample.html?a=1&b=2&c=3#template console.log(location); // 以下返り値 ancestorOrigins: DOMStringList {length: 0} assign: ƒ assign() hash: "#template" host: "localhost.com" hostname: "localhost.com" href: "http://localhost.com/test/sample.html?a=1&b=2&c=3#template" origin: "http://localhost" pathname: "/test/sample.html" port: "" protocol: "http:" reload: ƒ reload() replace: ƒ replace() search: "?a=1&b=2&c=3" toString: ƒ toString() valueOf: ƒ valueOf() Symbol(Symbol.toPrimitive): undefined 不要な情報も入っていますが、重要な値を解説してみます。

hash

言わずもがなな、ハッシュ値です、先頭が#付きで返ってくるので、不要であれば、#を取り除く必要があります。

hostとhostname

ドメイン(サブドメイン)が取得できます。 この2つ何が違うんだろ?と思っていたら、 ホスト(host)とホスト名(hostname)の違い hostは、ポート番号を含んで、hostnameは、ポート番号は含まないようです。 hostは使わないほうが良さそうですね。

href

URIとして、アドレスバーの文字列をそのまま返してくれます。 これ、一番使いますね。

origin

サイトのルート階層が取得できるようです。 でも、これ、何に使うのかな?

pathname

originの下階層+ファイル名が取得できます。

port

ポート番号ですね。 hostname + port = host という風に考えられます。

protocol

httpかhttpsのどちらかが返ってきますが、マルチドメインのAPIを作る場合には、必至の値です。

search

クエリ情報が取得できますが、key=vallueが&で複数つながっている文字列で返ってきます。

メリット・デメリット

locationは、現在表示しているサイトのURL情報を分析取得する時に使えるんですが、 例えば、aリンクタグのhref情報にかかれているリンク先のURLを調べたい時などには、対応することができません。 そうなると、やはり自作したユゲタ関数のurlinfoを使うのが良さそうです。 でも、独自フォーマットのurlinfoよりも、このlocation機能を拡張した機能を作ったほうが、「汎用性も効率性も高いかも・・・」とか、思っちゃいました。 まあ、通常では、全く使わない機能なのかもしれませんけどね。 最後まで読んでくれた人は、この機能が気になる人か、ユゲタのファンの人だと思うので、 ご既読ありがとうございました。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。