はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptを使用したWeb開発者の方を対象にしています。特に、Webページ間での情報のやり取りや、動的なURLの生成を行いたい方에게向けています。この記事を読むことで、JavaScriptで移動先URLにパラメータを追加する方法がわかります。具体的には、window.locationオブジェクトの利用方法や、URLパラメータの構築方法が学べます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な文法と構文 - HTMLとCSSの基礎知識 - URLとその構成要素の理解（プロトコル、ドメイン、パス、クエリ_stringなど）

JavaScriptで移動先URLにパラメータを追加する方法

ここでは、JavaScriptでページを遷移させる際に、移動先のURLにパラメータを追加する方法を説明します。Webページ間で情報をやり取りしたり、特定の条件に基づいてページ遷移を行う場合などに役立ちます。

基本的な方法

JavaScriptでは、window.locationオブジェクトを利用して、現在のページのURLや移動先のURLを操作できます。以下は、移動先URLにパラメータを追加する基本的なやり方です。

Javascript

// URLパラメータの作成
let params = new URLSearchParams({
  key1: 'value1',
  key2: 'value2'
});

// 現在のURLからパスを取得
let currentUrl = new URL(window.location.href);

// パラメータを追加
currentUrl.search = params.toString();

// パラメータ付きURLに遷移
window.location.href = currentUrl.href;

URLSearchParams APIの利用

URLSearchParams APIは、URLクエリ文字列の操作を容易にするものです。上記の例でも使用されていますが、より詳細な利用方法をみてみましょう。

Javascript

// URLSearchParamsの作成
let searchParams = new URLSearchParams();

// パラメータの追加
searchParams.set('foo', 'bar');
searchParams.set('baz', 'qux');

// 現在のURLにパラメータを追加する
let url = new URL(window.location.href);
url.search = searchParams.toString();

// 新しいURLに遷移する
window.location.href = url.href;

ハマった点やエラー解決

実装中に遭遇する問題として、パラメータのエンコードが適切にされていない場合などがあります。例えば、値に特殊文字が含まれる場合、正しくエンコードされなければなりません。

解決策

この場合、encodeURIComponent関数を使用して、値を適切にエンコードします。

Javascript

let paramValue = 'value with spaces';
let encodedValue = encodeURIComponent(paramValue);

// エンコードした値を使用してパラメータを作成
let params = new URLSearchParams({
  key: encodedValue
});

まとめ

本記事では、JavaScriptで移動先URLにパラメータを追加する方法について解説しました。 - window.locationオブジェクトの利用方法 - URLSearchParams APIの活用 - パラメータのエンコードについて

この知識を活用することで、JavaScriptを用いたWeb開発において、ページ間の情報やり取りを効率よく行うことができます。

参考資料