AxiosのGETリクエストでパラメータを渡す方法（2026年版）

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 クライアントで簡単に統合できます。