質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.23%

URLパラメータの値を、 switch文で条件分岐させたい

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 1,573

SHO1128

score 19

【やりたいこと】
Webサイト構築につきましてのご質問です。
あらかじめ設定したURLパラメータの値を
switch文で条件分岐させたいのです。

パラメータ設定が
…/?category=tokyo …の場合 webページ上に「東京です。」 

パラメータ設定が
…/?category=apple …の場合 webページ上に「リンゴです。」

…と、ページ上で文字列の表記を
以下の実装によって再現したいのです。 

【実装例】

例:パラメータの値を【apple】と【tokyo】の2つに設定した場合。
https://teratail.com/?category=apple&category=tokyo

(1)
//現在の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];
}
alert(paramItem[1]);
}

(2)
ここまで設定するとアラート表示(alert(paramItem[1]);)で
「apple」、「tokyo」がそれぞれ格納されることが確認できます。

そこでswitch文で分岐させていきます…。

// 格納したパラメータの値を取得
var test = (paramItem[1]);

switch (test)
{
case "apple":
$('#test').html('リンゴです');
break;

case "tokyo":
$('#test2').html('東京です');
break;
}

変数"test" と case "apple" が等しいので、
testタグに「リンゴです」と表示されます。

【問題点】
しかし、#test2タグには「東京です」と
同時に表記ができませんでした。

…ここで問題なのですが、
パラメータの値が、【リンゴ】かつ【東京】の
場合、switch文で条件分岐・表示させる式を
どうぞご教授お願い致します。。

ちなみに実装の参考にしたサイトはこちらです。
■JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法
https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html

以上です。
どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/12/13 19:10

    コードはマークダウンのcode機能をご利用ください

    キャンセル

  • m.ts10806

    2018/12/13 19:12

    ちなみに同名パラメータを渡す場合[]をつけて配列にするのがパラメータの通例です。

    キャンセル

回答 2

checkベストアンサー

+4

switchじゃなく、ifにしたらいいのでは?

// 現在のURLパラメータを配列で取得
// 何もパラメーター無しの時はnull
const urlParamList = location.search.substring(1) !== "" ? location.search.substring(1).split("&") : null

// パラメーターリストが存在する場合
if (urlParamList != null) {
  const paramArray = urlParamList.map(val => val.split("=")[1])
  console.log(paramArray)

  if (paramArray.includes("apple")) {
    $("#test1").html("リンゴです")
  }
  if (paramArray.includes("tokyo")) {
    $("#test2").html("東京です")
  }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/14 10:05

    shou6様
    ご回答、ありがとうございました。
    感謝申し上げます。

    実装してみたところ、
    大変メンテナンス性が高そうなので、
    ベストアンサーとさせていただきました。

    是非、使わせていただきます。
    この度は、ご教授ありがとうございました。

    今後とも
    どうぞよろしくお願いいたします。

    キャンセル

+2

switchということなんで。

const urlParam = "category=apple&category=tokyo";
const paramArray = urlParam.split("&").map(e=>e.split("=")[1]);

switch(true) {
  case paramArray.includes("apple"):
    console.log("りんご");
  case paramArray.includes("tokyo"):
    console.log("東京");
}


consoleみていただくと、両方出力されると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/14 10:04

    papinianus様
    ご回答ありがとうございます。

    switch(true)
    という使い方を勉強させていただきました。
    是非、今後の参考にさせていただきます。
    ありがとうございました。

    しかし、switch制御すると言った手前、
    やはりif文で制御することにいたしました。
    勝手ながら申し訳ありません。

    今後とも
    どうぞよろしくお願いいたします。

    キャンセル

  • 2018/12/14 10:21

    switch(true)は賛否ありますし、特にコーディング規約とか、こうしたいというポリシーがなければ使わないほうがいいと思います。
    さらに、この例では、フォールスルーもしていますので、良くないです。
    私がメンテナンスしているコードにこういうのがでてきたら、ifに書き直すと思います。

    キャンセル

  • 2018/12/14 13:10

    papinianus様
    ご返信ありがとうございます。

    > switch(true)は賛否ありますし、

    今後の参考にさせていただきます。
    またこの度は、switch文での実装…という質問とは
    異なる回答・解決を出してしまい、
    大変失礼いたしました。

    今後とも
    どうぞよろしくお願いいたします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る