【解説】JavaScriptでURLからパラメータを取得【値で条件分岐】

記事内に広告を含みます

【解説】JavaScriptでURLからパラメータを取得【値で条件分岐】
【解説】JavaScriptでURLからパラメータを取得【値で条件分岐】：まとめ

【解説】JavaScriptでURLからパラメータを取得【値で条件分岐】

JavaScriptにてURLからパラメータを取得して、値により条件分岐させるコードがこちら。

document.addEventListener('DOMContentLoaded', () => {
  function paramFunc(paramName, expectedValue) {
    const params = new URLSearchParams(window.location.search);
    const paramValue = params.get(paramName);

    if (paramValue === expectedValue) {
      // paramName が expectedValue の場合の処理
    } else {
      // paramName が expectedValue ではない場合の処理
    }
  }

  // 'test' パラメータが 'javascript' の場合に処理を行う
  paramFunc('test', 'javascript');
});

「?test=javascript」だったら、〇〇をさせたいというときに上記が使えます。

paramFunc(クエリパラメータ,値)の引数を変えれば、柔軟に使用可能です。

コードの具体的に解説したのがこちら↓

①：ページ読み込み後に処理実装

②：関数を定義（引数にパラメータと値を取る）

③：現在のURLのクエリパラメータを解析

④：クエリパラメータの値を取得

⑤：引数の値と取得した値により条件分岐

※：複数のパラメータの値によって分岐させる場合

順に見ていきましょう。

➀：ページ読み込み後に処理実装

document.addEventListener('DOMContentLoaded', () => {

});

まずDOM構築の完了後に実装するコードを書きます。

➁：関数を定義（引数にパラメータと値を取る）

document.addEventListener('DOMContentLoaded', () => {
  function paramFunc(paramName, expectedValue) {

  }

  // 'test' パラメータが 'javascript' の場合に処理を行う
  paramFunc('test', 'javascript');
});

続いて関数を定義。

パラメータと値を引数に受け取ることで、使いやすくします。

➂：現在のURLのクエリパラメータを解析

document.addEventListener('DOMContentLoaded', () => {
  function paramFunc(paramName, expectedValue) {
    const params = new URLSearchParams(window.location.search);

  }

  // 'test' パラメータが 'javascript' の場合に処理を行う
  paramFunc('test', 'javascript');
});

「new URLSearchParams(window.location.search);」にて、現在のページURLのクエリパラメータを解析するオブジェクトを作成。

それをparamsという変数にいれます。

2024年11月23日【解説】JavaScriptの「location」でURL情報を取得

④：クエリパラメータの値を取得

document.addEventListener('DOMContentLoaded', () => {
  function paramFunc(paramName, expectedValue) {
    const params = new URLSearchParams(window.location.search);
    const paramValue = params.get(paramName);

  }

  // 'test' パラメータが 'javascript' の場合に処理を行う
  paramFunc('test', 'javascript');
});

「const paramValue = params.get(paramName);」にて、格納した変数よりパラメータの値を取得。

それをparamValueという変数に入れます。

⑤：引数の値と取得した値により条件分岐

document.addEventListener('DOMContentLoaded', () => {
  function paramFunc(paramName, expectedValue) {
    const params = new URLSearchParams(window.location.search);
    const paramValue = params.get(paramName);

    if (paramValue === expectedValue) {
      // paramName が expectedValue の場合の処理
    } else {
      // paramName が expectedValue ではない場合の処理
    }
  }

  // 'test' パラメータが 'javascript' の場合に処理を行う
  paramFunc('test', 'javascript');
});

あとは引数に入れた値部分と、取得したクエリパラメータの値が一致してるかのif文を記述。

これで取得したパラメータの値にて、条件分岐させることが可能です。

※：複数のパラメータの値によって分岐させる場合

先述したコードは引数に値を入れておりました。

ただ場合によっては、色々な値によって条件分岐したいかと。

その時に使えるコードがこちら↓

document.addEventListener('DOMContentLoaded', () => {
  function paramFunc(paramName) {
    const params = new URLSearchParams(window.location.search);
    const paramValue = params.get(paramName);

    switch (paramValue) {
      case 'javascript':
        // 'test' が 'javascript' の場合の処理
        break;
      case 'html':
        // 'test' が 'html' の場合の処理
        break;
      case 'css':
        // 'test' が 'css' の場合の処理
        break;
      default:
        // その他の値、または 'test' パラメータが存在しない場合の処理
        break;
    }
  }

  // 'test' パラメータに応じた処理を行う
  paramFunc('test');
});

参考になれば幸いです！