Rails APIからReactに渡すデータを整形する方法

RailsAPI＋Reactという構成でアプリを作っているとデータを整える必要がある時が多々あると思います。

例えば以下のようなユーザーデータがあるとします。

{
  name: 'taro'
  age: 21
  sex: 'male'
  phone_number: 08012341234
  post_code: 'xxx-xxxx'
  prefecture: 'ZZZ県'
  city: 'ZZZ市'
  ward: 'ZZZ区'
  town: 'ZZZ町'
}

React側で住所が欲しいときに一々、郵便番号や県、市などを繋げるのは面倒ですよね。こういう時はRailsでシリアライザーをつかうと便利です。シリアライザーは以下のようになります。

class UserSerializer < ActiveModel::Serializer
  attributes :name, :age, :sex, :phone_number, :post_code, :prefecture, :city, :ward, :town

  def address
    object.post_code + " " + object.prefecture + object.city + object.ward + object.town
  end
end

このようにRails側に一度だけ書くことでReactからはこのような感じで呼び出せるようになります。

const user = fetchUser
console.log(user.address) //=> xxx-xxxx ZZZ県ZZZ市ZZZ区ZZZ町

簡単でしたがシリアライザーについては以上になります。

最後に、シリアライザーはかなり便利なのですが未経験の方で使っている方はあまりいません。なので未経験の方がポートフォリオに組み込むとそれを見た採用担当は「おっ、わかってるな」となると思います。他の未経験者との差別化ですね。

また、シリアライザーとは全く別ものなのですがGraphQLもフロント側が取得するデータを自由に選べるという点で便利です。気になる方は調べてみてください。