JavaScriptのJSON.stringifyとJSON.parseの使い方を徹底解説！

2024-07-14

当サイトでは一部リンクに広告が含まれています

JavaScriptでJSONを扱うには、JSON.stringify()とJSON.parse()の2つのメソッドが非常に重要です。

これらを使いこなすことで、JavaScriptとJSONの変換が自由自在になります。

本記事では、その使い方を実例とともに詳しく解説していきます。

この記事を書いた人

現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
プログラミングスクールのカリキュラム執筆経験あり

JSONとは

JSONとは「JavaScript Object Notation」の略で、JavaScriptのオブジェクト表記法をベースにした軽量なデータ記述言語です。

プログラミング言語に依存せずデータの受け渡しができるため、さまざまな場面で使われています。

JSONの基本的な記法は以下のようになります。

{
    "name": "Taro",
    "age": 25,
    "city": "Tokyo"  
}

JSONは、{}（中括弧）で囲まれたオブジェクトと、[]（角括弧）で囲まれた配列を組み合わせて構成されます。オブジェクトのプロパティは"キー": 値の形式で記述し、複数ある場合はカンマ,で区切ります。

JSON.stringify()の使い方

JSON.stringify()は、JavaScriptのオブジェクトをJSON形式の文字列に変換するメソッドです。

基本的な使い方

JSON.stringify()の基本的な使い方は次の通りです。

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

const json = JSON.stringify(obj);

console.log(json);
// 出力結果: {"name":"Taro","age":25,"city":"Tokyo"}

JSON.stringify()に渡したオブジェクトが、JSON形式の文字列に変換されました。

整形して出力する

JSON.stringify()の第3引数にスペースの数を指定すると、整形された見やすいJSON文字列を得ることができます。

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

const json = JSON.stringify(obj, null, 2);

console.log(json);
/* 出力結果:
{
  "name": "Taro",
  "age": 25,
  "city": "Tokyo"
}
*/

整形されたJSONが出力されました。スペースの数は数値だけでなく、タブ文字'\t'なども指定できます。

JSON.stringify()の注意点

値がundefined、関数、シンボルの場合は変換できずに無視されます。
日付型は文字列として出力されます。
循環参照があるオブジェクトは変換できません。

JSON.parse()の使い方

JSON.parse()は、JSON形式の文字列をJavaScriptのオブジェクトに変換するメソッドです。

基本的な使い方

JSON.parse()の基本的な使い方は次の通りです。

const json = '{"name":"Taro","age":25,"city":"Tokyo"}';

const obj = JSON.parse(json);

console.log(obj.name); // 出力結果: Taro
console.log(obj.age);  // 出力結果: 25

JSON形式の文字列がオブジェクトに変換され、各プロパティにアクセスできるようになりました。

JSON.parse()の注意点

パースするJSON文字列が不正な形式だとエラーが発生します。
JSON形式にはコメントを書けません。コメント付きのJSON文字列をパースするとエラーになります。

JSON.stringify()とJSON.parse()を使った変換のサンプル

ここからは、JSON.stringify()とJSON.parse()を使ったオブジェクトとJSON文字列の相互変換の具体例をいくつか見ていきましょう。

配列を含むオブジェクトの変換

const obj = {
  name: 'Taro',
  age: 25,
  hobbies: ['sports', 'music']
};

const json = JSON.stringify(obj);

console.log(json); 
// 出力結果: {"name":"Taro","age":25,"hobbies":["sports","music"]}

const parsed = JSON.parse(json);

console.log(parsed.hobbies[0]); // 出力結果: sports

ネストしたオブジェクトの変換

const obj = {
  name: 'Taro',
  age: 25,
  address: {
    city: 'Tokyo',
    country: 'Japan'
  }
};

const json = JSON.stringify(obj);

console.log(json); 
// 出力結果: {"name":"Taro","age":25,"address":{"city":"Tokyo","country":"Japan"}}

const parsed = JSON.parse(json);

console.log(parsed.address.city); // 出力結果: Tokyo

トップレベルが配列の場合

const arr = [
  { name: 'Taro', age: 25 },
  { name: 'Hanako', age: 23 }
];

const json = JSON.stringify(arr);

console.log(json); 
// 出力結果: [{"name":"Taro","age":25},{"name":"Hanako","age":23}]

const parsed = JSON.parse(json);

console.log(parsed[1].name); // 出力結果: Hanako