現在進行中のWeb制作において、JavaScriptでURLのクエリ文字列から値を取得する必要がありました。

そんな中、そういう処理はJavaScriptでは初めてだということに気付いてしまいました。

今までPerlやPHPでは当然のごとく行っていましたが・・・というかその辺の言語を使うような開発だとクエリ文字列を使わないとお話にならないレベルだと思います。

が、思えばJavaScriptではJSONでデータ受け取ってはいたものの、クエリ文字列は一度も使わず。

というわけで、あまり難しい話でもないので、自分のためのメモ的にまとめておきたいと思います。

クエリ文字列から値を取得するFunction

実際にやってみると、PerlやPHPなどで「$ENV」とか「$_GET」とかを使うように単純に受け取れるものではありません。

かなり以前にはPerlでも同様の処理を行っていたような記憶がありますが、「クエリ文字列をまとめて取得し、&や=で分割して値を取得する」というような手順を実装する必要があります。

以下はそのコードです。

var getQueryVars = function() {
	// return用の配列
	var vars = [];
	
	// クエリ文字列を取得して「&」で分割
	var query_list = window.location.search.substring(1).split('&');

	// 値取得用のテンポラリ変数
	var tmp_arr;
	
	// 分割したクエリ文字列の配列から、値を取り出す
	query_list.forEach( function(e, i, a) {
		tmp_arr = e.split('=');
		vars[ tmp_arr[0] ] = tmp_arr[1];
	})

	return vars;
}

今回は関数リテラルの形式で書いてみました。

なお、この中で「forEach」を使っているのでIE8では動きません。

恐らく現状で問題が起きることはとても少ないと思いますが。

実際の使用方法

これはあまり難しくありません。

目的のページ内で、以下のようにgetQueryVars()を呼び出すだけです。

var query_vars = getQueryVars();

これで、例えば「http://www.example.com/?id=123」というURLだった場合、以下のように取得できます。

var id = query_vars['id'];

console.log( id );

注意点

上記の実際のコード内で「substring(1)」としているのは、「window.location.search」で取得したクエリ文字列の最初に「?」が含まれているからです。

最初の1文字を除いた状態で「split(‘&’)」をすることで、正しく値を取得できるようにしています。

あと、上記の実際のコードは関数リテラルで書いているため、当然ながら実際に使う場所よりも前に記述する必要があります。

具体的には以下の様なコードだと正常に動作しません。

// これでは動かない
var query_vars = getQueryVars();

var id = query_vars['id'];

console.log( id );

var getQueryVars = function() {
	〜 この関数の内容 〜
}

これは単純にgetQueryVarsを最初に持ってきます。

// これは動く
var getQueryVars = function() {
	〜 この関数の内容 〜
}

var query_vars = getQueryVars();

var id = query_vars['id'];

console.log( id );

というわけで、上記コードはコピーしてそのまま使えるので、必要があったら使ってみてください。