JS URLのパラメーター利用

2020-06-25

サイトURLにパラメーターを付与して、その内容を取得して、処理をさせるといった方法を記載しておきます。

URLのパラメーターとは

まず、URLのパラメーターは、URLの後ろに ? と 変数(パラメータ)＝値 をついている形をさします。
よく広告などをクリックした時に、URLをみてみると、やたら長い時などありますが、だいたいパラメーターとみられる内容がついています。
パラメーター自体は、一つだけではなく、複数つけることもできるので、その場合は、 & でつなげられています。
そして、ページを表示するときに、このパラメーターを利用しすることで、様々な処理をすることができます。

location.search

まず、サイトURLの?で始まるパラメーターの取得には、location.searchを利用して取得します。（substring(1)とすることで2文字目以降［?以外］を取得します）
もし、URLにパラメータが存在すれば、その内容を取得し、さらに、複数ある場合は、& で分割した後に、連想配列のkeyとvalueにそれぞれパラメータのkeyとvalueを格納します。
取得後は、if文などで条件を指定して、処理を記述していくだけです。

abcde-xyz.jp?id=100 の場合

URLに id=100 というパラメータがついている場合は下記の方に処理します。

// URLのパラメータを取得
var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {

	var param = urlParam.split('&');		// 「&」が含まれている場合は「&」で分割
	var paramArray = [];		// パラメータを格納する用の配列を用意

	// 用意した配列にパラメータを格納
	for (i = 0; i < param.length; i++) {
		var paramItem = param[i].split('=');
		paramArray[paramItem[0]] = paramItem[1];
	}
 
	 // パラメータidの値による処理
	if (paramArray.id == '100') {
	} else {
	}
}

// URLのパラメータを取得

var urlParam = location.search.substring(1);

// URLにパラメータが存在する場合

if(urlParam) {

var param = urlParam.split('&'); // 「&」が含まれている場合は「&」で分割

var paramArray = []; // パラメータを格納する用の配列を用意

// 用意した配列にパラメータを格納

for (i = 0; i < param.length; i++) {

var paramItem = param[i].split('=');

paramArray[paramItem[0]] = paramItem[1];

}

// パラメータidの値による処理

if (paramArray.id == '100') {

} else {

}

パラメーターのkeyとなる部分が id ではなく p = ◯◯◯ といった場合は、17行目の部分は、paramArray.p として、処理していきます。

備考（location.hash）

URLにパラメーターではなく、アンカー(#)がついている場合でも、処理することができます。
その場合は、下記のようになります。

// URLのアンカー（#以降の部分）を取得
var urlHash = location.hash;
 
// URLにアンカーが存在する場合
if(urlHash){
	// アンカーが#osakaかどうかを判断する
	if (urlHash == '#anchor1') {
	} else {
	}
}

// URLのアンカー（#以降の部分）を取得

var urlHash = location.hash;

// URLにアンカーが存在する場合

if(urlHash){

// アンカーが#osakaかどうかを判断する

if (urlHash == '#anchor1') {

} else {

}

アンカーの場合は、&でつなげたり、配列に格納したりすることはないので、ご注意ください。