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

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2023年11月)

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

「JavaScriptでJSONとは何なのか知りたい」

「JavaScriptでのJSONの活用方法を習得したい」

「JavaScriptでJSONを用いた実際のコードが確認したい」

✔当記事で学べる内容

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

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

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

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

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について学習してきました。

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

タイトルとURLをコピーしました