Webページにおいてパフォーマンスを向上させるための一つのカギになるのが「URLパラメータ」です。ベースとなる静的なURLに「?」を付け加えて、それ以降の文字列をパラメータとして定義することができます。
通常、URLパラメータの取得はPHPファイルにて「$_GET[”]」を使って行われることが多いですが、JavaScriptでも取得することができます。
今回はJavaScriptでURLパラメータを取得する関数を紹介します。
サンプルコード
それでは早速自作のサンプルコードを紹介します。
URL
https://example.com/sample.php?s=hello%20everyone
JavaScript
//urlパラメータを取得する関数 辞書配列型で返す
function get_url_query() {
var query = window.location.search.substring(1); //?以降を取得
var query_array = query.split("&"); //&で分割し、配列に格納
var parameter_list = {};
for(var i = 0; i < query_array.length; i++) {
var parameter = decodeURI(query_array[i]).split("="); //=で分割し、左右で辞書配列のペアを作る
parameter_list[parameter[0]] = parameter[1];
}
return parameter_list;
}
const query = get_url_query(); //クエリ配列を取得
if(query['s']){
console.log(query['s']);
}
Console（結果）
hello everyone
解説
URLの構成
あくまでもサンプルのURLになります。実在するものとは関係はありません。このURLではベースのURLパスの後ろに「?」が付いています。ここからがパラメータです。
上のURLでは「s = “hello everyone”」という内容になっています。
%20はURLにおける半角スペースで、文字列として取得するためにはデコードする必要があります。
get_url_query()
この関数には引数はありません。ページURLの?以降の文字列を取得し、複数のパラメータに対応するために「&」で分割して配列に格納します。
そしてそれぞれのパラメータを「=」で分割して、インデックスと内容を取得し、辞書配列に格納します。
最後にその辞書配列を返します。この時、URLパラメータが存在しなかった場合は空の配列が返されます。
関数の利用
関数の利用方法はいたってシンプルです。呼び出すことでパラメータの辞書配列を取得し、該当のパラメータが存在するかをifで判定します。
そして存在したらその内容をコンソールに出力するプログラムになっています。%20はデコードされているので、半角スペースとなっています。
活用例
この方法が最適なのかはよくわからないですが、当サイトの一部の機能でもこの手法を利用しています。 以下は当サイトの、CPUベンチマーク表（Passmark）ページになります。URLにて「cpu」という名前のパラメータを設定するとその内容を検索した状態にアクセスできます。
試しに「Core i7」などと入力して「Go!」を押してみてください。
https://bablishe.com/benchmarks/cpu-passmark?cpu=
使い道は他にもきっとあるはずです。