JavaScriptでJSONを簡単解析！7つのサンプルコードで完全マスター

はじめに

この記事を読めば、JavaScriptでJSONデータを簡単に解析できるようになります。

初心者の方でも理解できる内容で、実用的な7つのサンプルコードを通じて、JSONデータの解析や操作に自信がつくこと間違いなしです。

●JavaScriptとJSONについて

まずは、JavaScriptとJSONの基本的な概念を理解しましょう。

○JSONとは

JSON（JavaScript Object Notation）は、データ交換のための軽量なテキスト形式のデータ表現です。

JSONは人間にとって読み書きが容易であり、機械にとっても簡単にパースや生成ができます。

主にウェブアプリケーションで、サーバーとクライアント間のデータのやり取りに用いられます。

○JavaScriptとJSONの関係

JavaScriptはウェブブラウザで動作するプログラミング言語で、ウェブページに動的な機能を追加することができます。

JSONはJavaScriptのオブジェクト表記法を元にしており、JavaScriptでJSONデータを簡単に扱うことができます。

●JSONデータの解析方法

JavaScriptでJSONデータを扱う際には、主に下記の2つのメソッドを使用します。

○JSON.parse

JSON形式の文字列をJavaScriptのオブジェクトに変換するために使用します。

○JSON.stringify

JavaScriptのオブジェクトをJSON形式の文字列に変換するために使用します。

それでは、具体的なサンプルコードを見ていきましょう。

●サンプルコード1：JSONデータの基本的なパース

このコードでは、JSON形式の文字列をJavaScriptのオブジェクトに変換しています。

この例では、JSON形式の文字列をJSON.parse()を使ってオブジェクトに変換し、その後オブジェクトのプロパティにアクセスしています。

// JSON形式の文字列
const jsonString = '{"name": "Taro", "age": 25}';

// 文字列をオブジェクトに変換
const obj = JSON.parse(jsonString);

// オブジェクトのプロパティにアクセス
console.log(obj.name); // 出力：Taro
console.log(obj.age); // 出力：25

●サンプルコード2：JSONデータのネスト構造をパース

このコードでは、ネストされたJSONデータを解析しています。

具体的には、ネストされたJSON形式の文字列をJSON.parse()でオブジェクトに変換し、その後オブジェクトのネストされたプロパティにアクセスしています。

// ネストされたJSON形式の文字列
const jsonString = '{"user": {"name": "Taro", "age": 25}, "skills": ["JavaScript", "HTML", "CSS"]}';

// 文字列をオブジェクトに変換
const obj = JSON.parse(jsonString);

// オブジェクトのネストされたプロパティにアクセス
console.log(obj.user.name); // 出力：Taro
console.log(obj.user.age); // 出力：25
console.log(obj.skills[0]); // 出力：JavaScript

●サンプルコード3：JSONデータを再び文字列に変換

このコードでは、JavaScriptのオブジェクトをJSON形式の文字列に戻す方法を紹介しています。

この例では、オブジェクトをJSON.stringify()でJSON形式の文字列に変換しています。

// JavaScriptのオブジェクト
const obj = {name: "Taro", age: 25};

// オブジェクトをJSON形式の文字列に変換
const jsonString = JSON.stringify(obj);

console.log(jsonString); // 出力：'{"name":"Taro","age":25}'

●サンプルコード4：JSONデータをフィルタリング

このコードでは、JSONデータの配列から特定の条件を満たす要素を抽出する方法を紹介しています。

この例では、Array.prototype.filter()を使って年齢が20歳以上のユーザーのみを抽出しています。

// JSON形式の文字列
const jsonString = '[{"name": "Taro", "age": 25}, {"name": "Hanako", "age": 18}, {"name": "Jiro", "age": 22}]';

// 文字列をオブジェクトに変換
const users = JSON.parse(jsonString);

// 年齢が20歳以上のユーザーを抽出
const adultUsers = users.filter(user => user.age >= 20);

console.log(adultUsers); // 出力：[{name: "Taro", age: 25}, {name: "Jiro", age: 22}]

●サンプルコード5：JSONデータをソート

このコードでは、JSONデータの配列を特定のプロパティでソートする方法を紹介しています。

具体的には、Array.prototype.sort()を使って年齢を基準に昇順でソートしています。

// JSON形式の文字列
const jsonString = '[{"name": "Taro", "age": 25}, {"name": "Hanako", "age": 18}, {"name": "Jiro", "age": 22}]';

// 文字列をオブジェクトに変換
const users = JSON.parse(jsonString);

// 年齢で昇順にソート
const sortedUsers = users.sort((a, b) => a.age - b.age);

console.log(sortedUsers);
// 出力：[{name: "Hanako", age: 18}, {name: "Jiro", age: 22}, {name: "Taro", age: 25}]

●サンプルコード6：JSONデータを検索

このコードでは、JSONデータの配列から特定の条件を満たす要素を検索する方法を紹介しています。

この例では、Array.prototype.find()を使って名前が「Taro」のユーザーを検索しています。

// JSON形式の文字列
const jsonString = '[{"name": "Taro", "age": 25}, {"name": "Hanako", "age": 18}, {"name": "Jiro", "age": 22}]';

// 文字列をオブジェクトに変換
const users = JSON.parse(jsonString);

// 名前が「Taro」のユーザーを検索
const taro = users.find(user => user.name === "Taro");

console.log(taro); // 出力：{name: "Taro", age: 25}

●サンプルコード7：JSONデータを使った簡単なグラフ作成

このコードでは、JSONデータを利用して簡単な棒グラフを作成する方法を紹介しています。

この例では、HTML要素とCSSスタイルを使ってグラフを描画しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    .bar {
      display: inline-block;
      background-color: blue;
      margin-right: 2px;
    }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script>
    // JSON形式のデータ
    const jsonString = '[{"item": "A", "value": 10}, {"item": "B", "value": 15}, {"item": "C", "value": 8}]';

    // 文字列をオブジェクトに変換
    const data = JSON.parse(jsonString);

    // グラフを描画
    const chart = document.getElementById("chart");
    data.forEach(d => {
      const bar = document.createElement("div");
      bar.className = "bar";
      bar.style.width = `${d.value * 10}px`;
      bar.style.height = "20px";
      chart.appendChild(bar);
    });
  </script>
</body>
</html>