Zenn
🎉

JSONについて

2024/05/16に公開
JSON
tech

こちらは、JSONを段階的に学習し、実践できるような課題とその回答例を提供する形式で整理しました。この課題は、基本から応用までをカバーし、学習者が徐々に理解を深められるように設計されています。

JSONの基本を理解するステップ

ステップ1: 基本的なJSONオブジェクトを作成する

課題1: 基本的なJSONオブジェクトを作成する

  • 要件: 以下の情報を含むJSONオブジェクトを作成してください。
    • 名前: "山田太郎"
    • 年齢: 30
    • 職業: "プログラマー"

回答1:

{
  "name": "山田太郎",
  "age": 30,
  "job": "プログラマー"
}

ステップ2: ネストされたJSONを理解する

課題2: ネストされたJSONオブジェクトを作成する

  • 要件: 課題1を拡張して、連絡先情報を追加してください（連絡先情報はネストされたオブジェクトとして含めること）。

回答2:

{
  "name": "山田太郎",
  "age": 30,
  "job": "プログラマー",
  "contact": {
    "phone": "090-1234-5678",
    "email": "taro@example.com"
  }
}

ステップ3: 配列を含むJSONを理解する

課題3: 趣味を含む配列をJSONに追加する

  • 要件: 趣味の情報を配列としてJSONに追加してください。趣味は複数（例: "読書", "映画鑑賞", "旅行"）含めることができます。

回答3:

{
  "name": "山田太郎",
  "age": 30,
  "job": "プログラマー",
  "contact": {
    "phone": "090-1234-5678",
    "email": "taro@example.com"
  },
  "hobbies": ["読書", "映画鑑賞", "旅行"]
}

ステップ4: JSONデータの利用

課題4: JSONデータをプログラミング言語で解析する

  • 要件: Pythonを使用して、課題3で作成したJSONデータから名前と趣味を出力するプログラムを作成してください。

回答4:

import json

# JSONデータ
data_json = '''
{
  "name": "山田太郎",
  "age": 30,
  "job": "プログラマー",
  "contact": {
    "phone": "090-1234-5678",
    "email": "taro@example.com"
  },
  "hobbies": ["読書", "映画鑑賞", "旅行"]
}
'''

# JSONをPythonの辞書に変換
data = json.loads(data_json)

# 名前と趣味を出力
print("名前:", data["name"])
print("趣味:", ", ".join(data["hobbies"]))

このステップごとの課題を通じて、JSONの基本から応用までを実践的に学習し、プログラミングでの利用方法までを習得できます。

JSONを使ったDOM操作を理解するステップ

ステップ1: 1つのデータを <p> タグで表示

課題1: 1つのデータを <p> タグで表示

目的

JSONデータから1つの値を取り出し、それをHTMLの <p> タグに表示する方法を学びます。

JSONデータ

{
  "name": "山田太郎",
  "age": 30,
  "job": "プログラマー"
}

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JSON表示課題1</title>
</head>
<body>
  <div id="output"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="app1.js"></script>
</body>
</html>

JavaScript (app1.js)

$(document).ready(function() {
  // JSONデータの定義
  var data = {
    "name": "山田太郎",
    "age": 30,
    "job": "プログラマー"
  };

  // データを取り出して表示
  var output = `<p>名前: ${data.name}</p>`;
  $('#output').append(output);
});

ステップ2: 複数のデータを <p> タグで表示

課題2: 複数のデータを <p> タグで表示

目的

JSONデータから複数の値を取り出し、それぞれをHTMLの <p> タグに表示する方法を学びます。

JSONデータ

[
  {
    "name": "山田太郎",
    "age": 30,
    "job": "プログラマー"
  },
  {
    "name": "佐藤花子",
    "age": 25,
    "job": "デザイナー"
  },
  {
    "name": "鈴木一郎",
    "age": 35,
    "job": "マネージャー"
  }
]

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JSON表示課題2</title>
</head>
<body>
  <div id="output"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="app2.js"></script>
</body>
</html>

JavaScript (app2.js)

$(document).ready(function() {
  // JSONデータの定義
  var data = [
    {
      "name": "山田太郎",
      "age": 30,
      "job": "プログラマー"
    },
    {
      "name": "佐藤花子",
      "age": 25,
      "job": "デザイナー"
    },
    {
      "name": "鈴木一郎",
      "age": 35,
      "job": "マネージャー"
    }
  ];

  // データを取り出して表示
  data.forEach(function(person) {
    var output = `<p>名前: ${person.name}, 年齢: ${person.age}, 職業: ${person.job}</p>`;
    $('#output').append(output);
  });
});

ステップ3: 表テーブルに表示

課題3: 表テーブルに表示

目的

JSONデータをHTMLのテーブル形式で表示する方法を学びます。

JSONデータ

[
  {
    "name": "山田太郎",
    "age": 30,
    "job": "プログラマー"
  },
  {
    "name": "佐藤花子",
    "age": 25,
    "job": "デザイナー"
  },
  {
    "name": "鈴木一郎",
    "age": 35,
    "job": "マネージャー"
  }
]

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JSON表示課題3</title>
</head>
<body>
  <table id="output" border="1">
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
    </tr>
  </table>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="app3.js"></script>
</body>
</html>

JavaScript (app3.js)

$(document).ready(function() {
  // JSONデータの定義
  var data = [
    {
      "name": "山田太郎",
      "age": 30,
      "job": "プログラマー"
    },
    {
      "name": "佐藤花子",
      "age": 25,
      "job": "デザイナー"
    },
    {
      "name": "鈴木一郎",
      "age": 35,
      "job": "マネージャー"
    }
  ];

  // データをテーブルに表示
  data.forEach(function(person) {
    var row = `<tr>
      <td>${person.name}</

Discussion