Zenn
🐫

【Nuxt】APIレスポンスを自動でcamelCaseに変換するマイベストプラクティス(SSR対応)

2025/02/04に公開
Nuxt
Vue.js
API
Nuxt 3
tech

NuxtでAPIを利用する際、サーバーからのレスポンスがスネークケース (snake_case) で返ってくることがあります。しかし、フロントエンドではキャメルケース (camelCase) を使用するのが一般的です。

本記事では、Nuxtのサーバーミドルウェアを活用して、APIレスポンスのキーを自動的にcamelCaseへ変換する方法を解説します。

目的

  • APIのレスポンスデータを統一的にcamelCaseへ変換
  • フロントエンドのコードを統一し、一貫性のある変数命名を実現
  • ミドルウェアを活用して、全APIリクエストを自動で変換

実装方法

1. camelcase-keys パッケージをインストール

まず、レスポンスデータのキーを変換するために camelcase-keys をインストールします。

npm install camelcase-keys

または

yarn add camelcase-keys

2. server/middleware/fetch.ts を作成

Nuxt 3 では server/middleware/ ディレクトリにミドルウェアを定義することで、サーバー側のAPIリクエスト処理をカスタマイズできます。

以下のように server/middleware/fetch.ts を作成し、APIレスポンスを自動的に camelCase に変換する処理を記述します。

server/middleware/fetch.ts
import camelcaseKeys from 'camelcase-keys'
import { defineEventHandler } from 'h3'

export const createCustomFetch = (baseURL: string) => {
  return $fetch.create({
    baseURL,
    onRequest({ options }) {
      console.log('Server-side request:', options)
    },
    onResponse({ response }) {
      if (response._data && typeof response._data === 'object') {
        response._data = camelcaseKeys(response._data, { deep: true })
      }
    },
  })
}

export default defineEventHandler((event) => {
  const config = useRuntimeConfig()
  event.context.customFetch = createCustomFetch(config.public.apiBaseUrl)
})

コードの解説

createCustomFetch 関数

この関数では、カスタムの $fetch インスタンスを作成し、baseURL を設定します。

  1. onRequest フック: APIリクエストの前にオプションをログに記録。
  2. onResponse フック: APIレスポンスを受け取った後、camelcaseKeys を適用して、レスポンスデータのキーを自動変換。
  3. event.context.customFetch にセットすることで、イベント内でカスタム $fetch を利用可能にする。

defineEventHandler

この関数を利用することで、NuxtのAPIミドルウェアとして動作させることができます。

動作確認

APIレスポンスの変換前

サーバーから以下のようなスネークケースのデータが返ってくるとします。

{
  "user_id": 123,
  "user_name": "John Doe",
  "profile_data": {
    "profile_image_url": "https://example.com/image.jpg"
  }
}

APIレスポンスの変換後

ミドルウェアを適用することで、フロントエンドで受け取るデータはcamelCase になります。

{
  "userId": 123,
  "userName": "John Doe",
  "profileData": {
    "profileImageUrl": "https://example.com/image.jpg"
  }
}

なぜミドルウェアを使うのか？

  1. 全てのAPIレスポンスを自動変換 → 毎回 camelcaseKeys() を手動で呼び出す必要がなくなる
  2. 一貫性のあるデータ形式 → フロントエンドでスネークケースを考慮せずに済む
  3. コードのシンプル化 → API呼び出しの度に変換処理を書く必要がなくなる

まとめ

Nuxt 3 のサーバーミドルウェアを活用することで、APIレスポンスを自動的に camelCase に変換し、フロントエンドのコードを統一することができます。

  • ミドルウェアを活用して、APIレスポンスを統一的にcamelCase化
  • カスタム $fetch を作成し、全APIリクエストに適用可能
  • データの一貫性を保ち、フロントエンドの開発を効率化

これにより、APIレスポンスを簡潔に扱うことができ、可読性や保守性が向上します。

Discussion