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
ドメイン（サブドメイン）が取得できます。
この２つ何が違うんだろ？と思っていたら、
ホスト（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機能を拡張した機能を作ったほうが、「汎用性も効率性も高いかも・・・」とか、思っちゃいました。
まあ、通常では、全く使わない機能なのかもしれませんけどね。
最後まで読んでくれた人は、この機能が気になる人か、ユゲタのファンの人だと思うので、
ご既読ありがとうございました。
0 件のコメント:
コメントを投稿