URLパラメータの取得方法：window.location.searchの活用｜DAD UNION

Web開発では、ユーザーの操作に応じた動的なページを提供するために、URLのクエリパラメータを利用することが頻繁にあります。
今回は、JavaScriptを使ってURLのクエリパラメータの値を取得する方法について、詳しく解説していきます。

Contents

URLパラメータとは？
JavaScriptでURLパラメータを取得する
URLのパラメータ値を取得するJavaScriptコード
取得したURLのパラメータを表示するHTML
window.location.searchURL（アドレス）のパラメータ値をJavaScriptで取得するデモページ
PHPでも可能：サーバーサイドでのパラメータ取得
まとめ

URLパラメータとは？

URLパラメータ（別名：クエリストリング）は、Webページに追加情報を渡すためにURLの末尾に「?」記号に続けて設定されるキーと値のペアです。例えば、検索エンジンでキーワードを検索したときに生成されるURLには、検索クエリがパラメータとして含まれています。

JavaScriptでURLパラメータを取得する

JavaScriptには、現在のページのURLからクエリパラメータを簡単に取得するための組み込みオブジェクトとして window.location オブジェクトがあります。以下に、基本的なパラメータ取得スクリプトの記述例を示します。

URLのパラメータ値を取得するJavaScriptコード

このコードスニペットでは、ページの読み込み時に window.location.search を使用してクエリパラメータを取得し、フォームのテキストボックスに表示します。 window.location.search はURLの「?」以降の部分を含む文字列を返します。以下は、その使用例です。

<script type="text/javascript"><br />
    function paramdata(){
        if(window.location.search){
			//?（文字列のインデックスが1）以降の値（文字列）を取得
            var param=window.location.search.substring(1,window.location.search.length);
			//pformフォームのpnameテキストボックスに表示
            document.pform.elements["pname"].value=param;
        }
    }
    window.onload=paramdata;
</script>

取得したURLのパラメータを表示するHTML

上記のJavaScriptコードによって取得されたパラメータをユーザーに表示するためには、HTML側で出力先を準備する必要があります。
以下のHTMLスニペットは、取得したパラメータをテキストボックスに表示する例です。

<div id="idWrap">
    <h1>URL（アドレス）の?以降の値（GETパラメータ）を以下に表示します。</h1>

<form name="pform" action="#">
    <input type="text" name="pname" size="30" />
</form>

</div><!--/idWrap-->

window.location.searchURL（アドレス）のパラメータ値をJavaScriptで取得するデモページ

実際にこのスクリプトを動作させてみると、ユーザーがページにアクセスした際にURLに含まれるクエリパラメータがテキストボックスに表示されます。以下は、この機能を実装したデモページのURLです。

window.location.searchURL（アドレス）のパラメータ値をJavaScriptで取得するデモ

PHPでも可能：サーバーサイドでのパラメータ取得

もちろん、JavaScriptだけでなく、サーバーサイドのプログラミング言語であるPHPを使用しても、URLのクエリパラメータを取得することができます。急ぎでクライアントサイドだけでパラメータを取り扱いたい場合はJavaScriptが便利ですが、セキュリティを考慮する場合や、サーバー側でパラメータに基づいた処理を行いたい場合は、PHPなどのサーバーサイド言語を利用すると良いでしょう。