URL クエリパラメータを付与して送る

GET リクエストなどで、URL の末尾に ?key=value の形式でデータを付与して送信する方法を解説します。
手動で文字列を結合するのではなく、JavaScript 標準の URL や URLSearchParams オブジェクトを使用することで、特殊文字のエスケープ（URL エンコード）を自動的かつ安全に行うことができます。

前提条件

この機能を使用するには、@tauri-apps/plugin-http プラグインが必要です。

1. プラグインのインストール

npm run tauri add http

src-tauri/capabilities/default.json に http:default 権限を追加します。
Tauri v2 ではセキュリティの観点から allow: [{ "url": "*" }] のような無制限なワイルドカード指定は許可されていない場合があるため、使用する API のドメインを明示的に指定する必要があります。

以下の例では、コード例で使用する api.bookstore.com や api.example.com を許可しています。

{
  "permissions": [
    {
      "identifier": "http:default",
      "allow": [
        { "url": "https://api.bookstore.com/*" },
        { "url": "https://api.example.com/*" }
      ],
      "deny": []
    }
  ]
}

注意: 開発中は便利だからと広範囲な許可をしたくなりますが、本番ビルドでは実際に使用するドメインのみを許可することが強く推奨されます。

使用方法

URLSearchParams を使用する

パラメータ部分だけを構築し、ベース URL と結合します。

import { fetch } from '@tauri-apps/plugin-http';

const params = new URLSearchParams({ 
    search: 'Tauri Framework', 
    page: '1' 
});

await fetch(`https://api.example.com/items?${params.toString()}`);

URL オブジェクトを使用する（推奨）

URL 全体をオブジェクトとして操作できるため、より読みやすく安全です。

import { fetch } from '@tauri-apps/plugin-http';

const url = new URL('https://api.example.com/items');
url.searchParams.append('category', 'books');
url.searchParams.append('sort', 'price_asc');

await fetch(url.toString());

コード例

例1: 検索機能の実装

ユーザー入力をそのままパラメータにセットする例です。自動的にエンコードされるため、スペースや日本語が含まれていても安全です。

import { fetch } from '@tauri-apps/plugin-http';

interface SearchFilters {
    genre?: string;
    limit?: number;
}

async function searchBooks(keyword: string, filters: SearchFilters = {}): Promise<any> {
    const url = new URL('https://api.bookstore.com/v1/search');
    
    // 必須パラメータ
    url.searchParams.append('q', keyword); // 例: "Tauri 入門" -> "Tauri+%E5%85%A5%E9%96%80"
    
    // オプションパラメータの追加
    if (filters.genre) {
        url.searchParams.append('genre', filters.genre);
    }
    if (filters.limit) {
        url.searchParams.append('limit', String(filters.limit));
    }

    try {
        const response = await fetch(url.toString());
        if (response.ok) {
            return await response.json();
        }
    } catch (err) {
        console.error('Search failed:', err);
    }
}

例2: 配列パラメータの扱い

同じキーで複数の値を送る場合（例: ?id=1&id=2&id=3）や、カンマ区切り（例: ?ids=1,2,3）にする場合の処理です。
API の仕様に合わせて実装方法を選んでください。

import { fetch } from '@tauri-apps/plugin-http';

async function fetchMultipleItems(ids: number[]): Promise<any> {
    // ids = [101, 102, 103]
    const url = new URL('https://api.example.com/items');

    // パターンA: ?id=101&id=102&id=103 (同じキーを繰り返す)
    ids.forEach(id => url.searchParams.append('id', String(id)));

    /* 
    // パターンB: ?ids=101,102,103 (カンマ区切り)
    url.searchParams.append('ids', ids.join(','));
    
    // パターンC: ?ids[]=101&ids[]=102 (ブラケット付き)
    ids.forEach(id => url.searchParams.append('ids[]', String(id)));
    */

    const response = await fetch(url.toString());
    return await response.json();
}

Tips: URLSearchParams の便利なメソッド

* append(key, value): 値を追加します（同じキーがあっても追加される）。
* set(key, value): 値を設定します（同じキーがある場合は上書きされる）。
* delete(key): 指定したキーのパラメータを削除します。
* has(key): 指定したキーが存在するか確認します。
* toString(): クエリ文字列（key=value&key2=value2）を生成します。