AxiosのGETリクエストでパラメータを渡す方法(2026年版)
Axios でクエリパラメータを送信するすべての方法
Hyperealで構築を始めよう
Kling、Flux、Sora、Veoなどに単一のAPIでアクセス。無料クレジットで開始、数百万規模まで拡張可能。
クレジットカード不要 • 10万人以上の開発者 • エンタープライズ対応
Axios の GET リクエストでパラメータを渡す方法 (2026年版)
Axios は、ブラウザと Node.js 両方の環境で使用される、JavaScript で最も人気のある HTTP クライアントです。REST API を扱う際、最も一般的なタスクの1つが GET リクエストでクエリパラメータを送信することです。
このガイドでは、基本的な使い方から、配列のシリアル化、カスタムシリアライザー、インターセプターなどの高度なパターンまで、Axios の GET リクエストでパラメータを渡すすべての方法を解説します。
`params` オブジェクトを使用した基本パラメータ
クエリパラメータを渡す最もクリーンな方法は、params 設定オプションを使用することです。
import axios from 'axios';
const response = await axios.get('https://api.example.com/users', {
params: {
page: 1,
limit: 20,
sort: 'created_at'
}
});
// 生成される URL: https://api.example.com/users?page=1&limit=20&sort=created_at
Axios は自動的に params オブジェクトをクエリ文字列にシリアル化し、URL に追加します。手動で URL を構築する必要はありません。
方法の比較
Axios の GET リクエストでパラメータを渡すすべての方法は以下の通りです。
| 方法 | 例 | 最適なユースケース |
|---|---|---|
params オブジェクト |
axios.get(url, { params: {...} }) |
ほとんどのユースケース |
| URL 文字列 | axios.get(url + '?key=value') |
シンプルで静的なパラメータ |
| テンプレートリテラル | axios.get(`${url}?key=${value}`) |
簡単な使い捨ての処理 |
URLSearchParams |
axios.get(url, { params: new URLSearchParams(...) }) |
フォームエンコードされたデータ |
paramsSerializer |
カスタム関数 | 複雑なシリアル化 |
さまざまなデータ型の受け渡し
文字列と数値
単純な値は直接シリアル化されます。
const response = await axios.get('/api/products', {
params: {
category: 'electronics',
minPrice: 100,
maxPrice: 500,
inStock: true
}
});
// URL: /api/products?category=electronics&minPrice=100&maxPrice=500&inStock=true
配列
デフォルトでは、Axios はブラケット記法([])を使用して配列をシリアル化します。
const response = await axios.get('/api/products', {
params: {
ids: [1, 2, 3, 4, 5]
}
});
// デフォルトの URL: /api/products?ids[]=1&ids[]=2&ids[]=3&ids[]=4&ids[]=5
API によって期待される配列の形式は異なります。paramsSerializer を使用してカスタマイズできます。
import qs from 'qs';
// カンマ区切り: ?ids=1,2,3,4,5
const response = await axios.get('/api/products', {
params: { ids: [1, 2, 3, 4, 5] },
paramsSerializer: (params) => {
return qs.stringify(params, { arrayFormat: 'comma' });
}
});
// キーの繰り返し: ?ids=1&ids=2&ids=3&ids=4&ids=5
const response2 = await axios.get('/api/products', {
params: { ids: [1, 2, 3, 4, 5] },
paramsSerializer: (params) => {
return qs.stringify(params, { arrayFormat: 'repeat' });
}
});
// インデックス記法: ?ids[0]=1&ids[1]=2&ids[2]=3
const response3 = await axios.get('/api/products', {
params: { ids: [1, 2, 3, 4, 5] },
paramsSerializer: (params) => {
return qs.stringify(params, { arrayFormat: 'indices' });
}
});
ネストされたオブジェクト
ネストされたパラメータを受け入れる API の場合:
import qs from 'qs';
const response = await axios.get('/api/search', {
params: {
filter: {
status: 'active',
role: 'admin'
},
pagination: {
page: 1,
perPage: 25
}
},
paramsSerializer: (params) => {
return qs.stringify(params, { encode: false });
}
});
// URL: /api/search?filter[status]=active&filter[role]=admin&pagination[page]=1&pagination[perPage]=25
Null および Undefined 値
デフォルトでは、Axios は undefined の値を除外しますが、null は含めます。
const response = await axios.get('/api/users', {
params: {
name: 'John',
email: undefined, // URL から除外される
phone: null // ?phone= として含まれる
}
});
// URL: /api/users?name=John&phone=
null と undefined の両方をスキップするには、以下のようにします。
const cleanParams = (params) => {
return Object.fromEntries(
Object.entries(params).filter(([_, v]) => v != null)
);
};
const response = await axios.get('/api/users', {
params: cleanParams({
name: 'John',
email: undefined,
phone: null
})
});
// URL: /api/users?name=John
URLSearchParams の使用
ネイティブの URLSearchParams API を Axios で直接使用できます。
const params = new URLSearchParams();
params.append('search', 'laptop');
params.append('category', 'electronics');
params.append('category', 'computers'); // 重複するキーをサポート
const response = await axios.get('/api/products', { params });
// URL: /api/products?search=laptop&category=electronics&category=computers
これは、動的にパラメータを追加する必要がある場合に便利です。
const params = new URLSearchParams();
// 条件に応じてパラメータを構築
if (searchTerm) params.append('q', searchTerm);
if (category) params.append('category', category);
if (minPrice) params.append('min_price', minPrice);
if (maxPrice) params.append('max_price', maxPrice);
const response = await axios.get('/api/search', { params });
インターセプターによるデフォルトパラメータの設定
すべてのリクエストに含めるべきパラメータ(API キーやロケールなど)については、リクエストインターセプターを使用します。
const apiClient = axios.create({
baseURL: 'https://api.example.com'
});
apiClient.interceptors.request.use((config) => {
config.params = {
api_key: process.env.API_KEY,
locale: 'en',
...config.params // 個別のリクエストパラメータとマージ
};
return config;
});
// これですべてのリクエストに api_key と locale が含まれます
const response = await apiClient.get('/users', {
params: { page: 1 }
});
// URL: https://api.example.com/users?api_key=xxx&locale=en&page=1
インスタンスへのデフォルトパラメータの設定
Axios インスタンスの作成時にデフォルトパラメータを設定することもできます。
const apiClient = axios.create({
baseURL: 'https://api.example.com',
params: {
api_key: process.env.API_KEY,
format: 'json'
}
});
// これらのデフォルトは、リクエストごとのパラメータとマージされます
const response = await apiClient.get('/data', {
params: { page: 2 }
});
// URL: https://api.example.com/data?api_key=xxx&format=json&page=2
TypeScript: 型付けされたパラメータ
TypeScript プロジェクトでは、パラメータのインターフェースを定義します。
interface UserSearchParams {
q?: string;
page: number;
limit: number;
role?: 'admin' | 'user' | 'moderator';
active?: boolean;
}
async function searchUsers(params: UserSearchParams) {
const response = await axios.get<{ users: User[]; total: number }>(
'/api/users',
{ params }
);
return response.data;
}
// 型安全なパラメータの受け渡し
const result = await searchUsers({
q: 'john',
page: 1,
limit: 20,
role: 'admin'
});
特殊文字のエンコーディング
Axios はパラメータを自動的にエンコードしますが、一部の API では特定のエンコーディングが必要な場合があります。
// Axios は自動的にエンコーディングを処理します
const response = await axios.get('/api/search', {
params: {
q: 'hello world & goodbye', // hello%20world%20%26%20goodbye としてエンコード
tag: 'c++' // c%2B%2B としてエンコード
}
});
// パラメータが既にエンコードされている場合に二重エンコードを防ぐには:
const response2 = await axios.get('/api/search', {
params: { q: 'pre-encoded%20value' },
paramsSerializer: (params) => {
return qs.stringify(params, { encode: false });
}
});
実践的な例:ページネーション対応の API クライアント
複数のテクニックを組み合わせた完全な例です。
import axios from 'axios';
import qs from 'qs';
const api = axios.create({
baseURL: 'https://api.example.com/v2',
timeout: 10000,
paramsSerializer: (params) => {
return qs.stringify(params, {
arrayFormat: 'comma',
skipNulls: true
});
}
});
// すべてのリクエストに認証トークンを追加
api.interceptors.request.use((config) => {
const token = localStorage.getItem('auth_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
// フィルタ付きのページネーションフェッチ
async function fetchProducts(filters = {}) {
const { data } = await api.get('/products', {
params: {
page: filters.page || 1,
per_page: filters.perPage || 20,
sort_by: filters.sortBy || 'created_at',
order: filters.order || 'desc',
categories: filters.categories, // 配列:カンマ区切りでシリアル化
min_price: filters.minPrice,
max_price: filters.maxPrice,
search: filters.search
}
});
return data;
}
// 使用例
const products = await fetchProducts({
page: 2,
categories: ['electronics', 'gadgets'],
minPrice: 50,
sortBy: 'price'
});
// URL: /products?page=2&per_page=20&sort_by=price&order=desc&categories=electronics,gadgets&min_price=50
避けるべき一般的な間違い
| 間違い | 問題点 | 修正方法 |
|---|---|---|
data にパラメータを入れる |
GET リクエストは data フィールドを無視する |
data ではなく params を使用する |
| 手動での URL 構築 | 特殊文字でエラーが発生する可能性がある | params オブジェクトを使用する |
paramsSerializer を忘れる |
デフォルトの配列形式が API と一致しない場合がある | インスタンスごとにシリアライザーを設定する |
| 空の値の未処理 | ?key= や ?key=undefined が送信される |
null 系の値を除外する |
| 二重エンコーディング | %20 ではなく %2520 になる |
事前エンコードされている場合は encode: false を使用 |
まとめ
Axios の params オブジェクトは、GET リクエストパラメータに関するニーズの大部分をカバーします。配列、ネストされたオブジェクト、またはカスタムシリアル化が必要なより複雑なシナリオでは、params と qs ライブラリおよび paramsSerializer を組み合わせてください。すべてのリクエストに同じパラメータを付随させる必要がある場合は、インターセプターやインスタンスのデフォルト設定を使用して、コードを DRY(簡潔)に保ちましょう。
画像生成、ビデオ作成、音声合成のための AI API を呼び出すアプリケーションを構築している場合は、Hypereal AI を無料でお試しください。35 クレジット提供、クレジットカード不要です。 当社の REST API はこのガイドで取り上げたものと同じ規約に従っているため、Axios やその他の HTTP クライアントで簡単に統合できます。
