はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基本的な文法は理解しているものの、それを使ってWebページに動的なコンテンツを表示させる方法を知りたい方、JSONデータを活用してWebサイトの表現力を高めたい方を主な対象としています。

この記事を読むことで、JavaScriptでJSONデータを扱い、それを元にHTML要素を生成し、Webページ上に表示させる一連の手順を具体的なコード例と共に習得できます。静的なHTMLでは実現できない、柔軟なコンテンツ表示の基礎が身につくでしょう。

現代のWebサイトは、固定された情報だけでなく、外部から取得したデータやユーザーの操作に応じて変化する動的なコンテンツが求められます。その基盤となるのが、JavaScriptによるDOM操作と、データ形式としてのJSONです。本記事では、この重要な組み合わせの基本を解説します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 * HTML/CSSの基本的な知識（要素の構造、セレクタなど） * JavaScriptの基本的な構文（変数、関数、配列、オブジェクト、ループ処理など）

JSONとDOM操作の力：データと表示の分離

ここでは、記事の核心であるJSONとDOM操作について、それぞれの概要と、なぜこれらを組み合わせて使うのかを解説します。

JSON（JavaScript Object Notation）とは？

JSONは「JavaScript Object Notation」の略で、軽量なデータ交換フォーマットです。その名の通り、JavaScriptのオブジェクト表記法に基づいているため、JavaScriptとの相性が非常に良いのが特徴です。

JSONは、キーと値のペアで構成され、構造化されたデータを表現することができます。例えば、以下のような形式で商品情報を表現できます。

Json

{
    "name": "りんご",
    "price": 100,
    "color": "red"
}

JSONが重要なのは、データそのものと、そのデータの見せ方（表示）を分離できる点です。これにより、データの更新はJSONファイルやAPIから行う一方、表示のロジックはJavaScriptで一元管理できるため、Webアプリケーションの保守性や再利用性が大幅に向上します。また、Web APIからのデータ取得にも広く利用されています。

DOM（Document Object Model）とは？

DOMは「Document Object Model」の略で、HTMLやXMLドキュメントのプログラミングインターフェースです。WebブラウザはHTMLドキュメントを読み込むと、その構造をDOMツリーと呼ばれる階層的なオブジェクトとしてメモリ上に構築します。

このDOMツリーをJavaScriptから操作することで、HTML要素の追加、削除、変更、スタイルの適用など、Webページの内容や構造を動的に操作することが可能になります。例えば、document.getElementById() で特定の要素を取得したり、document.createElement() で新しい要素を作成したり、element.appendChild() で要素を追加したりすることができます。JavaScriptがWebページを操作する唯一の手段とも言えるでしょう。

なぜこれらを組み合わせるのか？

JSONとDOM操作を組み合わせる最大のメリットは、「データと表示の分離」による柔軟性と効率性です。

  • 動的なコンテンツ生成: JSONで管理されている最新のデータを取得し、JavaScriptでそのデータに応じてHTML要素を動的に生成・更新することで、常に最新の情報が表示されるWebページを実現できます。
  • 保守性の向上: データがJSONとして独立しているため、コンテンツの内容を変更する際にHTMLファイルを直接編集する必要がありません。これにより、エラーのリスクが減り、開発・運用が効率化されます。
  • 再利用性: 同じJSONデータを複数のページや異なる表示形式で利用できるため、データの再利用性が高まります。
  • パフォーマンス: 初期表示時に全てのコンテンツを読み込むのではなく、必要に応じてデータを取得し、DOMに要素を追加することで、ページのロード時間を短縮できる場合があります。

これらの理由から、現代のWeb開発においてJSONとDOM操作は欠かせない技術となっています。

JavaScriptとJSONで商品リストを動的に表示する実践

ここからは、具体的なコードを交えながら、JavaScriptとJSONを使ってWebページに要素を動的に表示する手順を解説します。今回は、JSONデータとして持っている商品情報を、Webページ上にリスト形式で表示することを目標とします。

ステップ1: HTMLファイルの準備

まず、要素を表示するためのHTMLファイルを作成します。今回は index.html という名前で保存しましょう。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONとJSで動的な商品リスト</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>おすすめ商品リスト</h1>
    <div id="product-list">
        <!-- JavaScriptでここに商品要素が追加されます -->
    </div>

    <!-- JavaScriptファイルを読み込みます -->
    <!-- defer属性により、HTMLのパースが完了してからスクリプトが実行されます -->
    <script src="app.js" defer></script>
</body>
</html>

ポイントは、商品を表示させるためのコンテナとなる <div id="product-list"></div> を用意したこと、そしてJavaScriptファイルを </body> 閉じタグの直前で defer 属性付きで読み込んでいることです。defer 属性を付けることで、HTMLの解析をブロックせずにスクリプトが読み込まれ、HTMLの解析が完了した後にスクリプトが実行されるようになります。

ステップ2: JSONデータの準備

次に、JavaScriptファイル (app.js) の中で、表示させたい商品情報をJSON形式のデータとして準備します。今回は、シンプルな商品の配列を用意します。

app.js を作成し、以下のコードを記述します。

Javascript

const products = [
    {
        "id": 1,
        "name": "高性能ノートパソコン",
        "price": 120000,
        "description": "あらゆる作業を快適にこなす、パワフルなノートパソコンです。",
        "imageUrl": "https://via.placeholder.com/150/FF5733/FFFFFF?text=Laptop"
    },
    {
        "id": 2,
        "name": "最新スマートフォン",
        "price": 80000,
        "description": "最新のAI機能と高解像度カメラを搭載したスマートフォンです。",
        "imageUrl": "https://via.placeholder.com/150/33FF57/FFFFFF?text=Phone"
    },
    {
        "id": 3,
        "name": "ワイヤレスイヤホン",
        "price": 15000,
        "description": "ノイズキャンセリング機能付きで、クリアな音質のワイヤレスイヤホン。",
        "imageUrl": "https://via.placeholder.com/150/3357FF/FFFFFF?text=Earphone"
    },
    {
        "id": 4,
        "name": "ゲーミングキーボード",
        "price": 18000,
        "description": "メカニカルスイッチ搭載で、快適なタイピングと高速応答を実現。",
        "imageUrl": "https://via.placeholder.com/150/FFC300/FFFFFF?text=Keyboard"
    }
];

この products 変数はJavaScriptの配列ですが、中に入っている各オブジェクトはJSONの形式に則っています。実際のWeb開発では、このようなデータは外部のAPIから取得することが多いですが、今回は学習のためにJavaScriptファイル内に直接記述しています。

ステップ3: JavaScriptでJSONデータをHTMLに変換して表示

いよいよメインとなるJavaScriptの記述です。app.js に続けて以下のコードを追加します。

Javascript

document.addEventListener('DOMContentLoaded', () => {
    // HTML内の商品リストを表示するコンテナ要素を取得
    const productListDiv = document.getElementById('product-list');

    // products配列の各商品データに対して処理を行う
    products.forEach(product => {
        // 1. 商品ごとのコンテナ要素 (div) を作成
        const productItem = document.createElement('div');
        // CSSでスタイリングするためにクラスを追加
        productItem.classList.add('product-item'); 

        // 2. 商品画像 (img) を作成し、属性を設定
        const productImage = document.createElement('img');
        productImage.src = product.imageUrl; // JSONデータのimageUrlを使用
        productImage.alt = product.name;     // JSONデータのnameをaltテキストに設定
        productItem.appendChild(productImage); // 商品コンテナに追加

        // 3. 商品名 (h3) を作成し、テキストを設定
        const productName = document.createElement('h3');
        productName.textContent = product.name; // JSONデータのnameをテキストに設定
        productItem.appendChild(productName);   // 商品コンテナに追加

        // 4. 商品価格 (p) を作成し、テキストを設定
        const productPrice = document.createElement('p');
        // 価格をローカライズ表示（例: 120000 -> 120,000）
        productPrice.textContent = `価格: ¥${product.price.toLocaleString()}`; 
        productItem.appendChild(productPrice);  // 商品コンテナに追加

        // 5. 商品説明 (p) を作成し、テキストを設定
        const productDescription = document.createElement('p');
        productDescription.textContent = product.description; // JSONデータのdescriptionをテキストに設定
        productItem.appendChild(productDescription); // 商品コンテナに追加

        // 6. 完成した商品コンテナを、HTML内の商品リスト全体に追加
        productListDiv.appendChild(productItem);
    });
});

このコードでは以下の処理を行っています。

  • document.addEventListener('DOMContentLoaded', () => { ... });: HTMLドキュメントが完全に読み込まれ、解析された後にコードが実行されるようにします。これにより、JavaScriptがHTML要素にアクセスしようとしたときに、まだ要素が存在しないというエラーを防げます。defer 属性を使っていれば必須ではありませんが、より堅牢な書き方です。
  • const productListDiv = document.getElementById('product-list');: HTMLファイルでIDを振った <div id="product-list"> 要素を取得します。これが、JavaScriptで生成した要素を追加する場所になります。
  • products.forEach(product => { ... });: products 配列の各要素（つまり、個々の商品オブジェクト）に対して、中の処理を繰り返します。product はループのたびに現在の商品オブジェクトを指します。
  • document.createElement('div'): 新しい div 要素を作成します。
  • productItem.classList.add('product-item');: 作成した要素にCSSでスタイリングするためのクラス名を追加します。
  • productImage.src = product.imageUrl;: <img> 要素の src 属性に、JSONデータから取得した画像のURLを設定します。
  • productName.textContent = product.name;: <h3> 要素のテキストコンテンツに、JSONデータから取得した商品名を設定します。textContent は安全にテキストを挿入し、HTMLエンティティをエスケープします。
  • productPrice.textContent = \価格: ¥${product.price.toLocaleString()}`;:toLocaleString()` を使うことで、数字を地域のフォーマット（今回は日本のカンマ区切り）に整形しています。
  • productItem.appendChild(productImage);: 作成した productImage 要素を、親である productItem（個々の商品のコンテナ）に追加します。

この一連の処理によって、JSONデータの一つ一つの商品情報がHTML要素に変換され、最終的にWebページ上に表示される仕組みです。

ステップ4: スタイリング（CSS）

見た目を整えるために、簡単なCSSを追加しましょう。style.css というファイルを作成し、以下のコードを記述します。

Css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    color: #333;
}

h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
}

#product-list {
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* レスポンシブなカラム設定 */
    gap: 20px; /* 要素間の余白 */
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto; /* 中央寄せ */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.product-item {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out;
}

.product-item:hover {
    transform: translateY(-5px); /* ホバーエフェクト */
}

.product-item img {
    max-width: 100%;
    height: 150px; /* 画像の高さを固定 */
    object-fit: cover; /* 画像の表示方法 */
    border-radius: 4px;
    margin-bottom: 10px;
}

.product-item h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #34495e;
    font-size: 1.2em;
}

.product-item p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.4;
    margin-bottom: 5px;
}

.product-item p:last-of-type {
    margin-bottom: 0;
}

これで、Webサーバーを立ち上げるか、ローカルファイルとしてindex.htmlをブラウザで開けば、動的に生成された商品リストが表示されるはずです。

ハマった点やエラー解決

実装中に遭遇しやすい一般的な問題と、その解決策について解説します。

エラー1: Cannot read properties of null (reading 'appendChild') または Cannot set properties of null (setting 'textContent')

  • エラーメッセージの例: Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at app.js:X または Uncaught TypeError: Cannot set properties of null (setting 'textContent') at app.js:Y
  • 原因: JavaScriptがHTML要素にアクセスしようとした時点で、その要素がまだHTMLドキュメント上に存在していないために発生します。よくあるのは、JavaScriptのスクリプトタグがHTMLの <body> 要素の前にあり、スクリプトが実行される段階でターゲットとなるHTML要素がまだ読み込まれていないケースです。
  • 解決策:
    1. スクリプトタグを </body> 閉じる直前に配置する: これが最も簡単で一般的な解決策です。HTMLは上から順に解析されるため、HTML要素がすべて読み込まれた後にJavaScriptが実行されます。 html <body> <!-- HTML要素 --> <div id="target-element"></div> <script src="app.js"></script> <!-- ここに配置 --> </body>
    2. スクリプトタグに defer 属性を追加する: defer 属性を使用すると、スクリプトのダウンロードはHTMLのパースと並行して行われますが、実行はHTMLのパースが完了した後に行われます。これにより、スクリプトタグを <head> 内に配置しても安全になります。 html <head> <script src="app.js" defer></script> <!-- defer属性を追加 --> </head> <body> <!-- HTML要素 --> <div id="target-element"></div> </body>
    3. DOMContentLoaded イベントリスナーを使用する: これが最も堅牢な方法です。ドキュメントの初期HTMLが完全にロードされ、解析された後にイベントが発行されます。これを使用すると、スクリプトタグの位置に関わらず、要素が存在することを保証できます。（今回のコード例で採用している方法です） javascript document.addEventListener('DOMContentLoaded', () => { // ここにHTML要素を操作するコードを記述 const targetElement = document.getElementById('target-element'); if (targetElement) { // 念のためnullチェックも推奨 targetElement.textContent = "Hello!"; } });

エラー2: JSONデータがJavaScriptのオブジェクトとして認識されない（特に外部ファイルを扱う場合）

  • 原因: JSONデータの構文エラー（カンマの不足、キーや文字列がダブルクォーテーションで囲まれていない、余分なカンマ、コメントの混入など）。または、外部JSONファイルを読み込む際に fetch APIなどの非同期処理が正しく行われていない場合。
  • 解決策:
    1. JSON構文の確認: JSONLintのようなオンラインツールを使って、JSONデータが正しい構文であるかを確認します。JSONは非常に厳密なフォーマットです。
    2. 外部ファイルの読み込み: 外部の .json ファイルからデータを読み込む場合は、fetch APIと Response.json() メソッドを組み合わせる必要があります。これらは非同期処理であり、Promise を使用してデータを扱います。 javascript // data.json というファイルからJSONデータを読み込む例 fetch('data.json') .then(response => { // HTTPレスポンスが正常かチェック if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); // レスポンスボディをJSONとしてパース }) .then(data => { // パースされたJSONデータ (data) を使ってDOM操作を行う console.log(data); // 例えば、data.products.forEach(...) のように使う }) .catch(error => { // エラーが発生した場合の処理 console.error('データの取得またはパース中にエラーが発生しました:', error); }); fetch はネットワークリクエストを行うため、ローカルファイルシステムで直接開く場合はセキュリティ制約により動作しないことがあります。この場合、簡易的なローカルサーバー（例: Pythonの http.server や Node.jsの serve など）を立ててアクセスする必要があります。

これらのエラーは、Web開発の初期段階で頻繁に遭遇するものです。エラーメッセージをよく読み、上記のような解決策を試してみてください。

まとめ

本記事では、JavaScriptとJSONを活用してWebページに動的なコンテンツを表示する基本的な方法 を解説しました。

  • 要点1: JSONは軽量なデータ交換フォーマットであり、JavaScriptのオブジェクト表記法に基づいているため、JavaScriptとの相性が非常に良いこと。データと表示を分離し、保守性と再利用性を高めます。
  • 要点2: DOM操作は、JavaScriptがHTMLドキュメントをプログラム的に操作するための基盤であること。要素の作成、追加、変更などを通じて動的なコンテンツを実現します。
  • 要点3: これらの組み合わせにより、データ駆動型のWebコンテンツを効率的に作成できること。外部のデータソースと連携し、柔軟で常に最新の情報を提供するWebページを構築できます。

この記事を通して、静的なHTMLだけでは難しかった、データの変更に応じて内容が更新されるWebページの基本的な仕組みを理解し、実践できるようになったことでしょう。

今後は、fetch APIを使った外部JSONファイルの取得、より複雑なデータ構造への対応、ユーザーインタラクションに応じた動的な要素の追加・削除、さらにはReactやVue.jsといったモダンなJavaScriptフレームワークでのデータバインディングなど、発展的な内容についても学習を進めていくと、さらに表現力豊かなWebサイトが開発できるようになります。

参考資料