TL;DR

このページでは、JSON.parse() の実装方法について解説しますね。一言でいうとJSON.parse()とは、JSON 形式の文字列を JavaScript のオブジェクトに変換するためのメソッドです。

JSON.parse() とは？

まず初めに、JSON.parse() とは何かを説明します。JSON.parse() は、JavaScript の標準組み込みオブジェクトである JSON のメソッドで、JSON 形式の文字列を JavaScript のオブジェクトに変換します。これにより、サーバーから受け取った JSON 形式のデータを、JavaScript で扱える形式に変換できます。

以下は、JSON.parse() の基本的な使い方の例です。

const jsonString = '{"name":"John", "age":30, "city":"New York"}'
const jsonObject = JSON.parse(jsonString)
console.log(jsonObject.name) // John

この例では、JSON 形式の文字列 jsonString を JSON.parse() で JavaScript のオブジェクト jsonObject に変換しています。変換後の jsonObject からは、. 演算子を使ってプロパティにアクセスできます。

しかし、この JSON.parse() には注意点があります。JSON.parse() は、形式が正しい JSON 文字列でなければエラーを投げます。そのため、正しくない JSON 文字列を解析しようとすると、プログラムは停止します。

const invalidJsonString = "{name:'John', age:30, city:'New York'}" // シングルクォートは JSON 形式では無効
try {
  const jsonObject = JSON.parse(invalidJsonString) // エラー
} catch (error) {
  console.error(error)
}

JSON.stringify() とは？

他に、JSON.stringify() というメソッドも存在します。JSON.parse() が JSON 形式の文字列を JavaScript のオブジェクトに変換するのに対して、JSON.stringify() は JavaScript のオブジェクトを JSON 形式の文字列に変換します。

JSON.stringify() は以下のように使用します：

const user = {
  name: 'Taro',
  age: 25,
  city: 'Tokyo',
}

const jsonString = JSON.stringify(user)
console.log(jsonString) // '{"name":"Taro","age":25,"city":"Tokyo"}'

ここでは、JavaScript のオブジェクト user を JSON.stringify() で JSON 形式の文字列に変換しています。

さらに、JSON.stringify() にはリプレイサー関数というものを使って、文字列化の挙動をカスタマイズすることもできます。例えば以下のように利用できます：

const user = {
  name: 'Taro',
  age: 25,
  city: 'Tokyo',
}

const replacer = (key: string, value: any) => {
  if (typeof value === 'string') {
    return value.toUpperCase()
  }
  return value
}

const jsonString = JSON.stringify(user, replacer)
console.log(jsonString) // '{"name":"TARO","age":25,"city":"TOKYO"}'

この例では、リプレイサー関数 replacer を使って、すべての文字列値を大文字に変換するように JSON.stringify() の挙動をカスタマイズしています。

このように、JSON.stringify() を使うと、JavaScript のオブジェクトを JSON 形式の文字列に変換することができ、さらにその変換処理をリプレイサー関数でカスタマイズすることもできます。これは、サーバーにデータを送信する際に非常に便利な機能です。

Next.js で、JSON.parse() を実装

それでは、Next.js と TypeScript で、JSON.parse() を使った実装を見ていきましょう。

ソースコード：/pages/index.tsx

import { useEffect, useState } from 'react'

type User = {
  name: string
  age: number
  city: string
}

export default function Home() {
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => {
    fetch('/api/user')
      .then((response) => response.text())
      .then((data) => {
        const userData = JSON.parse(data)
        setUser(userData)
      })
  }, [])

  return (
    <div>
      {user && (
        <div>
          {user.name} lives in {user.city} and is {user.age} years old.
        </div>
      )}
    </div>
  )
}

ここでは、Next.js のページコンポーネント /pages/index.tsx を定義しています。このコンポーネントでは、React の useEffect フックを使って、ページがレンダリングされたときに /api/user からユーザー情報を取得します。

取得したデータは JSON 形式の文字列として返されます。そこで、JSON.parse() を使って、この JSON 形式の文字列を JavaScript のオブジェクトに変換します。そして、そのオブジェクトを useState フックで管理されている user ステートにセットします。

この user ステートは、取得したユーザー情報を表示するために使われます。user ステートが null でなければ（つまり、ユーザー情報が取得されていれば）、そのユーザー情報を <div> 要素内で表示します。

JSON.parse() を活用する

さて、ここまで見てきたように JSON.parse() は、サーバーから取得した JSON 形式のデータを JavaScript のオブジェクトに変換するための有用なメソッドです。

では、さらに応用的な例として、JSON.parse() の第二引数にリバイバー関数を指定することで、変換処理をカスタマイズする方法を見てみましょう。

const jsonString = '{"date":"2023-06-21T00:00:00.000Z"}'

const dateReviver = (key: string, value: any) => {
  const dateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/
  if (typeof value === 'string' && dateFormat.test(value)) {
    return new Date(value)
  }
  return value
}

const jsonObject = JSON.parse(jsonString, dateReviver)
console.log(jsonObject.date) // 2023-06-21T00:00:00.000Z (Date object)

この例では、JSON.parse() の第二引数にリバイバー関数 dateReviver を指定しています。リバイバー関数は、変換前のキーと値を引数に取り、変換後の値を返す関数です。

dateReviver は、値が ISO 8601 形式の日付文字列であるかどうかをチェックし、日付文字列であれば Date オブジェクトに変換します。そうでなければ、値をそのまま返します。

このように、JSON.parse() を使うと、JSON 形式のデータを簡単に JavaScript のオブジェクトに変換することができ、さらに変換処理をリバイバー関数でカスタマイズすることも可能になります。これは、サーバーとの通信を行う際に非常に役立つテクニックで、より高度なアプリケーションを開発する際にも必要な知識となります。