Rails APIのレスポンスデータを、キャメルケースに変換した状態でフロントエンド側に返したかったのですが、やり方が分からなかったため、備忘録としてまとめます。
バージョン
- Ruby 3.2.2
- Rails 7.1.2
記事の信頼性
- ぼくは独学で未経験から従業員300名以上の自社開発企業へ転職しました。
- 実務ではVue.jsとRailsを毎日書いています。
- 初心者や駆け出しエンジニアがつまづくポイントも身をもってよく理解しています。
目次
問題
ぼくは今、Vue.jsとRailsで個人開発をしています。
Railsの慣習では変数や関数の名称にスネークケースを使うのに対し、Vue.js（というかTypeScript）の慣習ではキャメルケースを使います。
そのため、Rails側でレスポンスデータをキャメルケースに変換した上でVue.js側に渡したいんですが、やり方が分からず解決に時間がかかってしまいました、、。
なお今回はクイズアプリを題材として、以下のクイズカテゴリの一覧を返すAPIを例に解説します。
class Api::V1::QuizCategoriesController < ApplicationController
def index
@quiz_categories = QuizCategory.all.order(:id)
render json: { quiz_categories: @quiz_categories.as_json }
end
end現状のレスポンスデータは次のとおりです。
quiz-app-api % curl http://localhost:3000/api/v1/quiz_categories
{"quiz_categories":[{"id":1,"title":"Rubyの基礎","description":"まずはRubyの基礎を学びましょう","created_at":"2024-01-20T08:51:43.730Z","updated_at":"2024-01-20T08:51:43.730Z"},{"id":2,"title":"配列と繰り返し処理","description":"配列と繰り返し処理を学びましょう","created_at":"2024-01-20T08:51:43.738Z","updated_at":"2024-01-20T08:51:43.738Z"},{"id":3,"title":"ハッシュとシンボル","description":"ハッシュとシンボルを学びましょう","created_at":"2024-01-20T08:51:43.743Z","updated_at":"2024-01-20T08:51:43.743Z"},{"id":4,"title":"正規表現","description":"正規表現を学びましょう","created_at":"2024-01-20T08:51:43.748Z","updated_at":"2024-01-20T08:51:43.748Z"},{"id":5,"title":"クラス","description":"クラスを学びましょう","created_at":"2024-01-20T08:51:43.753Z","updated_at":"2024-01-20T08:51:43.753Z"},{"id":6,"title":"モジュール","description":"モジュールを学びましょう","created_at":"2024-01-20T08:51:43.775Z","updated_at":"2024-01-20T08:51:43.775Z"},{"id":7,"title":"例外処理","description":"例外処理を学びましょう","created_at":"2024-01-20T08:51:43.781Z","updated_at":"2024-01-20T08:51:43.781Z"},{"id":8,"title":"yieldとProc","description":"yieldとProcを学びましょう","created_at":"2024-01-20T08:51:43.786Z","updated_at":"2024-01-20T08:51:43.786Z"},{"id":9,"title":"パターンマッチ","description":"パターンマッチを学びましょう","created_at":"2024-01-20T08:51:43.792Z","updated_at":"2024-01-20T08:51:43.792Z"},{"id":10,"title":"その他のトピック","description":"その他のトピックを学びましょう","created_at":"2024-01-20T08:51:43.797Z","updated_at":"2024-01-20T08:51:43.797Z"}]}% quiz_categoriesやcreated_at・updated_atがスネークケースとなっているので、これをキャメルケースに変換した状態でレスポンスしたいです。
解決策
まず、app/controllers/application_controller.rbに次のメソッドを定義します。
class ApplicationController < ActionController::API
# スネークケースをキャメルケースに変換するメソッド
def snake_to_camel(obj)
case obj
when Array
obj.map { |v| snake_to_camel(v) }
when Hash
obj.deep_transform_keys { |key| key.to_s.camelize(:lower) }
else
obj
end
end
end
続いて、↑のメソッドを用いて、クイズカテゴリの一覧を返すAPIを以下のように修正します。
class Api::V1::QuizCategoriesController < ApplicationController
def index
@quiz_categories = QuizCategory.all.order(:id)
# snake_to_camel メソッドを使う
render json: snake_to_camel({ quiz_categories: @quiz_categories.as_json })
end
endすると、、、
quiz-app-api % curl http://localhost:3000/api/v1/quiz_categories
{"quizCategories":[{"id":1,"title":"Rubyの基礎","description":"まずはRubyの基礎を学びましょう","createdAt":"2024-01-20T08:51:43.730Z","updatedAt":"2024-01-20T08:51:43.730Z"},{"id":2,"title":"配列と繰り返し処理","description":"配列と繰り返し処理を学びましょう","createdAt":"2024-01-20T08:51:43.738Z","updatedAt":"2024-01-20T08:51:43.738Z"},{"id":3,"title":"ハッシュとシンボル","description":"ハッシュとシンボルを学びましょう","createdAt":"2024-01-20T08:51:43.743Z","updatedAt":"2024-01-20T08:51:43.743Z"},{"id":4,"title":"正規表現","description":"正規表現を学びましょう","createdAt":"2024-01-20T08:51:43.748Z","updatedAt":"2024-01-20T08:51:43.748Z"},{"id":5,"title":"クラス","description":"クラスを学びましょう","createdAt":"2024-01-20T08:51:43.753Z","updatedAt":"2024-01-20T08:51:43.753Z"},{"id":6,"title":"モジュール","description":"モジュールを学びましょう","createdAt":"2024-01-20T08:51:43.775Z","updatedAt":"2024-01-20T08:51:43.775Z"},{"id":7,"title":"例外処理","description":"例外処理を学びましょう","createdAt":"2024-01-20T08:51:43.781Z","updatedAt":"2024-01-20T08:51:43.781Z"},{"id":8,"title":"yieldとProc","description":"yieldとProcを学びましょう","createdAt":"2024-01-20T08:51:43.786Z","updatedAt":"2024-01-20T08:51:43.786Z"},{"id":9,"title":"パターンマッチ","description":"パターンマッチを学びましょう","createdAt":"2024-01-20T08:51:43.792Z","updatedAt":"2024-01-20T08:51:43.792Z"},{"id":10,"title":"その他のトピック","description":"その他のトピックを学びましょう","createdAt":"2024-01-20T08:51:43.797Z","updatedAt":"2024-01-20T08:51:43.797Z"}]}%レスポンスデータのプロパティがキャメルケースになりました！
snake_to_camelメソッドで使っている、deep_transform_keysメソッドにより、ハッシュ内のすべてのキーを対象に、ブロック内の処理を適用できます。
また、deep_transform_keysメソッドはネストされたハッシュに対しても動作するので、とても強力です。
おわりに
deep_transform_keysメソッドは他の場面でも使える機会がたくさんありそうに思いました。
コメント