Axiosの設定

14.1.1. Axiosインスタンスの生成

• APIクライアントはaxios.create()を使用して専用インスタンスを生成します。
• グローバルなaxiosオブジェクトを直接使用しません。グローバル設定の汚染を防止するためです。
• インスタンス定義ファイルはsrc/api/client.tsに作成します。
• 1つのプロジェクトで複数のAPIサーバーと通信する必要がある場合、サーバーごとに個別のインスタンスを生成します。

// src/api/client.ts
import axios from 'axios'
import type { AxiosInstance } from 'axios'

const apiClient: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
})

export default apiClient

---

14.1.2. baseURLの環境別設定

• baseURLはハードコーディングしません。必ず環境変数を通じて注入します。
• Vite環境変数の規則に従い、VITE_プレフィックスを使用します。
• 環境別の.envファイルを分離して管理します。

ファイル	用途	設定値の例
.env.development	ローカル開発	http://localhost:8080/api
.env.staging	ステージングデプロイ	https://staging-api.example.com
.env.production	プロダクションデプロイ	https://api.example.com

• import.meta.env.VITE_API_BASE_URLでアクセスし、型安全性のためにenv.d.tsに型を宣言します。

// src/env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

---

14.1.3. デフォルトヘッダー

• Content-Typeはapplication/jsonをデフォルト値として設定します。
• Acceptヘッダーはapplication/jsonをデフォルト値として設定します。
• ファイルアップロードなどContent-Typeが異なるリクエストは、個別リクエストでオーバーライドします。

// ファイルアップロード時のContent-Typeオーバーライド例
await apiClient.post('/files/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
})

• カスタムヘッダーが必要な場合はインターセプターを通じて動的に注入します。インスタンス生成時点では静的な値のみを設定します。

---

14.1.4. タイムアウト設定

• デフォルトタイムアウトは**30,000ms（30秒）**に設定します。
• 長時間を要するリクエストは個別リクエストオプションでタイムアウトをオーバーライドします。
• タイムアウト値は定数として管理します。

// src/api/constants.ts
export const API_TIMEOUT = {
  DEFAULT: 30000,
  UPLOAD: 120000,
  REPORT: 60000,
} as const

// 大容量ファイルアップロード時のタイムアウトオーバーライド
await apiClient.post('/files/upload', formData, {
  timeout: API_TIMEOUT.UPLOAD,
  headers: {
    'Content-Type': 'multipart/form-data',
  },
})

リクエスト種別	タイムアウト	備考
一般APIリクエスト	30,000ms	デフォルト値
ファイルアップロード	120,000ms	リクエストごとにオーバーライド
レポート生成	60,000ms	リクエストごとにオーバーライド

• タイムアウト超過時、AxiosErrorのcodeプロパティがECONNABORTEDに設定されます。これを基にユーザーに適切な案内メッセージを表示しなければなりません。