JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでJSONデータからHTMLを動的に生成する方法

はじめに

Web開発において、APIから取得したJSONデータをHTMLとして画面に表示する処理は非常によく使われるテクニックです。本記事では、JavaScriptのfetchメソッドを使ってJSONデータを取得し、そのデータをもとにHTMLのテーブルを動的に生成する方法を解説します。

補足： 本記事のサンプルコードでは「JSONPlaceholder」というサービスを利用しています。JSONPlaceholderは、テストやプロトタイプ開発のために用意された無料のダミー（フェイク）REST APIであり、実際のサーバーを構築しなくても手軽にJSONデータの取得を試すことができます。

サンプルコード

以下は、ボタンをクリックするとユーザー情報をAPIから取得し、従業員名をテーブルに表示する完全なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>JSON配列</h1>
<div class="sample">従業員名</div>
<table border="1" class="employee"></table>
<button class="Btn">ここをクリック</button>
<h3>
上のボタンをクリックすると従業員テーブルが表示されます
</h3>
<script>
   let sampleEle = document.querySelector(".employee");
   document.querySelector(".Btn").addEventListener("click", () => {
      fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((result) => {
         result.forEach((element) => {
            sampleEle.innerHTML += "<td>" + element.name;
         });
      });
   });
</script>
</body>
</html>

コードの解説

このコードの流れを順番に見ていきましょう。

  1. イベントリスナーの登録： document.querySelector(".Btn").addEventListener("click", ...) により、ボタンがクリックされたタイミングで処理が実行されるようにしています。
  2. データの取得： fetch() メソッドを使って、JSONPlaceholderの /users エンドポイントにリクエストを送信し、ユーザー一覧のJSONデータを取得します。
  3. JSONへの変換： レスポンスに対して response.json() を呼び出すことで、取得したデータをJavaScriptで扱えるオブジェクト（配列）に変換します。
  4. HTMLの動的生成： forEach() で各ユーザーオブジェクトをループ処理し、element.name の値を <td> タグとともにテーブルの innerHTML に追加していきます。

実行結果

ページを開いた直後は、空のテーブルと「ここをクリック」ボタンのみが表示されています。

JavaScriptでJSONデータからHTMLを動的に生成する方法

「ここをクリック」ボタンを押すと、APIから取得したユーザーの名前がテーブル内に次々と追加され、以下のように表示されます。

JavaScriptでJSONデータからHTMLを動的に生成する方法

まとめ

このように、fetch APIとDOM操作を組み合わせることで、外部のJSONデータを簡単にHTMLへ反映させることができます。実務では、取得したデータをより安全に表示するために textContent を使う方法や、createElement によるノード生成なども検討するとよいでしょう。また、モダンな書き方としては async/await 構文を利用することで、さらに可読性の高いコードを書くことも可能です。

  1. JavaScriptでtextareaに入力されたJSONデータを整形（プリティプリント）する方法

    textareaに入力されたJSONデータを整形（プリティプリント）して表示するには、JSON.parse()とJSON.stringify()を組み合わせて使用します。まずJSON.parse()で文字列をJavaScriptオブジェクトに変換し、その後JSON.stringify()の第3引数にインデント幅（例：4）を指定することで、インデントが整った読みやすいJSON文字列を取得できます。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in