return Response.json(list)とJSON.stringify(list)の違いとは？

投稿日 7月 2, 2023
著者しんぺー
カテゴリー JavaScript

概要

下記のコードではlistというオブジェクトを作成し、JSON.stringify(list)を使用してJSON形式の文字列に変換しています。これにより、responseJsonという変数には'[{"name":"John","age":30}]'という文字列が代入されています。
また、fetch()関数を使用してAPIからデータを取得し、response.json()を使用してレスポンスの本文を解析します。その結果、JSON形式のデータがJavaScriptオブジェクトとして取得されます。このオブジェクトは、.then()メソッド内でdataという変数に代入され、console.log(data)によってコンソールに出力されます。

const list = [{ name: 'John', age: 30 }];

const responseJson = JSON.stringify(list);
console.log(responseJson);

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

実行結果

//responseJson
// JSONはダブルクォートで囲まれたプロパティ名と値のペアを持つオブジェクトです。例ではオブジェクトが配列で囲まれています。
[{
  "name": "John",
  "age": 30
}]

//data
// JavaScriptのオブジェクトリテラル表記です。JavaScriptでは、プロパティ名をクォートせずに直接書くことができます。
{
  name: 'John',
  age: 30
}

responseJsonにはJSON形式の文字列が、dataにはJavaScriptオブジェクトが出力されます。

response.json()はFetch APIのレスポンスオブジェクトのメソッドであり、レスポンスの本文をJSONとして解析するために使用されます。一方、JSON.stringify()はJavaScriptのオブジェクトをJSON形式の文字列に変換するために使用されます。

比較表

	return Response.json(list)	JSON.stringify(list)
概要	レスポンスの本文をJSONとして解析し、JavaScriptオブジェクトとして返す	JavaScriptオブジェクトをJSON形式の文字列に変換する
使用方法	fetchリクエストの成功時に.then()内で使用	JavaScriptの任意の箇所で使用可能
必要な引数	なし	変換したいオブジェクト（配列やオブジェクトリテラルなど）
返り値	Promiseオブジェクト	JSON形式の文字列
解析の成功時の処理	.then()メソッド内でレスポンスの本文をJavaScriptオブジェクトとして受け取る	–
解析の失敗時の処理	.catch()メソッド内でエラーをハンドリング
出力結果のデータ型	Promiseオブジェクト	文字列