課題1: 簡単なJSONオブジェクトの作成と表示

課題内容

自分の情報（名前、年齢、趣味など）をJSONで作成し、HTML上に表示してみましょう。

解答例

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JSONオブジェクトの表示</title>
</head>
<body>
  <h1>プロフィール情報</h1>
  <div id="profile-container">
    <!-- ここにJSONデータが表示されます -->
  </div>

  <script>
    // ここにJavaScriptコードを書きます
  </script>
</body>
</html>

JavaScript

// 自分の情報をJSONオブジェクトとして作成
const myProfile = {
  "名前": "山田太郎",
  "年齢": 25,
  "職業": "Webエンジニア",
  "住所": {
    "都道府県": "東京都",
    "市区町村": "渋谷区"
  },
  "趣味": ["プログラミング", "読書", "旅行", "料理"],
  "SNS": {
    "Twitter": "@yamada_taro",
    "GitHub": "yamada-taro"
  }
};

// JSONオブジェクトを文字列に変換（表示用）
const myProfileJSON = JSON.stringify(myProfile, null, 2);
console.log(myProfileJSON);

// HTMLに表示する関数
function displayProfile(profile) {
  const container = document.getElementById('profile-container');
  
  // 基本情報の表示
  const basicInfo = document.createElement('div');
  basicInfo.innerHTML = `
    <h2>${profile.名前}</h2>
    <p><strong>年齢:</strong> ${profile.年齢}歳</p>
    <p><strong>職業:</strong> ${profile.職業}</p>
    <p><strong>住所:</strong> ${profile.住所.都道府県}${profile.住所.市区町村}</p>
  `;
  
  // 趣味の表示
  const hobbies = document.createElement('div');
  hobbies.innerHTML = '<h3>趣味</h3>';
  
  const hobbyList = document.createElement('div');
  hobbyList.className = 'hobby-list';
  
  profile.趣味.forEach(hobby => {
    const hobbyItem = document.createElement('span');
    hobbyItem.className = 'hobby-item';
    hobbyItem.textContent = hobby;
    hobbyList.appendChild(hobbyItem);
  });
  
  hobbies.appendChild(hobbyList);
  
  // SNSの表示
  const sns = document.createElement('div');
  sns.innerHTML = `
    <h3>SNS</h3>
    <p><strong>Twitter:</strong> ${profile.SNS.Twitter}</p>
    <p><strong>GitHub:</strong> ${profile.SNS.GitHub}</p>
  `;
  
  // 全ての要素をコンテナに追加
  container.appendChild(basicInfo);
  container.appendChild(hobbies);
  container.appendChild(sns);
}

// 関数を呼び出してプロフィールを表示
displayProfile(myProfile);

解説

  1. JSONオブジェクトの作成

    JavaScriptでJSONオブジェクトを直接作成しています。オブジェクト、配列、文字列、数値などの異なる型の値を含んでいます。

  2. JSON.stringifyの使用

    コンソールに表示するために、JSON.stringify()メソッドを使用してJSONオブジェクトを文字列に変換しています。第2引数のnullは置換関数（使用しない場合はnull）、第3引数の2はインデントのスペース数を指定しています。

  3. HTMLへの表示

    JavaScriptを使用して、JSONオブジェクトの各プロパティを取得し、HTMLに表示しています。オブジェクトのネストされたプロパティ（住所やSNS）や配列（趣味）にもアクセスして表示しています。

ポイント

← トップページに戻る