JavaScriptでネストされたJSONを読み取ってみよう！（複雑な構造の読み解き）

完成イメージ（JSON → スライドショーの例）

下記のスライドでは、実際に JSONデータをAPIから取得し、それを使って画像スライドショーを表示する例を紹介しています。画像ファイルを自分で用意する必要はなく、すべてAPIから自動で取得して表示されます。

このページでできること・学べること

JavaScriptでネストされたJSON（入れ子構造のデータ）を読み取り、必要な値だけを取り出して表示する方法を解説します。

外部APIや商品データ、楽天API・Unsplash APIなど、実際のWebサービスでは複雑なJSON構造が当たり前です。
そのため、

JavaScriptの fetch() を使ったJSONの取得方法
data.Items[0].Item.title のようなオブジェクト・配列の読み方
.forEach() を使った複数商品の表示方法
.?.（オプショナルチェイニング）でエラーを防ぐ書き方
を実際のコードと一緒に学べるように構成しています。

「JSON 取り出し方」「JavaScript ネストされたデータ」「fetch JSON サンプル」と検索してきた方にも役立つ内容です。

目的

fetch() でローカルJSONファイルや外部APIからデータを取得する
ネストされたオブジェクト・配列の構造を理解する
.forEach() を使って複数のデータを一覧で表示する
.?（optional chaining）などでエラーを防ぎながら安全にアクセスする

作成するファイルとフォルダ構成

js-domフォルダに以下のファイルを作成してください。

ファイル名	内容
js-dom08.html	動作練習用HTML/js
products.json	静的なローカルJSON

JavaScriptは <script> タグ内に直接記述してください（内部JS）

チェックポイント

JSONデータを取得し、正しくオブジェクトとして扱えているか？
オブジェクト → 配列 → オブジェクト…といったネスト構造に正しくアクセスできているか？
必要なデータだけを取り出し、HTMLとして表示できているか？
ループ処理（forEach）を使って、複数の要素を繰り返し表示できているか？

【基礎】JSONファイルを読み込んで表示するコード

jsonファイルを用意して作成

商品情報のjsonファイルを用意します。そのファイルを読み込んで表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>商品情報を表示しよう</title>
</head>
<body>
  <h1>商品データの表示</h1>
  <p><button id="load-btn">商品を読み込む</button></p>

  <div id="item-area">
    <!-- 商品データが表示されます -->
  </div>

  <script>
    const btn = document.getElementById('load-btn');
    const area = document.getElementById('item-area');

    btn.addEventListener('click', () => {
      fetch('products.json')
        .then(response => response.json())
        .then(data => {
          console.log(data);  // JSON構造確認用
          const item = data.Items[0].Item;
          const html = `
            <h2>${item.title}</h2>
            <img src="${item.image}" alt="${item.title}" width="200">
            <p>価格：${item.price}円</p>
            <p>販売店：${item.shop.name}</p>
          `;
          area.innerHTML = html;
        })
        .catch(error => {
          area.textContent = 'データの取得に失敗しました。';
          console.error('エラー:', error);
        });
    });
  </script>
</body>
</html>

products.json（同じ階層に保存）

{
  "Items": [
    {
      "Item": {
        "title": "JavaScript入門",
        "price": 2200,
        "image": "https://placehold.jp/200x150.png?text=JS+Book",
        "shop": {
          "name": "技術書オンライン",
          "url": "https://example.com"
        }
      }
    }
  ]
}

アクセス方法の例（JavaScript）

// 配列の1件目の商品データを取り出す
const item = data.Items[0].Item;

// 商品タイトル
console.log(item.title);  // → JavaScript入門

// 商品画像
console.log(item.image);

// 店舗名
console.log(item.shop.name);

// 店舗URL
console.log(item.shop.url);

ネスト構造の考え方

Items → 商品一覧（配列）
Item → 各商品の本体（オブジェクト）
shop → Itemの中の「販売店情報」（さらにオブジェクト）

JSONとは？

JSON（ジェイソン）とは、JavaScript Object Notation（ジャバスクリプトオブジェクト表記）の略で、
データをやり取りするときの「決まった形（ルール）」です。

データは文字列（テキスト）として受け取られる
JavaScriptの .json() を使うと、オブジェクトとして使える形に変換できる
オブジェクト（{}）と配列（[]）を組み合わせることで、複雑な構造も表現できる

今回扱う複雑にネストされたJSONデータのイメージ

{
  "Items": [
    {
      "Item": {
        "title": "JavaScript入門",
        "price": 2200,
        "image": "https://example.com/img1.jpg",
        "shop": {
          "name": "技術書オンライン",
          "url": "https://example.com/shop"
        }
      }
    }
  ]
}

このようなデータから、JavaScriptを使って

const title = data.Items[0].Item.title;
const image = data.Items[0].Item.image;
const shopName = data.Items[0].Item.shop.name;

のようにアクセスし、**必要な値を画面に表示していきます。

自動スライドショーのためのUnsplash API の場合

様々な画像をAPIを使って取得することが可能です。

const accessKey = "あなたのAPIアクセスキー";

fetch(`https://api.unsplash.com/photos/random?client_id=${accessKey}`)
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

APIアクセスキーとは？仕組みと役割

APIアクセスキー（API Access Key）とは、外部サービスのAPI（Application Programming Interface）を利用する際に「あなたは誰ですか？」「使用する許可がありますか？」という認証と識別のために使われる一意の文字列です。以下のような役割があります。

APIアクセスキーの役割

役割	内容
ユーザーの識別	誰がリクエストを送っているのかをAPI提供者側が判別できるようにする
利用制限の管理	1日◯回まで、◯秒に1回などの利用回数制限（レートリミット）に使う
セキュリティ	不正利用を防ぐため、アクセスキーがある人だけが使える仕組みにする
請求の計算	有料APIの場合、どれだけ使ったかをこのキーで紐づけて課金されることも

APIの取得方法（一般的な流れ）

API提供元（例：Unsplash, OpenWeather, Googleなど）の開発者サイトに登録
アプリやプロジェクトを作成
発行された「APIキー」をコピーしてコードに貼り付け

アクセスキーは他人に見せないこと！（不正利用される恐れあり）が大事です。

見本のスライドショーをAPIを使って作成してみよう

APIのアクセスキーを取得して自動スライドショーを作成

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <title>自動スライドショー（async/await）</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
            padding: 20px;
        }

        #photoArea {
            width: 1200px;
            height: 800px;
            margin: 20px auto;
        }

        #photoArea img {
            max-width: 80%;
            aspect-ratio: 16 / 9;
            height: auto;
            object-fit: cover;
            opacity: 0;
            transition: opacity 3s ease-in-out;
            transform: scale(1.05);
        }

        #photoArea img.fade-in {
            opacity: 1;
            transform: scale(1);
        }
    </style>
</head>

<body>
    <h1>Unsplash画像スライドショー</h1>
    <div id="photoArea"></div>

    <script>
        const photoArea = document.getElementById('photoArea');
        const accessKey = 'UnsplashのAPIキーを入力';
        const initialKeyword = 'coffee';

        let images = [];
        let currentIndex = 0;
        let intervalId = null;

        function showImage() {
            if (images.length === 0) return;
            const img = document.createElement('img');
            img.src = images[currentIndex];
            img.alt = `Image ${currentIndex + 1}`;
            photoArea.innerHTML = '';
            photoArea.appendChild(img);
            setTimeout(() => {
                img.classList.add('fade-in');
            }, 100);
            currentIndex = (currentIndex + 1) % images.length;
        }

        async function startSlideshow(keyword) {
            if (intervalId) clearInterval(intervalId);
            try {
                const response = await fetch(`https://api.unsplash.com/search/photos?query=${encodeURIComponent(keyword)}&per_page=10&client_id=${accessKey}`);
                const data = await response.json();

                images = data.results.map(item => item.urls.regular);
                currentIndex = 0;

                if (images.length === 0) {
                    photoArea.innerHTML = '<p>画像が見つかりませんでした。</p>';
                    return;
                }

                showImage(); // 最初の画像表示
                intervalId = setInterval(showImage, 4000); // 3秒ごとに切り替え

            } catch (error) {
                console.error('取得エラー:', error);
                photoArea.innerHTML = '<p>画像の取得に失敗しました。</p>';
            }
        }

        window.addEventListener('DOMContentLoaded', () => {
            startSlideshow(initialKeyword);
        });
    </script>
</body>

</html>