概要
下記のコードでは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オブジェクト | 文字列 |
最後に

今回はreturn Response.json(list)とJSON.stringify(list)の違いについて解説しました。
この記事があなたの助けやヒントになっていれば幸いです。
最後までありがとうございました。