【超簡単】JavaScript で URL パラメーターを取得する方法（WordPress でも使える）

---

---

（ページにアクセスする）URL にはパラメータを付けることができます。以下のように URL の後ろに「？」を追加して名前と値を指定します。

https://ドメイン/ページ.html?name=value

アクセスするときに名前と値を指定することでページ表示時に JavaScript で動作・表示を分ける場合などに使えます。

本記事では、JavaScript で URL パラメーターを取得する方法を解説します。

＼ブログ副業を詳しく見たい方は こちら をクリックしてください／

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

実際に URL パラメータを取得するコードです。

※ ”testname" 名のパラメータ値を取得しています。

var varUrlParamater = window.location.search;
var varParamaters = new URLSearchParams(varUrlParamater);
var varValue1 = varParamaters.get('testname');

// パラメーターを表示する
alert(varValue1);

「window.location.search」と「URLSearchParams」でオブジェクトを作成し、get メソッドで（名前に一致する）値を取得します。

JavaScript で URL パラメーターの値で表示を切り替えるサンプル

実際に URL パラメータで表示を切り替えるサンプルです。

WordPress で使う場合は、「カスタム HTML」ブロックを使って、以下のコードを張り付けてください。

<div>
   <span style="font-size : 26px">パラメーター testname の値は</span>
   <span id="myIdDisplayValue" style="font-size : 26px; color : red; font-weight : bold"></span>
   <span style="font-size : 26px"> です。</span>
</div>

<script>
    var varUrlParamater = window.location.search;
    var varParamaters = new URLSearchParams(varUrlParamater);
    var varValue1 = varParamaters.get('testname');

    var varDisplayText;

    if ( varValue1 == "1" ) {
        varDisplayText = "[1]";
    } else {
        varDisplayText = "[1] 以外";
    }

    document.getElementById("myIdDisplayValue").innerText = varDisplayText; 
</script>

URL の末尾に「?testname=1」を付けると 「1」を、それ以外では、「1 以外」と画面上に表示します。

脆弱性（HTTPパラメータによる攻撃）に注意する・対策する

URL パラメータはとても便利な反面、他者がURLを書き換えてリクエストできるため、思わぬ不正な動作（攻撃）を受ける場合があるので注意が必要です。

「testname=1」について判定する場合、他者が「testname=xxxxxx」のように意図せぬ値に書き換えてURLを作成し、リクエストすることができます。xxxxxx の部分に全く別の不正な値を指定したり、時には HTML や JavaScript のコードを埋め込んで全く別の表示・動作をさせることも考えられます。

不正攻撃の例

http://(ドメイン)/?testname=<script>不正動作を目的とした JavaScript を書く</script>

不正攻撃の最も基本的な対策例です。

• 指定されたパラメーター値に対して、動作に必要な値のみ判定して処理を記載する。
• パラメーター値をそのまま無条件で利用する・表示するコードにはしない
• ウェブページの表示に影響する特別な記号文字（「<」、「>」、「&」等）を値として扱う場合（表示する場合）は表示可能なコード（"&#xx"）に変換する

WordPress のお役立ちテクニックはこちら

まとめ：JavaScript で URL パラメーターを取得する方法

本記事では、JavaScript で URL パラメーターを取得する方法と、不正攻撃に対する注意点を紹介しました。

URL パラメーターはアクセス元の条件により簡単に動作を変えられる有効な方法の一つです。WordPress で作ったサイトでも JavaScript を追加して使えるため弁です。一方、JavaScript でパラメーターを取り扱う上での注意点もありますので適切に利用していきましょう。

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情報局

地方がチャンスのおすすめ副業を紹介！

【2025年チャンス】地方で副業のおすすめ。在宅、快適、移住先、ノマドを紹介 | ドンドン！副業情報局

WordPress の情報、テクニック一覧はこちらをクリック！

Presented By Boon Boon Blog .Com

電気通信事業法改正に伴う表記