JavaScriptでURLからGETパラメータの値を取得する方法
JavaScriptでは、URLオブジェクトとsearchParamsプロパティを組み合わせることで、URLに含まれるGETパラメータ（クエリ文字列）の値を簡単に取得できます。本記事では、実際のコード例とともにその手順をわかりやすく解説します。
実装例
以下は、サンプルURL「https://www.google.com?imageSize=440&color=blue」から、imageSizeとcolorという2つのGETパラメータの値を取り出して画面に表示するコード例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>URLからGETパラメータを取得する</h1>
<div class="sample">https://www.google.com?imageSize=440&color=blue</div>
<div style="font-weight: bold;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、URLからimageSizeとcolorの値が表示されます
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resultEle = document.querySelector(".result");
var url = new URL(sampleEle.innerText);
var urlParams = url.searchParams;
var imageSize = urlParams.get("imageSize");
var color = urlParams.get("color");
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML += 'Image size = ' + imageSize + '<br>' + 'Image color = ' + color;
});
</script>
</body>
</html>
処理の流れのポイント
このコードの動作は、以下の手順で成り立っています。
1. URLオブジェクトの生成：new URL()コンストラクタに文字列形式のURLを渡すことで、URLを解析可能なオブジェクトとして扱えます。
2. searchParamsでクエリパラメータへアクセス：url.searchParamsはURLSearchParamsオブジェクトを返し、クエリ文字列部分（?以降）への便利な操作手段を提供します。
3. get()メソッドで特定のパラメータを取得：urlParams.get("imageSize")のように、パラメータ名を指定するだけで対応する値（ここでは「440」や「blue」）を文字列として取得できます。
出力結果
「CLICK HERE」ボタンをクリックすると、取得したパラメータの値が下記のように表示されます。
このように、URLインターフェースを利用すれば、正規表現や文字列操作を自前で実装することなく、ブラウザ標準の機能だけでGETパラメータを安全かつ簡潔に取得できます。モダンブラウザであれば広くサポートされているため、実務でも積極的に活用できるテクニックです。
-
JavaScriptでネストされた配列から最も短いサブ配列を取得する方法
はじめに例えば、次のようなネストされた配列(配列の中に複数の配列が格納されている構造)があるとします。const arr = [ ["LEFT", "RIGHT", "RIGHT", "BOTTOM", "TOP"], ["RIGHT", "LEFT", "TOP"], ["TOP&q
-
JavaScriptのオブジェクトで値からキーを取得する方法
JavaScriptでは、「値」を手がかりに「キー」を逆引きしたい場面がよくあります。例えば、次のように配列を値として持つオブジェクトがあったとしましょう。const obj = { key1: [value11, value12, value13, value14, value15], key2: [value21, value22, value23, value24, value25, value26, value27], key3: [value31, value32, value33, value34], key4: [value41, value