Hi, Developers,

URL パラメータを取得して処理します。

下記に示すリンクをクリックするか、このページの URL にパラメータを指定すると、 JavaScript で解析された様子が、この下に表示されます。

※ 表示が正しくないと思う場合は、JavaScript を有効にしてください。

パラメータなし
js-getparam.html
js-getparam.html?

期待通り name と favorite を指定
js-getparam.html?name=Tom&favorite=vegetables

期待通り name と favorite のほかにも指定、または不足
js-getparam.html?name=Tom&favorite=organic foods&age=43
js-getparam.html?name=Tom&age=43&team=TB

日本語が混じると、うまくいきません。
このページの Content-Type が charset=shift_jis だからかも知れません。
js-getparam.html?name=トム&favorite=パスタ
js-getparam.html?name=Mike&favorite=チーズ

日本語を自分でエンコードして URL を生成すると、デコードできます。
name :
favorite :
　リンクを作成する　
生成されたリンクが、ここに表示されます。

取得したパラメータ（name と favorite）が、ここに表示されます。

取得したパラメータ（キー名自由）が、ここに表示されます。

解析中のデータが、ここに表示されます。

---

URL に加えられているパラメータを取得し、解析できるまで準備します。

ブラウザのアドレスバーに表示される URL には、？マークのあとにパラメータを指定できます。

例；js-getparam.html?name=John&age=25

それを JavaScript で解析し、何らかの処理を行えれば便利です。

解析途中の情報も出力していますので、どのような指定がどういう具合で解析されるか、確認できます。

---

現時点でのテスト済みブラウザは、

Windows 10 PC の Chrome

Android 9 スマホの FireFox

です。

スマホやタブレットで開く場合は、 この QR コード (
https://www.straightapps.com/web/js-getparam.html ) が、このページの URL になっています。 QR コード読み取りアプリで読み取ると便利です。

ここから先は、上記、URL パラメータ取得プログラム開発を行った際に調べたりした JavaScript コードについての情報です。

作者背景については、「素因数分解トレーニング」のページの 「ここから先は開発情報です」をご覧ください。

まずは、HTML 部です。 ※ ただリンクを置いてある部分は省略しています。

パラメータに日本語を入力した場合のリンク部分です。

日本語が混じると、うまくいきません。<br/>
このページの Content-Type が charset=shift_jis だからかも知れません。<br/>
<a href="js-getparam.html?name=トム&favorite=パスタ" class="indent30">js-getparam.html?name=トム&favorite=パスタ</a><br/>
<a href="js-getparam.html?name=マイク&favorite=チーズ" class="indent30">js-getparam.html?name=Mike&favorite=チーズ</a><br/>

これも単なるリンクではありますが、Chrome のステータスバーに表示されるリンク先は、 日本語（全角カタカナ）になっていませんので、特別に書いています。

自動的にエンコードされていますが、 unescape、decodeURI、decodeURIComponent のいずれでも戻せませんでした。 上に書いてある通り、このページが SJIS ( Shift JIS という、日本語特有のエンコード方式です。 ) のため、コードが異なっていて戻せないと考えています。 ここではそれ以上は追っていませんが、 エンコードできる以上、デコードする方法はあるでしょう。

次は自由に値を指定してリンクを作成する部分です。

日本語を自分でエンコードして URL を生成すると、デコードできます。<br/>
<span class="indent30"/>name : <input type="text" id="iname"/><br/>
<span class="indent30"/>favorite : <input type="text" id="ifavorite"/><br/>
<button onclick="link()" title="リンクを作成する" class="indent30">　リンクを作成する　</button><br/>
<span id="link" class="indent30">生成されたリンクが、ここに表示されます。</span>

name キーと favorite キーの自由入力欄を用意し、 「リンクを作成する」ボタンが押されたとき、 JavaScript の link 関数を呼び出して、 その下に、生成したリンクを表示します。 生成されたリンクをクリックすることにより、いろいろなパターンを試すことができます。

なお、indent30 は字下げの CSS です。 表示のためだけですので、動作には影響ありません。

この先は、解析されたパラメータや途中経過を表示するための領域を用意している部分です。

<span class="darkred">取得したパラメータ（name と favorite）が、ここに表示されます。</span><br/>
<span id="param" class="mkB"></span>

<span class="darkred">取得したパラメータ（キー名自由）が、ここに表示されます。</span><br/>
<span id="param2" class="mkB"></span>

<span class="darkred">解析中のデータが、ここに表示されます。</span><br/>
<span id="data" class="mkPink"></span>

<script type="text/javascript" src="js/getparam.js"></script>

解析された情報の出力欄を用意しています。 グレーになっている class の部分、darkred は暗い赤文字、mkB は薄い青網掛け、mkPink はピンクの網掛けをする css です。

span id="param" の部分には、 パラメータにあるキー名が name と favorite とわかっている場合の、 連想配列に値を設定したときの結果を表示します。

span id="param2" の部分には、 パラメータに書かれるキー名が決まっていないかわからない場合の結果を表示します。

span id="data" の部分には、 解析途中の経過を表示します。

ここまでで表示を更新する部分がすべて定義されたので、JavaScript を読み込んで、 URL にあるパラメータを解析、結果を表示しています。

以降のセクションで、それぞれ詳細を確認していきます。

なお、ご参考までに、JavaScript ソースコードそのものを、拡張子 js を拡張子 txt に変えて、次のリンクより開けるようにしてあります。
getparam.txt
※ 作成時はタブを４文字としていますので、環境によってはタブが８文字のため、 コメント等がずれて見えるかも知れません。
※ 念のため書き添えますが、このソースコードをこのまま転載・公開することはご遠慮ください。

なお、本サイトのご利用に際しては、必ずプライバシーポリシー（免責事項等）をご参照ください。

body が読み進まれていき、script の行まで到達すると、src で指定されたファイルが読み込まれます。

<script type="text/javascript" src="js/getparam.js"></script>

すべての処理は、この getparam.js にて実行されています。 一般的には </body> の直前でいいようですが、 このページでは、読みにくくならないように、 必要なすべての HTML 要素の定義が終わった直後に置いています。

getparam.js の先頭部分は、次のような流れになっています。

//----------------------------------------
//	ページの読み込みが完了したら処理します

window.onload = function () {

	jsPutTopics('js-getparam');

	// 内容については、このあと参照します。

}

関数の定義になっていない、 つまり読み込み時に実行されるのはこの部分だけです。 これよりあとの関数定義は、この部分から呼び出されるものとなっています。

この部分では、ブラウザのロード処理が完了したら、 ここに定義されている onload 時の無名関数が実行されます。 無名関数とは、関数名が省略されたもので、 関数を別に書いて呼び出す代わりに、必要な場所に直接書く、という形です。 そしてこの関数が終了すると、JavaScript の処理が終了となります。

あとから気付いたことですが、 この記述 ( window.onload による関数の実行です。 ) があると、 body に onload イベントを指定しても、これが優先されるため、 body の onload イベントは実行されなくなります。 ページ読み込み時に実行したい関数呼び出しを、ここにまず書いています。 これはパラメータ解析には関係ありません。

この関数の中身は、次のように２つの部分で構成されています。

	let str = "パラメータはありません。";

	let param = GetQueryString();
	if (param != null){
		str = "name = " + param["name"];
		str += "<br/>favorite = " + param["favorite"];
	}
	let elem = document.getElementById("param");
	elem.innerHTML = str;

１つ目は、欲しいパラメータが name と favorite であることが 事前に決められている場合の解析です。

変数 str は、span id="param" に表示する文字列です。 パラメータがない場合に備えて、「パラメータはありません。」と設定しています。 パラメータがあれば、このあと書き換えます。

解析関数 GetQueryString を呼び出し、結果を param で受け取ります。 パラメータがなかった場合は param が null になりますので、 if 文を通らず、このまま str、「パラメータはありません。」と表示して完了とします。

パラメータがあった場合には、param には連想配列というものが返されます。 連想配列とは、配列ではあるのですが、 インデックスに数字ではなく文字列を指定できるもののようです。

上記コードを見るとわかるように、普通の配列なら param[ 0 ] のように参照しますが、 連想配列の場合は、１次元の配列 param に対して、インデックス指定を文字列で、 param["name"] のように参照できるということです。 正確ではありませんが、C/C++ で言えば、"name" が enum で数字に置き換えられている、というイメージと思います。

このことより、str には、name キーの値と favorite キーの値が設定され、 span id="param" に表示されることになります。

同時に、name あるいは favorite キーがなかった場合の様子なども、確認することができます。

	str = "パラメータはありません。";
	param = GetQueryString2();
	if (param != null){
		str = "";
		for (let i = 0; i < param.length; i ++){
			if ( i > 0 ){
				str += "<br/>";
			}
			str += param[i].paramName + " = " + param[i].paramValue;
		}
	}
	elem = document.getElementById("param2");
	elem.innerHTML = str;

２つ目は、欲しいパラメータが未定義か、わからない場合の解析です。

変数 str を再初期化したあと、GetQueryString2 関数を呼び出します。 結果を param で受け取りますが、上記同様、パラメータがなかった場合は null が返されますので、 if 文を通らず、このまま str、「パラメータはありません。」と表示して完了とします。

パラメータがあった場合には、param には１次元の Object 配列が返されます。 Object 型の変数が１次元配列の各要素に設定されたものです。 要素数は for ループで参照しているように、param.length プロパティに入っています。 つまり、パラメータにはこの数だけ、キーが含まれていた、ということになります。

可変サイズの１次元配列の取り扱いについては、 「素因数分解トレーニング」の 「【基礎】可変サイズの配列と操作」をご覧ください。 また、オブジェクトについては、同「【基礎】Object 型の変数の使い方」をご覧ください。

if 文の中では、戻された配列の要素数 param.length だけループし、 str にキー名 paramName とその値 paramValue をペアで追記しています。

最後に span id="param2" に出力して、完了です。 １行に１つの組み合わせで、& でつながれたパラメータがあればあるだけ、表示されます。

URL パラメータを解析し、連想配列を返す関数 GetQueryString を見ていきます。 どんなパラメータが指定されるのか、あらかじめ決まっている、わかっている場合に便利そうです。

function GetQueryString()
{
	let elem = document.getElementById("data");
	elem.innerHTML = "document.location.search = [" + document.location.search + "]";

	// パラメータがないか、"js-getparam.html?" の場合
	if (document.location.search.length < 2) {
		return null;
	}

まず elem に、途中経過を表示する領域 span id="data" を取得します。 そしてすぐ、document.location.search を出力しています。 これは、? 記号以降のパラメータ全体を含む文字列になります。 パラメータがあれば ? 記号を含めそこから先が全部、 パラメータがなければ（? 記号で終わっている場合を含む）空データになっています。

js-getparam.html?name=Tom&favorite=pasta なら、 document.location.search は ?name=Tom&favorite=pasta です。 js-getparam.html でも js-getparam.html? でも document.location.search は空になりました。

length プロパティを参照すれば、その文字数がわかります。 調べた範囲では値が 1 になることはありませんでしたが、 パラメータがない時 0 になり、１文字以上あれば ? 記号を含めて２文字以上になりましたので、 ２文字に満たない場合はパラメータがない、と判断しています。

パラメータがないと判断した場合には、null を返します。

	// URL パラメータの最初の1文字（?記号）以降の文字列を取得します。
	var query = document.location.search.substring(1);

変数 query に、パラメータ部の ? 記号を除いた部分を設定しています。 substring 関数は、引数で指定した文字インデックス以降の文字列を返すものです。 文字インデックスは先頭が 0 ですので、1 指定の場合、先頭の１文字を取り去る、です。

	// クエリの区切り記号 (&) で文字列を配列に分割します。
	//    "name=Tom", "favorite=pasta" のようになります。
	var params = query.split('&');

変数 query に入っている文字列を、 & 記号を区切りとして分割しています。 変数 params は、文字列の１次元配列となります。

query が name=Tom&favorite=pasta なら、 params[ 0 ] = "name=Tom" となり、 params[ 1 ] = "favorite=pasta" となります。

	var result = new Object();
	for (var i = 0; i < params.length; i++) {

		elem.innerHTML += ("<br/>" + params[i]);

		// パラメータ名とパラメータ値に分割します。
		var element = params[i].split('=');

		elem.innerHTML += (" -> " + element[0] + ", " + element[1]);

		var paramName = decodeURIComponent( element[0] );
		var paramValue = decodeURIComponent( element[1] );

		// パラメータ名をキーとして連想配列に追加します。
		result[ paramName ] = paramValue;
	}
	return result;
}

連想配列となる result をオブジェクトとして作成しています。 利用はできているものの、まだ構造を十分に理解していないため、これ以上の説明は、今はできませんが。

params は文字列の１次元配列ですので、length プロパティには要素数が入っています。 １つずつ、for ループ内で処理します。

まずは途中経過出力領域 elem に、１つのキーと値の組み合わせ、例えば name=Tom を出力します。 += で書き込んでいますので、今あるものへの追記になります。 また、あえて右辺をカッコでくくっていますが、「これを先にやって欲しい」という明示的な指定です。 必ずしも必要ではないようですが、「左から順に解釈・実行される」とおかしなことになるので書いています。

split 関数に = 記号を渡し、そこで切り離して element に文字列の１次元配列として設定します。 element[ 0 ] = "name"、element[ 1 ] = "Tom" となります。 分割できた様子を、途中経過出力領域 elem に追記しています。

これでキー名とその値が分離できましたので、 キー名を paramName に、値を paramValue に、いったん設定しています。 decodeURIComponent 関数の戻り値にしているのは、 これがエンコードされていた場合には戻す、という作業を行うためです。 Unicode 以外は戻せないと思いますが、英数だけとは限りませんので、この形が良さそうです。 デコード関数は数種類あるようですが、今は追及しません。

最後に、連想配列への設定です。

Object の result に対し、インデックスとして文字列、キー名を渡しています。 そしてその値は、対応する文字列です。 これで、キー名が name である値へのアクセスは、result["name"] で行う、ということになります。

result が Object であることから、想像ですが、 result["name"] は、result.name と同等、とイメージすると良さそうに思えます。 result.name を result["name"] でアクセス可能かはわかりませんが。

オブジェクトについては、「【基礎】Object 型の変数の使い方」に書いています。

今度は、URL パラメータを解析し、Object 配列を返す関数 GetQueryString2 を見ていきます。 どんなパラメータが指定されるのかわからないとき、役に立ちそうです。

function GetQueryString2()
{
	// パラメータがないか、"js-getparam.html?" の場合
	if (document.location.search.length < 2) {
		return null;
	}

先ほどの GetQueryString 関数と同じように、 パラメータがない場合は処理できませんので、null を返します。

	// URL パラメータの最初の1文字（?記号）以降の文字列を取得します。
	var query = document.location.search.substring(1);

	// クエリの区切り記号 (&) で文字列を配列に分割します。
	//    "name=Tom", "favorite=pasta" のようになります。
	var params = query.split('&');

ここも同じように、document.location.search に入っているパラメータの 先頭の ? 記号を substring 関数を使って取り去り、 変数 query に設定しています。

さらに、split 関数に & 記号を渡し、 & 記号で区切られている文字列を１次元配列にして、変数 params に設定します。

	var result = [];
	for (var i = 0; i < params.length; i++) {

		// パラメータ名とパラメータ値に分割します。
		var element = params[i].split('=');

		var paramName = decodeURIComponent( element[0] );
		var paramValue = decodeURIComponent( element[1] );

		// パラメータ名と値をオブジェクト配列に追加します。
		result.length = i + 1;
		result[i] = new Object();
		result[i].paramName = paramName;
		result[i].paramValue = paramValue;
	}
	return result;
}

まず、変数 result に、要素数未定の１次元配列を設定します。 要素数未定の１次元配列については、 「【基礎】可変サイズの配列と操作」に書いています。

& 記号で区切られた文字列の数 params.length だけ for 文でループします。

params の１要素には、"name=Tom" のような文字列が入っていますので、 split 関数に = 記号を渡して、キー名と値に分解して、 変数 element に、２要素の１次元配列として設定しています。

それぞれ、エンコードされている場合に備え、 decodeURIComponent 関数を使用して、 それぞれの文字列を paramName と paramValue に設定します。

１次元配列 result の length プロパティを再設定し、配列を１つ拡張しています。 すでに配列に入っているデータは壊されません。 拡張された result[ i ] に、キー名 paramName とその値 paramValue を設定し、終わりです。

呼び出し元では、result の length を調べればキーの数がわかり、 配列としてアクセスし、.paramName と .paramValue を参照すれば、キー名とその値がわかります。

次のようなリンクを作成する関数が、link() です。 「リンクを生成する」ボタンが押されたときに呼び出されます。

js-getparam.html?
name=%E3%82%B1%E3%83%AA%E3%83%BC&
favorite=%E3%82%AA%E3%83%AC%E3%83%B3%E3%82%B8

name キーの値となる input id="iname" と、 favorite キーの値となる input id="ifavorite" の値を取得し、 エンコードして、URL 文字列を作成します。

このエンコードにより、リンクした先で元の日本語に正常にデコードすることができます。

function link()
{
	let url, str;

	url = 'js-getparam.html';

最終的なリンク文字列を保持する変数 url に、 まずは html ファイル名を設定しています。

	str = encodeURIComponent( document.getElementById("iname").value );
	url += '?name=' + str;

input id="iname" に入力された文字列を参照し、 encodeURIComponent 関数に渡して、エンコードした文字列 str を取得しています。 文字列をエンコードするには encodeURI 関数もありますが、 テストした様子では、それでも問題なくデコードできていました。

エンコードされた値 str を url に追加し、name キーの設定は完了です。 ここでは右辺を（明示的に）カッコで囲んでいませんが、問題ないようです。

	str = encodeURIComponent( document.getElementById("ifavorite").value );
	url += '&favorite=' + str;

	str = '<a href="' + url + '">' + url + '</a>';

	// 出力します。
	let elem = document.getElementById("link");
	elem.innerHTML = str;
}

iname と同じように、input id="ifavorite" に入力された値を取得し、 encodeURIComponent 関数でエンコードして、str に設定します。 それを url に追加しています。

できた URL 文字列 url を、 span id="link" の innerHTML を書き換えることにより、表示を行っています。 innerHTML による書き換えについては、 「【基礎】HTML 要素のテキストの書き換え」に書いています。

ウェブ開発に関するトピックは、「ウェブ開発トップ」にまとめられています。