JavaScript

URLパラメータの取得方法:window.location.searchの活用

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

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などのサーバーサイド言語を利用すると良いでしょう。

まとめ

URLパラメータを使って、より動的なWebアプリケーションを構築することは、ユーザー体験を向上させる上で非常に重要です。JavaScriptを使った簡単な実装で、ユーザーからの入力を元にカスタマイズされた情報を提供することができます。

この記事が、皆さんのWeb開発の役に立つことを願っています。JavaScriptやPHPでの開発に関するさらなる情報や、実践的なコードの書き方については、私のブログで多数紹介しているので、是非チェックしてみてください。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。