JavaScriptでURLにパラメータを追加する8つの方法

JavaScriptでURLにパラメータを追加する8つの方法JS
この記事は約26分で読めます。

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptでURLパラメータを扱う基本

JavaScriptでURLにパラメータを追加する方法を解説する前に、まずはURLの構造やクエリパラメータの基本的な概念について理解を深めておきましょう。

URLとクエリパラメータの仕組みをしっかり把握することが、パラメータを適切に扱うための第一歩となります。

○URLとは？構造を理解しよう

URLは、Webページやファイルなどのリソースの場所を指定するための文字列です。

一般的なURLの構造は以下のようになっています。

プロトコル://ドメイン名/パス?クエリ文字列#フラグメント

それぞれの要素の役割は次のとおりです。

  • プロトコル：通信に使用するプロトコル（http, https, ftpなど）
  • ドメイン名：リソースが存在するサーバーのドメイン名
  • パス：サーバー内でのリソースの位置を示す文字列
  • クエリ文字列：リソースに付加的な情報を渡すための文字列
  • フラグメント：リソース内の特定の部分を指定するための識別子

今回のテーマであるURLパラメータは、このうちクエリ文字列の部分に当たります。

クエリ文字列を使うことで、Webページに追加の情報を渡すことができるのです。

○クエリパラメータとは？

クエリパラメータ（またはクエリ文字列）は、URLの一部であり、リソースに付加的な情報を渡すために使用されます。

クエリパラメータは、URLのパス部分の後に「?」を付けて記述し、「キー=値」の形式で複数のパラメータを「&」で連結することができます。

例えば、次のようなURLを考えてみましょう。

Example Domain
example.com

この例では、「q=javascript」と「sort=desc」という2つのクエリパラメータが使われています。

これらのパラメータは、検索キーワードとソート順を指定するために使われている可能性があります。

クエリパラメータを適切に使用することで、Webアプリケーションの機能を拡張し、ユーザーにとってより便利で柔軟なサービスを提供することができます。

●URLSearchParamsを使ってパラメータを追加する

URLパラメータを扱う際に、JavaScriptのURLSearchParamsというクラスを使うと便利ですね。

このクラスを使えば、URLのクエリ文字列の解析や構築を簡単に行うことができます。

では早速、URLSearchParamsを使ってURLにパラメータを追加する方法を見ていきましょう。

○サンプルコード1：URLSearchParamsの基本的な使い方

URLSearchParamsの基本的な使い方を確認してみましょう。

まずは、新しいURLSearchParamsのインスタンスを作成します。

const params = new URLSearchParams();

次に、append()メソッドを使ってパラメータを追加します。

params.append('key1', 'value1');
params.append('key2', 'value2');

追加したパラメータは、toString()メソッドを呼び出すことでクエリ文字列として取得できます。

const queryString = params.toString();
console.log(queryString);
// 出力結果: "key1=value1&key2=value2"

このように、URLSearchParamsを使えば、簡単にパラメータを追加し、クエリ文字列を生成することができます。

○サンプルコード2：複数のパラメータを一括で追加

URLSearchParamsのコンストラクタに、オブジェクトを渡すことで、複数のパラメータを一括で追加することもできます。

const params = new URLSearchParams({
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
});

console.log(params.toString());
// 出力結果: "key1=value1&key2=value2&key3=value3"

このように、オブジェクトを使って初期化することで、複数のパラメータを一度に設定できるので便利ですね。

○サンプルコード3：既存のURLに新しいパラメータを追加

既存のURLに新しいパラメータを追加する場合も、URLSearchParamsを使うと簡単に実現できます。

const url = 'https://example.com/search?q=javascript';
const params = new URLSearchParams(url.split('?')[1]);

params.append('sort', 'desc');
params.append('page', '1');

const newUrl = `${url.split('?')[0]}?${params.toString()}`;
console.log(newUrl);
// 出力結果: "https://example.com/search?q=javascript&sort=desc&page=1"

まず、既存のURLからsplit()メソッドを使ってクエリ文字列部分を取り出し、URLSearchParamsのコンストラクタに渡します。

次に、append()メソッドで新しいパラメータを追加し、最後にtoString()メソッドで生成されたクエリ文字列を既存のURLに結合します。

この方法を使えば、既存のURLを変更することなく、新しいパラメータを追加することができます。

●URL文字列を操作してパラメータを追加する

前章では、URLSearchParamsを使ってURLにパラメータを追加する方法を見てきました。

でも、URLSearchParamsを使わずに、URL文字列を直接操作してパラメータを追加することもできるんです。

URL文字列を操作する方法は、URLSearchParamsに比べるとちょっとややこしいですが、より柔軟な処理が可能になります。

それでは実際に、URL文字列を操作してパラメータを追加する方法を見ていきましょう。

○サンプルコード4：URL文字列を分割・結合する方法

まずは、URL文字列を分割して、クエリ文字列部分を取り出す方法から見ていきます。

const url = 'https://example.com/search?q=javascript';
const [baseUrl, queryString] = url.split('?');

console.log(baseUrl);
// 出力結果: "https://example.com/search"
console.log(queryString);
// 出力結果: "q=javascript"

split()メソッドを使って、URL文字列を?で分割することで、ベースのURLとクエリ文字列を取り出すことができます。

次に、取り出したクエリ文字列をさらに&で分割し、キーと値のペアを配列にします。

const params = queryString.split('&').map(param => param.split('='));

console.log(params);
// 出力結果: [["q", "javascript"]]

これで、URLのパラメータを配列として扱うことができるようになりました。

あとは、この配列に新しいパラメータを追加し、再度文字列に結合するだけです。

params.push(['sort', 'desc']);
params.push(['page', '1']);

const newQueryString = params.map(param => param.join('=')).join('&');
const newUrl = `${baseUrl}?${newQueryString}`;

console.log(newUrl);
// 出力結果: "https://example.com/search?q=javascript&sort=desc&page=1"

push()メソッドで新しいパラメータを追加し、map()とjoin()メソッドを使って配列を文字列に変換します。

最後に、ベースのURLとクエリ文字列を結合して、新しいURLを生成します。

○サンプルコード5：正規表現を使ってパラメータを追加

正規表現を使うと、もう少しスマートにパラメータを追加することができます。

const url = 'https://example.com/search?q=javascript';
const newUrl = url.replace(/([^?])$/, '$1&sort=desc&page=1');

console.log(newUrl);
// 出力結果: "https://example.com/search?q=javascript&sort=desc&page=1"

正規表現/([^?])$/は、URL文字列の末尾が?でない場合にマッチします。

マッチした部分を$1で参照し、その後ろに新しいパラメータを追加します。

この方法なら、URLにもともとクエリ文字列がない場合でも、正しく?を追加してパラメータを結合できます。

○サンプルコード6：テンプレートリテラルでURLを組み立てる

ES2015で導入されたテンプレートリテラルを使うと、URLの組み立てがさらに簡単になります。

const baseUrl = 'https://example.com/search';
const params = {
  q: 'javascript',
  sort: 'desc',
  page: 1
};

const queryString = Object.entries(params)
  .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
  .join('&');

const url = `${baseUrl}?${queryString}`;

console.log(url);
// 出力結果: "https://example.com/search?q=javascript&sort=desc&page=1"

Object.entries()メソッドを使ってオブジェクトからキーと値のペアの配列を取得し、map()メソッドでキーと値を=で結合します。

このとき、encodeURIComponent()関数を使って値をURLエンコードすることを忘れないでください。

最後に、join()メソッドで配列を&で結合し、テンプレートリテラルでベースのURLと組み合わせます。

テンプレートリテラルを使えば、URLの組み立てがわかりやすくなり、変数の埋め込みも簡単に行えます。

●その他のパラメータ追加方法

ここまでは、URLSearchParamsを使う方法と、URL文字列を直接操作する方法を見てきました。

でも、他にもURLにパラメータを追加する方法があるんです。

例えば、リンクをクリックしたときにパラメータを追加したり、フォームのデータをURLに含めてページ遷移したりすることもできます。

それでは実際に、その他のパラメータ追加方法を見ていきましょう。

○サンプルコード7：a要素のhref属性を動的に変更する

リンクをクリックしたときに、URLにパラメータを追加するには、a要素のhref属性を動的に変更します。

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault();
  const url = new URL(this.href);
  url.searchParams.set('utm_source', 'twitter');
  url.searchParams.set('utm_campaign', 'summer_sale');
  location.href = url.toString();
});

まず、a要素を選択し、クリックイベントのリスナーを追加します。

イベントリスナー内では、event.preventDefault()を呼び出してデフォルトのリンク動作をキャンセルします。

次に、URLコンストラクタを使ってリンクのURLを解析し、searchParamsプロパティを使ってパラメータを追加します。

この例では、utm_sourceとutm_campaignという、よく使われるトラッキングパラメータを追加しています。

最後に、url.toString()で変更後のURLを文字列に変換し、location.hrefに代入することでページ遷移を行います。

こうすることで、リンクをクリックしたときに動的にパラメータを追加し、遷移先のページに情報を渡すことができます。

○サンプルコード8：ページ遷移時にパラメータを渡す

フォームのデータをURLに含めてページ遷移するには、form要素のaction属性とmethod属性を適切に設定します。

<form action="/search" method="get">
  <input type="text" name="q">
  <button type="submit">検索</button>
</form>

method属性を"get"に設定することで、フォームのデータがURLのクエリ文字列として送信されます。

action属性にはフォームの送信先URLを指定します。

フォームを送信すると、次のようなURLに遷移します。

/search?q=入力されたキーワード

これで、フォームのデータをURLのパラメータとして遷移先のページに渡すことができます。

遷移先のページでは、URLSearchParamsなどを使ってパラメータを取得し、処理を行います。

const params = new URLSearchParams(location.search);
const keyword = params.get('q');
console.log(keyword);

フォームを使ってパラメータを渡す方法は、シンプルで分かりやすいので、検索機能やフィルター機能などによく使われています。

●URLパラメータの取得と活用

URLにパラメータを追加する方法はいろいろ見てきましたが、肝心なのはそのパラメータをどう活用するかですよね。

せっかく追加したパラメータを取得して、有効に使わなければ意味がありません。

それでは実際に、URLからパラメータを取得して活用する方法を見ていきましょう。

きっと、URLパラメータの可能性が広がるはずです。

○URLからパラメータを取得する方法

URLからパラメータを取得するには、URLSearchParamsを使うのが一番簡単です。

window.location.searchからクエリ文字列を取得し、URLSearchParamsのコンストラクタに渡します。

const params = new URLSearchParams(window.location.search);

取得したパラメータは、get()メソッドを使って個別に取得できます。

const keyword = params.get('q');
const sortOrder = params.get('sort');
console.log(keyword);
console.log(sortOrder);

has()メソッドを使えば、特定のパラメータが存在するかどうかを確認できます。

if (params.has('page')) {
  const page = parseInt(params.get('page'), 10);
  console.log(`現在のページ: ${page}`);
} else {
  console.log('ページ情報がありません');
}

これで、URLからパラメータを取得する準備は整いました。

あとは、取得したパラメータを使ってアプリケーションの動作を制御するだけです。

○取得したパラメータを使った処理の例

取得したパラメータを使って、アプリケーションの動作を制御する例を見てみましょう。

const params = new URLSearchParams(window.location.search);
const theme = params.get('theme');

if (theme === 'dark') {
  document.body.classList.add('dark-theme');
} else {
  document.body.classList.add('light-theme');
}

この例では、themeパラメータの値に応じて、ページのテーマをダークモードとライトモードで切り替えています。

body要素のクラスを動的に追加することで、CSSを切り替えています。

他にも、取得したパラメータを使って、APIリクエストのオプションを設定したり、表示するコンテンツを動的に切り替えたりすることができます。

const params = new URLSearchParams(window.location.search);
const category = params.get('category');

fetch(`/api/products?category=${category}`)
  .then(response => response.json())
  .then(products => {
    // 取得した商品データを使ってページを更新する
    updateProductList(products);
  });

この例では、categoryパラメータを使ってAPIリクエストを送信し、該当するカテゴリの商品データを取得しています。

取得したデータを使ってページを動的に更新することで、URLパラメータに応じたコンテンツを表示できます。

○パラメータを使ったページの状態保持

URLパラメータを使えば、ページの状態を保持することもできます。

例えば、ユーザーが検索結果のページ番号をクリックしたら、そのページ番号をURLパラメータに含めてページを遷移します。

const searchForm = document.querySelector('form');
const searchInput = document.querySelector('input[name="q"]');

searchForm.addEventListener('submit', event => {
  event.preventDefault();
  const keyword = searchInput.value;
  window.location.href = `/search?q=${encodeURIComponent(keyword)}&page=1`;
});

検索結果ページでは、pageパラメータを取得して、該当するページ番号の結果を表示します。

const params = new URLSearchParams(window.location.search);
const keyword = params.get('q');
const page = parseInt(params.get('page'), 10);

// keywordとpageを使って検索結果を取得し、ページを更新する
searchProducts(keyword, page);
updatePagination(keyword, page);

このように、URLパラメータを使ってページの状態を保持することで、ユーザーはブックマークしたり、URLを共有したりすることができます。

再訪問時も、同じ状態のページを表示できるので、ユーザーエクスペリエンスの向上につながります。

●よくあるエラーと対処法

URLパラメータを扱っていると、思わぬエラーに遭遇することがありますよね。

特に、JavaScriptでURLパラメータを操作する際には、注意すべきポイントがいくつかあります。

ここでは、URLパラメータを扱う際によく発生するエラーとその対処法を見ていきましょう。

エラーに悩まされることなく、スムーズにURLパラメータを扱えるようになりましょう。

○URLSearchParamsがundefinedになる

URLSearchParamsを使おうとしたときに、undefinedエラーが発生することがあります。

const params = new URLSearchParams(window.location.search);
// TypeError: URLSearchParams is not a constructor

このエラーは、古いブラウザでURLSearchParamsがサポートされていない場合に発生します。

対処法としては、URLSearchParamsのポリフィルを使うか、URLSearchParamsの代わりにURLコンストラクタを使う方法があります。

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);

URLコンストラクタは、URLSearchParamsよりも広くサポートされているので、よりロバストなコードになります。

○パラメータの値がうまく渡せない

URLパラメータの値に特殊文字が含まれていると、うまく値が渡せないことがあります。

const url = 'https://example.com/?name=John&city=New York';
const params = new URLSearchParams(url.split('?')[1]);
console.log(params.get('city')); // "New"

この例では、cityパラメータの値が"New York"であるため、空白文字で区切られてしまい、"New"しか取得できていません。

対処法としては、パラメータの値をエンコードすることです。

encodeURIComponent()関数を使って、特殊文字をパーセントエンコーディングします。

const name = encodeURIComponent('John');
const city = encodeURIComponent('New York');
const url = `https://example.com/?name=${name}&city=${city}`;

パラメータを取得する際には、decodeURIComponent()関数を使ってデコードします。

const params = new URLSearchParams(url.split('?')[1]);
const name = decodeURIComponent(params.get('name'));
const city = decodeURIComponent(params.get('city'));
console.log(name); // "John"
console.log(city); // "New York"

これで、特殊文字を含むパラメータの値も正しく扱えるようになります。

○URLのエンコーディングに関するエラー

URLのエンコーディングに関連して、次のようなエラーが発生することがあります。

  • URLパラメータの値をエンコードし忘れて、サーバー側でパラメータが正しく解釈されない
  • 日本語などの非ASCII文字をエンコードしないため、URLが正しく構成されない
  • エンコードされたパラメータをデコードし忘れて、正しい値が取得できない

これらのエラーを防ぐには、常にURLパラメータの値をエンコード・デコードすることを意識しましょう。

パラメータを追加する際はencodeURIComponent()でエンコードし、取得する際はdecodeURIComponent()でデコードする習慣をつけましょう。

const keyword = '東京';
const encodedKeyword = encodeURIComponent(keyword);
const url = `https://example.com/search?q=${encodedKeyword}`;

// URLからパラメータを取得する際は、デコードを忘れずに
const params = new URLSearchParams(window.location.search);
const decodedKeyword = decodeURIComponent(params.get('q'));
console.log(decodedKeyword); // "東京"

常にエンコーディングを意識することで、URLパラメータに関するエラーを未然に防ぐことができます。

URLパラメータを扱う際のエラーは、少し注意すれば簡単に避けることができます。

URLSearchParamsのブラウザ対応や、パラメータのエンコーディングに気をつければ、安全にURLパラメータを扱えるはずです。

●URLパラメータの応用例

ここまでは、URLパラメータの基本的な扱い方や、よくあるエラーの対処法について見てきました。

でも、URLパラメータの本当の魅力は、その応用にあると思います。

URLパラメータを上手に活用することで、Webアプリケーションの利便性を大きく向上させることができるんです。

ここからは、URLパラメータを応用した実践的な例を見ていきましょう。

きっと、URLパラメータの可能性に気づくはずです。

○サンプルコード9：ページネーション機能の実装

ページネーション機能は、URLパラメータを使って実装するのに最適な例ですね。

const currentPage = parseInt(params.get('page'), 10) || 1;
const perPage = 20;

// 現在のページに応じたデータを取得する
const data = await fetchData(currentPage, perPage);

// ページネーションのHTMLを生成する
const pagination = generatePaginationHTML(currentPage, data.totalPages);
document.querySelector('.pagination').innerHTML = pagination;

function generatePaginationHTML(currentPage, totalPages) {
  let html = '';

  for (let i = 1; i <= totalPages; i++) {
    const activeClass = i === currentPage ? 'active' : '';
    html += `<a href="?page=${i}" class="${activeClass}">${i}</a>`;
  }

  return html;
}

現在のページ番号をpageパラメータから取得し、それに応じたデータを取得します。

そして、ページネーションのHTMLを生成する際に、各ページへのリンクにpageパラメータを付与します。

このように、URLパラメータを使ってページネーション機能を実装することで、ユーザーはURLを共有したり、ブックマークしたりすることができるようになります。

○サンプルコード10：動的な絞り込み検索機能

URLパラメータを使えば、動的な絞り込み検索機能も簡単に実装できます。

const params = new URLSearchParams(window.location.search);
const category = params.get('category');
const minPrice = parseInt(params.get('min_price'), 10);
const maxPrice = parseInt(params.get('max_price'), 10);

// パラメータに応じて検索条件を構築する
const conditions = {};
if (category) {
  conditions.category = category;
}
if (!isNaN(minPrice)) {
  conditions.price = { $gte: minPrice };
}
if (!isNaN(maxPrice)) {
  conditions.price = { ...conditions.price, $lte: maxPrice };
}

// 検索条件に一致する商品データを取得する
const products = await searchProducts(conditions);

カテゴリやフィルター条件をURLパラメータで表現し、それに基づいて検索条件を動的に構築します。

この方法を使えば、ユーザーは検索結果のURLを共有したり、ブックマークしたりすることができます。

また、検索フォームの初期値をURLパラメータから設定することで、ユーザーは前回の検索条件を再現することもできます。

○サンプルコード11：マルチページアプリケーションでの状態管理

マルチページアプリケーション（SPA）では、URLパラメータを使って状態を管理することがよくあります。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: HomeComponent
    },
    {
      path: '/products',
      component: ProductListComponent
    },
    {
      path: '/products/:id',
      component: ProductDetailComponent,
      props: route => ({ id: parseInt(route.params.id, 10) })
    }
  ]
});

// URLの変更を監視し、パラメータに応じてアプリケーションの状態を更新する
router.beforeEach((to, from, next) => {
  if (to.path === '/products') {
    const category = to.query.category;
    store.dispatch('setCategory', category);
  }
  next();
});

この例では、Vue Routerを使ってSPAを構築しています。

/productsルートでは、categoryクエリパラメータを使ってカテゴリを指定できます。

ルーターのbeforeEachガードで、URLの変更を監視し、パラメータに応じてアプリケーションの状態を更新しています。

これにより、URLとアプリケーションの状態を同期させることができます。

○サンプルコード12：アクセス解析ツールとの連携

URLパラメータは、アクセス解析ツールとの連携にも活用できます。

const params = new URLSearchParams();
params.set('utm_source', 'newsletter');
params.set('utm_medium', 'email');
params.set('utm_campaign', 'summer_sale');

const url = `https://example.com/products?${params.toString()}`;

ここでは、Google Analyticsでよく使われるUTMパラメータを設定しています。

これらのパラメータを使って、流入元や広告キャンペーンの効果を測定することができます。

サイト内のリンクにUTMパラメータを付与することで、サイト内の導線の効果も測定できます。

アクセス解析ツールとURLパラメータを組み合わせることで、マーケティングの最適化に役立てることができるでしょう。

まとめ

JavaScriptでURLパラメータを扱う方法について、基本的な概念から実践的な応用例まで幅広く見てきました。

URLパラメータは、Webアプリケーションの機能を拡張し、ユーザーエクスペリエンスを向上させるための強力なツールです。

URLSearchParamsを使えば、簡単にパラメータの追加や取得ができます。

また、URL文字列を直接操作することで、より柔軟なパラメータ処理が可能になります。

ページネーション、検索、状態管理、解析など、さまざまな場面でURLパラメータを活用できます。

アプリケーションの要件に合わせて、適切な方法を選んで実装しましょう。

URLパラメータを適切に使いこなすことで、Webアプリケーションの可能性が大きく広がります。

ぜひ、URLパラメータの活用を検討してみてください。