🚀

JSON.parse()のreviver functionについて

2024/02/10に公開

JavaScript

JSON形式のデータをJSON.parse()を使用してオブジェクトに変換する実装は度々遭遇すると思います。
そこでJSON.parse()のreviver functionを用いて、生成されたオブジェクトが返される前に値を変換する方法を最近知ったので見ていきたいと思います！

JSON.parse()

以下のようなユーザー情報があるとします。

const users = `[
  { "name": "hoge", "age": "20", "birthday": "2000-01-15" },
  { "name": "fuga", "age": "25", "birthday": "1995-05-30" },
  { "name": "piyo", "age": "30", "birthday": "1990-10-25" },
  { "name": "foo", "age": "35", "birthday": "1985-02-20" },
  { "name": "bar", "age": "40", "birthday": "1980-08-15" }
]`

これに対してJSON.parse()するとオブジェクトの配列を生成してくれます。

console.log(JSON.parse(users))

// 出力結果
[
  { name: 'hoge', age: '20', birthday: '2000-01-15' },
  { name: 'fuga', age: '25', birthday: '1995-05-30' },
  { name: 'piyo', age: '30', birthday: '1990-10-25' },
  { name: 'foo', age: '35', birthday: '1985-02-20' },
  { name: 'bar', age: '40', birthday: '1980-08-15' }
]

このように基本的に値は文字列になるため、今まで自分は適宜キャストするなどして扱っていました。

reviver function

JSON.parse()の第二引数にreviver functionを渡すことで生成されたオブジェクトが返される前に値を変換することができます。

使い方は以下のような感じです

const parsedUsers = JSON.parse(users, (key, value) => {
  if (key === 'age') {
    value = Number(value)
  }

  if (key === 'birthday') {
    value = new Date(value)
  }

  return value
})

これによって各プロパティ(key)の値(value)に対して任意の処理をしてくれます。

console.log(parsedUsers)

// 出力結果
[
  { name: 'hoge', age: 20, birthday: 2000-01-15T00:00:00.000Z },
  { name: 'fuga', age: 25, birthday: 1995-05-30T00:00:00.000Z },
  { name: 'piyo', age: 30, birthday: 1990-10-25T00:00:00.000Z },
  { name: 'foo', age: 35, birthday: 1985-02-20T00:00:00.000Z },
  { name: 'bar', age: 40, birthday: 1980-08-15T00:00:00.000Z }
]

このように求めていた形に変換されていることがわかります。

おわりに

reviver functionを使うことで他にも色々なことができそうだなと思いました!
最後まで読んでいただきありがとうございました。

JSON.parse()のreviver functionについて

JSON.parse()

reviver function

おわりに

参考

Discussion