プロフィール
JavaScript PR

JavaScript – JSONデータを扱う方法: JSON.parse()

 
記事内に商品プロモーションを含む場合があります

本記事では、
JavaScriptでJSONを扱う方法を解説します！

Contents
  1. JSON（JavaScript Object Notation）とは？
  2. JSON.parse()とは？
  3. JSON.parse()の基本的な使い方
  4. JSON.parse()を使う上での注意点
  5. JSON.parse()の高度な使い方: reviver関数
  6. 他によく使う：JSON.stringify()の基本と応用
  7. よくある質問とトラブルシューティング
  8. まとめ

JSON（JavaScript Object Notation）とは？

JSON（JavaScript Object Notation）は、
データをわかりやすく整理して保存したり、
他のプログラムとやり取りするためのフォーマットです。

具体的には、文字列形式でデータを表現します。

例えば、
ウェブページがサーバーから情報を受け取るときに、
この形式でデータが送られてくることがよくあります。

JSONはシンプルな構造を持っていて、
人間にも読みやすく、プログラムでも簡単に扱えるのが特徴です。
例えば、次のような形でデータを表現します。

{
  "name": "Taro",
  "age": 30,
  "hobbies": ["reading", "swimming"]
}

これは「Taro」という名前の人の年齢と
趣味を表すデータです。
この形式をJavaScriptで扱うために、
JSON.parse()というメソッドを使います。

JSONとXMLの違いとJSONのメリット

JSON（JavaScript Object Notation）は、
軽量で読みやすいデータ交換フォーマットとして
広く利用されていますが、
これにはXML（eXtensible Markup Language）
との比較が重要です。

XMLはかつてデータ交換に広く使われていましたが、
タグが多く冗長なため、JSONがその代替として台頭しました。

  • 可読性
    JSONはキーと値のペアでシンプルにデータを表現でき、
    タグを使わないため人間にも理解しやすいです。

    一方で、XMLは階層構造をタグで表現するため、
    コードが長くなりがちです。
  • 軽量性
    JSONはデータをよりコンパクトに記述できるため、
    特に通信量が限られるモバイル環境などでは重要な利点です。
  • クロスプラットフォーム性
    JSONはJavaScriptをはじめ、
    PythonやPHPなど多くのプログラミング言語で
    サポートされているため、言語間のデータ交換に非常に適しています。

JSON.parse()とは？

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

JSONデータはもともと文字列として
送られてくることが多いので、
それをプログラムで使える形に変える必要があります。

例えば、次のように使います。

const jsonString = '{"name": "Taro", "age": 30}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "Taro"

上記のコードでは、
jsonStringという文字列を
JSON.parse()を使ってオブジェクトに変換しています。

この結果、
オブジェクトとしてnameやageの情報に
アクセスできるようになります。

JSON.parse()の基本的な使い方

まずは、
JSON.parse()の最もシンプルな使い方を見てみましょう。

例えば、
サーバーから次のようなJSON形式の文字列が送られてきたとします。

'{"name": "Hanako", "age": 25, "city": "Tokyo"}'


この文字列を
JavaScriptのオブジェクトに変換するためには、
次のコードを使用します。

const data = '{"name": "Hanako", "age": 25, "city": "Tokyo"}';
const parsedData = JSON.parse(data);
console.log(parsedData.name); // "Hanako"


JSON.parse()を使うことで、
文字列がオブジェクトに変わり、
parsedData.nameで名前の「Hanako」にアクセスできます。

このように、
JSON文字列をパース（解析）して、
JavaScript内で使えるオブジェクトに変換することができるのです。

JSON.parse()を使う上での注意点

JSON.parse()は便利ですが、
いくつかのルールを守らないとエラーが発生します。

特に、JSONの文字列は必ずダブルクォーテーション（”）で
囲まれていなければなりません。
次のようなコードはエラーを引き起こします。

const invalidData = "{'name': 'Taro', 'age': 30}";
const obj = JSON.parse(invalidData); // エラー発生！
console.log(obj);


この場合、文字列の中のキーや
値がシングルクォーテーション（’）で囲まれているため、
JSON.parse()はエラーを起こします。
正しいJSON形式は必ずダブルクォーテーションを使い、
次のように書きます。

const validData = '{"name": "Taro", "age": 30}';
const obj = JSON.parse(validData); // 正常に動作
console.log(obj);

JSON.parse()の高度な使い方: reviver関数

JSON.parse()には、
第二引数としてreviver関数というものを指定することができます。
これは、パース中にデータを変換するためのカスタム処理を行うための関数です。

文字列→Dateの変換例

たとえば、
日付形式の文字列を
Dateオブジェクトに変換する場合に便利です。

const jsonString = '{"date": "2023-08-26T10:00:00Z"}';
const obj = JSON.parse(jsonString, (key, value) => {
  if (key === 'date') {
    return new Date(value);
  }
  return value;
});
console.log(obj.date); // Sat Aug 26 2023 19:00:00 GMT+0900 (日本標準時)


この例では、
JSON文字列の中にある日付データを
Dateオブジェクトとして変換しています。

これにより、より高度な処理が可能になります。

文字列→文字列の変換例

次のコードでは、
firstNameというキーを持つプロパティに特別な処理を行い、
値を「たろう」に変更しています。

const json = '{"firstName": "太郎", "lastName": "山田"}';

const obj = JSON.parse(json, (key, value) => {
  if (key === "firstName") {
    return "たろう";
  }
  return value;
});
console.log(obj); // 出力結果: { firstName: "たろう", lastName: "山田" }

この例のように、
特定のプロパティに対して柔軟な操作ができるため、
JSON.parse()の応用として非常に有用です。

他によく使う：JSON.stringify()の基本と応用

これまでJSON.parse()について解説してきましたが、
オブジェクトをJSON文字列に変換するためのメソッド、
JSON.stringify()も同じくらい重要です。

JSON.parse()で受け取ったデータを
再びサーバーに送り返す際や、ファイルに保存する際に使います。

const obj = { name: "Hanako", age: 25, city: "Tokyo" };
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 出力結果: {"name":"Hanako","age":25,"city":"Tokyo"}


このコードでは、
オブジェクトをJSON文字列に変換し、
コンソールに出力しています。

JSON.stringify()はデータを
ネットワーク経由で送信する場合に必須のツールです。

さらに、
JSON.stringify()ではオプションとしてインデントを指定でき、
結果を読みやすくフォーマットできます。

const obj = { name: "Hanako", age: 25, city: "Tokyo" };
const jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);
/* 出力結果:
{
  "name": "Hanako",
  "age": 25,
  "city": "Tokyo"
}
*/


この場合、2つのスペースを使ってインデントされ、
可読性が向上します。

JSON.parse()とJSON.stringify()を組み合わせた実用例

ここでは、JSON.parse()とJSON.stringify()を
連携させた実用例を紹介します。

例えば、
ユーザーが入力したデータをサーバーに送信する前に、
オブジェクトをJSON形式に変換し、
受信後に再びオブジェクトに戻して処理する流れです。

// ユーザーのデータ
const userData = { name: "Taro", age: 30 };

// サーバーに送信する前にJSONに変換
const jsonToSend = JSON.stringify(userData);

// サーバーから受信したJSONを再びオブジェクトに変換
const receivedData = '{"name":"Taro","age":30}';
const parsedData = JSON.parse(receivedData);

console.log(parsedData.name); // "Taro"
javascriptCopy code

このように、
JSON.stringify()とJSON.parse()を組み合わせることで、
データの送受信や操作がスムーズに行えます。
特にWebアプリケーションやAPI通信で頻繁に使用されるパターンです。

よくある質問とトラブルシューティング

JSON.parse()を使用するときによくあるエラーとして、
「Unexpected token」や
「Expected double-quoted property name in JSON」エラーがあります。

これは、JSON形式が間違っている場合に発生します。
たとえば、次のようにカンマが余分にあるとエラーになります。

console.log(JSON.parse('{"name": "Taro", "age": 30,}'));


上記のJSONは、
最後のプロパティに余分なカンマがあるため無効です。

正しいJSON形式では、
最後のプロパティにカンマを置くことはできません。

このようなエラーが発生した場合は、
ブラウザのコンソールやエディタのエラーメッセージを確認し、
カンマの位置やクォーテーションに注意して修正しましょう。

まとめ

JSON.parse()は、
ウェブアプリケーションのデータ処理において
非常に便利なツールです。

初心者でも使いやすく、
基本的な使い方さえマスターすれば、
複雑なデータを簡単に扱えるようになります。

また、reviver関数などを使って、
より高度なデータ処理も可能です。

ぜひ、JSON.parse()を活用して、
効率的なデータ管理を実現しましょう！

RELATED POST