Fetch · JSON API 境界
Fetch API snake_case ↔ camelCase
JSON の Fetch 呼び出しをラップし、アプリ内部は camelCase、wire format は snake_case のまま保ちます。
シリアライズ前に JSON リクエストを変換
import { keysToSnake } from "./api-case"
export async function postJson<T>(url: string, body: unknown): Promise<T> {
const response = await fetch(url, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify(keysToSnake(body)),
})
if (!response.ok) {
throw new Error(`API request failed: ${response.status}`)
}
return response.json() as Promise<T>
}アプリオブジェクトを snake_case に変換してから JSON.stringify を呼び出します。
返却前に解析済みレスポンスを変換
import { keysToCamel } from "./api-case"
export async function getJson<T>(url: string): Promise<T> {
const response = await fetch(url)
if (!response.ok) {
throw new Error(`API request failed: ${response.status}`)
}
const wireData: unknown = await response.json()
return keysToCamel(wireData) as T
}response.json() の結果を camelCase へ再帰変換して呼び出し元へ返します。
本番利用時の注意点
- JSON の request/response を持つ endpoint にだけ使用し、FormData、Blob、ArrayBuffer、stream、file upload は変換しないでください。
- 文字列値を変更しないよう、raw text ではなく response.json() の後で変換します。
- 異なるキーが同じ出力キーになる可能性がある場合は collision detection を有効にします。
- 共通 API client module に集約し、各 component で変換ロジックを重複させないでください。
JSON 境界をオンラインでテスト
ネスト、配列、除外キー、stop path、接頭辞、衝突、key-only diff をブラウザで確認できます。
.json ファイルをドロップ、または端末から選択
ファイルはブラウザ内でのみ読み取ります。最大 5 MB。
変換後 JSON
{
"userProfile": {
"firstName": "Ada",
"createdAt": "2026-09-12"
}
}解析、ファイル読み込み、整形、キー変換はすべてブラウザ内で実行されます。JSON 入力は変換サーバーへ送信されません。