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

概要

下記のコードでは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)の違いについて解説しました。
この記事があなたの助けやヒントになっていれば幸いです。
最後までありがとうございました。

この記事を書いた人

アバター

しんぺー

Web制作会社のフロントエンドエンジニア。
2019年9月よりWeb制作を独学、2021年3月ジョブチェンジでエンジニアに。

プログラミングを始めたい方や、学習中の方、副業・転職したい方に向けて発信していますが、業務で覚えた技術がメインになってます。

趣味は音楽です。下の「ウェブサイト」に趣味で作ったサイトをリンクしていますので、興味ある方はどうぞ。