JavaScriptでJSON文字列をオブジェクトに変換する方法を初心者向けに解説！JSON.parseの使い方ガイド

1. JSON文字列とは何かを理解しよう

1. JSON文字列とは何かを理解しよう

JSON文字列は、プログラム間でデータをやり取りするための標準フォーマットです。たとえば、サーバーから送られてくるデータやAPIから取得するデータはほとんどがJSON形式です。文字列の形は{"キー":"値"}のように、キーと値の組み合わせで書かれています。

const jsonString = '{"name":"太郎","age":20}';
console.log(jsonString);

{"name":"太郎","age":20}

2. JSON.parseで文字列をオブジェクトに変換する方法

2. JSON.parseで文字列をオブジェクトに変換する方法

JavaScriptでJSON文字列を使える形に変換するには、JSON.parseメソッドを使います。このメソッドに文字列を渡すと、JavaScriptのオブジェクトに変換され、プロパティにアクセスできるようになります。

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

3. JSON文字列に配列が含まれている場合の変換

3. JSON文字列に配列が含まれている場合の変換

JSON文字列の中に配列が含まれている場合も、JSON.parseで簡単にオブジェクトに変換できます。配列の要素もJavaScriptの配列として扱えます。

const jsonArray = '{"fruits":["りんご","バナナ","オレンジ"]}';
const objArray = JSON.parse(jsonArray);
console.log(objArray.fruits[0]); // りんご
console.log(objArray.fruits.length); // 3

4. ネストしたJSON文字列をオブジェクトに変換する方法

4. ネストしたJSON文字列をオブジェクトに変換する方法

JSONはオブジェクトの中にオブジェクトを持つこともできます。ネストしたJSONもJSON.parseで正しく変換できます。

const nestedJson = '{"person":{"name":"花子","age":25}}';
const nestedObj = JSON.parse(nestedJson);
console.log(nestedObj.person.name); // 花子
console.log(nestedObj.person.age);  // 25

5. JSON.parseを使うときの注意点

5. JSON.parseを使うときの注意点

JSON.parseを使うときは、文字列が正しいJSON形式になっている必要があります。カンマの付け忘れやダブルクォーテーションの不一致があると、エラーが発生します。

const invalidJson = '{"name":"太郎", "age":20'; // カッコ閉じ忘れ
// JSON.parse(invalidJson); // ここでエラーになる

必ずJSON形式が正しいか確認してから使用しましょう。

6. サーバーから取得したJSON文字列をオブジェクトに変換する例

6. サーバーから取得したJSON文字列をオブジェクトに変換する例

実際にAPIなどから取得したJSON文字列も、JSON.parseでオブジェクトに変換できます。これにより、データをプログラム内で自由に操作できるようになります。

const response = '{"id":1,"title":"JavaScript入門"}';
const post = JSON.parse(response);
console.log(post.id);    // 1
console.log(post.title); // JavaScript入門

7. JSON.parseで日付や特殊な値を扱う方法

7. JSON.parseで日付や特殊な値を扱う方法

JSONでは日付や特殊な値は文字列として扱われます。必要に応じて変換して使うことができます。例えば日付はnew Date()でオブジェクトに変換できます。

const jsonDate = '{"date":"2026-02-25T12:00:00Z"}';
const objDate = JSON.parse(jsonDate);
const date = new Date(objDate.date);
console.log(date.getFullYear()); // 2026
console.log(date.getMonth()+1);  // 2 (月は0始まり)

8. JSON.parseを使った複雑なデータ操作の基本

8. JSON.parseを使った複雑なデータ操作の基本

JSON.parseでオブジェクトに変換すれば、複雑なデータもJavaScriptのコードで簡単に操作できます。繰り返しや条件分岐も可能で、配列やオブジェクトの中の値を自由に取得したり更新したりできます。

const jsonData = '{"users":[{"name":"太郎","age":20},{"name":"花子","age":25}]}';
const objData = JSON.parse(jsonData);
objData.users.forEach(user => {
  console.log(user.name + "は" + user.age + "歳です");
});

太郎は20歳です
花子は25歳です

まとめ

まとめ

本記事では、JavaScriptでJSON文字列をオブジェクトに変換する基本から応用までを初心者向けに丁寧に解説しました。JSONはデータのやり取りに不可欠なフォーマットで、文字列のままではプログラムで操作できないため、JSON.parseを使用してオブジェクトに変換する必要があります。基本的な使い方として、単純なキーと値の組み合わせから始まり、配列やネストしたオブジェクトも正しく扱えることを学びました。また、サーバーから取得したAPIのJSONデータや日付データの扱い方も確認しました。重要なポイントとして、JSON形式が正しくない場合にはエラーが発生すること、そして複雑なデータ構造もオブジェクトに変換すれば繰り返し処理や条件分岐で柔軟に操作できることが理解できました。
さらに、forEachやプロパティアクセスの方法を活用することで、配列の要素やネストしたオブジェクトの値を簡単に取得したり更新したりできる点もポイントです。JavaScript初心者でも、今回の手順を踏めばJSONデータの取り扱いに困ることはありません。

// サンプルまとめプログラム
const jsonData = '{"users":[{"name":"太郎","age":20},{"name":"花子","age":25}]}';
const objData = JSON.parse(jsonData);

objData.users.forEach(user => {
if (user.age >= 20) {
console.log(user.name + "は成人です");
} else {
console.log(user.name + "は未成年です");
}
});

太郎は成人です
花子は成人です