URLSearchParams による簡単な URL 操作

Eric Bidelman 氏
Twitter GitHub ホームページ

URLSearchParams API は URL の各部分に対して一貫したインターフェースを提供し、クエリ文字列（? の後のもの）を簡単に操作できるようにします。

従来、デベロッパーは正規表現と文字列分割を使用して、URL からクエリ パラメータを抽出していました。私たちが自分に正直であれば、面白くありません。この作業は面倒で間違いが起こりがちです。私の暗い秘密の 1 つは、Google サンタを追いかけようや Google I/O 2015 ウェブなど、複数の大規模な Google.com アプリで同じ get|set|removeURLParameter ヘルパー メソッドを再利用していることです。

それでは、適切な API を使って、この処理を行いましょう。

URLSearchParams API

デモを試す

Chrome 49 では、URL 仕様の URLSearchParams が実装されています。この API は、URL クエリ パラメータを扱う場合に役立ちます。URLSearchParams は、FormData がフォームを使用するのと同等の便利な URL と考えることができます。

では、この機能で何ができるでしょうか。URL 文字列を指定すると、パラメータ値を簡単に抽出できます。

// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+string&version=1&person=Eric');

params.get('q') === "search string"
params.get('version') === "1"
Array.from(params).length === 3

for (let p of params) {
    console.log(p);
}

パラメータ値を設定します。

params.set('version', 2);

append: 既存のパラメータに別の値を追加します。

params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']

パラメータを削除する:

params.delete('person');

URL を使用する

ほとんどの場合は、完全な URL を使用するか、アプリの URL を変更します。URL コンストラクタは、次のような場合に特に便利です。

const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);

params.has('baz') === true
params.toString() === 'foo=1&bar=2&baz=3'

URL を実際に変更するには、パラメータを取得して値を更新してから、history.replaceState を使用して URL を更新します。

// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);

window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0

ここでは、ES6 テンプレート文字列を使用して、アプリの既存の URL パスと変更したパラメータから更新された URL を再構築しました。

URL が使用されている他の場所との統合

デフォルトでは、fetch() API リクエストで FormData を送信すると、マルチパート ボディが作成されます。必要に応じて、URLSearchParams は MIME マルチパートではなく URL エンコードされたデータを POST する代替メカニズムを提供します。

const params = new URLSearchParams();
params.append('api_key', '1234567890');

fetch('https://example.com/api', {
    method: 'POST',
    body: params
}).then(...)

URLSearchParams は Chrome にはまだ実装されていませんが、URL コンストラクタと a タグとも統合されます。どちらも、クエリ パラメータにアクセスするための読み取り専用のプロパティ .searchParams を提供することで、この新しいバディをサポートしています。

const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';

リンクには .searchParams プロパティも取得します。

const a = document.createElement('a');
a.href = 'https://example.com?filter=api';

// a.searchParams.get('filter') === 'api';

機能検出とブラウザ サポート

現在、URLSearchParams をサポートしているのは、Chrome 49、Firefox 44、Opera 36 です。

if ('URLSearchParams' in window) {
    // Browser supports URLSearchParams
}

ポリフィルについては、github.com/WebReflection/url-search-params のものをおすすめします。

デモ

サンプルを試す

URLSearchParams を実際のアプリで確認するには、Polymer のマテリアル デザインの Iconset Generator をご覧ください。これを使用して、ディープリンクからのアプリの初期状態をセットアップしました。とても便利です。