初心者向け｜JavaScriptでJSONデータを操作する方法

（最終更新月：2023年11月）

✔以下のような方に向けて書かれています

✔当記事で学べる内容

• JavaScriptにおけるJSONの基礎
• JavaScriptでのJSONの活用手法とその実践方法
• JavaScriptとJSONを組み合わせた具体的なコード例

当記事では、JavaScriptにおけるJSONの基本概念から始め、その具体的な活用方法および実際のコードまで詳細に解説していきます。

ぜひ最後までお読みください。

JSONの基本

こちらでは、JSONの基本的な概念とデータ構造について解説します。

JSONの理解は、データの取り扱いにおいて非常に重要です。

• JSONのとは
• JSONのデータ構造

JSONとは

JSON (JavaScript Object Notation) は、データを格納または転送するための軽量なフォーマットのこと。

その形式は人間が読み書きしやすく、マシンが解析して生成することも容易です。

多くのプログラミング言語においてデータを交換する標準的な方法となっています。

とくにウェブアプリケーションにおいては、サーバーとクライアント間のデータ転送フォーマットとして広く用いられているものです。

{
  "name": "John",
  "age": 30,
  "hobbies": ["reading", "travelling"]
}

JSONのデータ構造

JSONの基本的な構造は以下の2つの構造から成り立っています。

• 名前/値のペアの集合（オブジェクト）
• 値の順序付けられたリスト（配列）

名前/値のペアの集合（オブジェクト）

JSONオブジェクトは波括弧（{}）で囲まれ、名前（キー）と値のペアがコロン（:）で区切られています。

各ペアはコンマ（,）で区切られます。

{ "name": "John Doe", "age": 30 }

値の順序付けられたリスト（配列）

JSON配列は角括弧（[]）で囲まれ、値がコンマ（,）で区切られています。

["apple", "banana", "cherry"]

値としては、以下のものが使用できます。

• 文字列
• 数値
• オブジェクト（名前/値のペアの集合）
• 配列
• 真偽値（true/false）
• null

JSONはデータのみを含み、関数やコメントなどは含みません。

これにより、データ転送に特化したシンプルなフォーマットを提供します。

JSONはJavaScriptのオブジェクトリテラル記法に基づいていますが、JSONフォーマットはJavaScriptに限定されず、多くのプログラミング言語でサポートされています。

JavaScriptとJSON

こちらでは、JavaScriptでのJSONの活用方法と、オブジェクトとJSONの相互変換方法について詳しく解説します。

• JavaScriptでのJSON活用方法
• オブジェクトとJSON: 相互変換

JavaScriptでのJSON活用方法

JavaScriptでは、以下2つのメソッドで、JSONを操作します。

• JSON.parse()：JSON文字列をJavaScriptのオブジェクトに変換
• JSON.stringify()：JavaScriptのオブジェクトをJSON文字列に変換

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

オブジェクトとJSON: 相互変換

JavaScriptのオブジェクトとJSONは非常に似ていますが、厳密には異なるものです。

例えば、JSONのキーはダブルクォートで囲む必要があります。

実践: JSONの操作

こちらでは、実際にJSONを操作する方法と、それを活用したプロジェクトの例を紹介します。

• ハンズオン: JSONを使用したプロジェクト
• 課題: スキルチェック

ハンズオン: JSONを使用したプロジェクト

例として、JSONを使用してユーザー情報を管理する小さなプロジェクトを考えます。

このプロジェクトでは、ユーザーの名前、年齢、趣味などの情報をJSON形式で保存し、それを読み込んで表示する機能を実装します。

{
  "user": {
    "name": "John Doe",
    "age": 30,
    "hobbies": ["reading", "hiking", "coding"]
  }
}

課題: スキルチェック

こちらの課題では、読者の皆さんに実際に手を動かしてもらい、JSONの操作スキルを確認します。

例えば、与えられたJSONデータから特定の情報を抽出する、またはJSONデータを加工して新しいデータを生成するなどの課題を提供します。

以下は、上記のJSONデータをJavaScriptで操作するためのサンプルコードです。

• JSONデータの読み込みと表示
• ユーザー情報の更新
• ユーザー情報の動的な取得
• ユーザー情報のHTMLへの埋め込み

JSONデータの読み込みと表示

// JSONデータ
const jsonString = `{
  "user": {
    "name": "John Doe",
    "age": 30,
    "hobbies": ["reading", "hiking", "coding"]
  }
}`;

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

// ユーザー情報の表示
console.log(`Name: ${userObject.user.name}`);
console.log(`Age: ${userObject.user.age}`);
userObject.user.hobbies.forEach((hobby, index) => {
  console.log(`Hobby ${index + 1}: ${hobby}`);
});

ユーザー情報の更新

// ユーザーの年齢を更新する
userObject.user.age = 31;

// ユーザーの趣味を更新する
userObject.user.hobbies.push('painting');

// 更新されたオブジェクトをJSON文字列に変換
const updatedJsonString = JSON.stringify(userObject, null, 2);
console.log(updatedJsonString);

ユーザー情報の動的な取得

// ユーザー名を取得する関数
function getUserName(jsonObj) {
  return jsonObj.user.name;
}

// ユーザーの趣味を取得する関数
function getUserHobbies(jsonObj) {
  return jsonObj.user.hobbies.join(', ');
}

// 使用例
console.log(`User Name: ${getUserName(userObject)}`);
console.log(`User Hobbies: ${getUserHobbies(userObject)}`);

ユーザー情報のHTMLへの埋め込み

// HTMLの要素にユーザー情報を埋め込む
function displayUserInfo(jsonObj) {
  document.getElementById('userName').textContent = jsonObj.user.name;
  document.getElementById('userAge').textContent = jsonObj.user.age.toString();
  document.getElementById('userHobbies').textContent = jsonObj.user.hobbies.join(', ');
}

// HTML内の対応するIDを持つ要素に情報を表示する
// <div id="userName"></div>
// <div id="userAge"></div>
// <div id="userHobbies"></div>
displayUserInfo(userObject);

これらのコードスニペットは、JSONデータの読み込み、更新、取得、およびHTMLへの埋め込みの基本を示しています。これらを必要に応じて拡張して、さらに複雑な機能を実装することができます。

まとめ

当記事では、JavaScriptにおけるJSONについて学習してきました。

この知識を基に、効果的なデータ処理をおこなってください。