◎ Active Model Serializerを使用した理由

• キーの命名規則の違いを解消する為
• フロントエンド(TypeScript)は、キャメルケース
• バックエンド(Ruby)は、スネークケース

◎ Active Model Serializer 導入

＄　rails g serializer user

userの部分は、任意のモデル名を入れる
app/serializers/user_serializer.rb というファイルが生成される

◎ User Serializer

app/serializers/user_serializer.rb

class UserSerializer < ActiveModel::Serializer
  attributes :id, :name, :email, :password, :created_at, :updated_at
end

attributesには、jsonで返してほしいキーを設定する

{
	"id": 1,
	"name": "Matsui Ryota",
	"email": "ryota123@example.com",
	"password": "password",
	"created_at": 作成時間,
	"updated_at": 更新時間
}

上記のattributesの設定だと、このようなjsonが返るようになります。

◎ 命名規則の違い

現在のUserSerializerを使用してレスポンスすると、TypeScriptの型の指定がキャメルケースの為、うまくデータが扱えなくなります。
UserSerializerを使用して、レスポンスをするときには、キーをキャメルケースにして返す設定をします。

◎ レスポンス時のキーをキャメルケースに変換する設定

app/initializersの中に、activemodelserializers.rbというファイルを作成します。

app/initializers/active_model_serializers.rb

ActiveModelSerializers.config.key_transform = :camel_lower

このような記述をするだけです。

◎ コントローラーで値をレスポンスする

app/controllers/users_controller.rb

class Api::V1::UsersController < ApplicationController
    def index
        users = User.all
        render json: user, serializer: UserSerializer
    end
end

このようにシリアライザーを設定することで、作成したUserSerializerを適用したデータを返すことができます。