JavaScriptでクエリパラメータ取得！URLSearchParams.get()メソッド解説

JavaScriptでクエリパラメータ（URLパラメータ）を取得するためのURLSearchParams.get()メソッドについて、実践的な使い方を解説します。

URLSearchParams.get()とは

URLSearchParams.get()は、URLのクエリパラメータを簡単に取得できるJavaScriptのメソッドです。従来の方法と比べて、より直感的でシンプルなコードを書くことができます。

基本的な使い方

// URLが「https://example.com?name=john&age=25」の場合

// URLSearchParamsオブジェクトを作成
const urlParams = new URLSearchParams(window.location.search);

// パラメータを取得
const name = urlParams.get('name'); // 'john'
const age = urlParams.get('age');   // '25'

具体的な実装例

// 1. 現在のページのURLからパラメータを取得
function getCurrentUrlParameter(paramName) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(paramName);
}

// 2. 任意のURLからパラメータを取得
function getParameterFromUrl(url, paramName) {
    const urlObj = new URL(url);
    const urlParams = new URLSearchParams(urlObj.search);
    return urlParams.get(paramName);
}

エラー処理とバリデーション

パラメータが存在しない場合は`null`が返されるため、以下のように安全に処理できます：

const value = urlParams.get('parameter');
if (value === null) {
    console.log('パラメータが存在しません');
} else {
    console.log('取得した値:', value);
}

ブラウザ対応状況

URLSearchParamsは現代的なブラウザでは広くサポートされていますが、Internet Explorer非対応です。IE対応が必要な場合は、以下のようなポリフィルを使用するか、別の方法を検討してください。

まとめ

URLSearchParams.get()メソッドを使用することで、以下のメリットが得られます：

• コードがシンプルで読みやすい

• パラメータの取得が直感的

• エラー処理が容易

• 型の安全性が高い

クエリパラメータの取得は多くのWebアプリケーションで必要となる機能です。URLSearchParams.get()を使いこなすことで、より効率的な開発が可能になります。

関連情報

• URLSearchParamsには他にも`getAll()`、`has()`、`append()`などの便利なメソッドがあります

• クエリパラメータの操作に関する詳細な情報は、MDNのドキュメントを参照することをお勧めします

以上の情報を参考に、ぜひあなたのプロジェクトでURLSearchParams.get()を活用してみてください。