JavaScriptオブジェクトの配列をHTMLリスト要素として表示する方法【初心者向け】

このチュートリアルでは、JavaScriptのオブジェクト配列を、Webページ上でHTMLのリスト要素として表示する方法を解説します。

例として、トレーニング種目のデータを格納したJavaScriptオブジェクトの配列を用意し、それをブラウザ上に箇条書きリストとして出力していきます。

元データとなるJavaScriptオブジェクト

let exercises = [
  {
    name: "デッドリフト",
  },
  {
    name: "プッシュアップ",
  },
  {
    name: "プルアップ",
  },
  {
    name: "スクワット",
  },
];

上記は4つのオブジェクト(トレーニング種目)を持つJavaScriptの配列です。このデータを取り出して、ブラウザには次のようなリストを表示させます。

• デッドリフト
• プッシュアップ
• プルアップ
• スクワット

これはHTMLの順序なしリスト(<ul>)です。Chrome DevToolsでこのリストのマークアップを確認すると、次のようになっています。

<ul>
  <li>デッドリフト</li>
  <li>プッシュアップ</li>
  <li>プルアップ</li>
  <li>スクワット</li>
</ul>

オブジェクト配列をHTML要素として表示する4つのステップ

実装は、以下の4つのステップで進めます。

1. HTMLで空の<ul>要素を作成し、種目リストの入れ物を用意する。
2. for...ofループを使って、オブジェクト配列から各種目のデータを1件ずつ取り出す。
3. 取り出した各種目を、リスト項目タグ(<li></li>)で囲む。
4. 完成した<li>要素群を、ステップ1で作成した<ul>要素の中に出力する。

ステップ1:空の順序なしリスト要素を作成する

まず、HTML側に空の<ul>要素を用意します。index.html(CodePenなどを利用している場合はHTMLウィンドウ)に以下を追加してください。

<ul class="exercise-list"></ul>

続いて、この<ul>要素への参照を変数に代入しておきましょう。スクリプトファイルの先頭に以下のコードを追加します。

let exerciseListElement = document.querySelector(".exercise-list");

ステップ2:種目オブジェクトをループ処理する

配列の中には個別の種目オブジェクトが格納されているため、何らかの処理を行う前に、各要素に対して反復処理を行う必要があります。

オブジェクト配列の直下に、以下のコードを追加してください。

for (let exercise of exercises) {
  console.log(exercise.name);
}

ここまでのスクリプトファイル全体は、以下のようになります。

let exerciseListElement = document.querySelector(".exercise-list");

let exercises = [
  {
    name: "デッドリフト",
  },
  {
    name: "プッシュアップ",
  },
  {
    name: "プルアップ",
  },
  {
    name: "スクワット",
  },
];

for (let exercise of exercises) {
  console.log(exercise.name);
}

ブラウザのコンソールを確認すると、次のように各種目名が1行ずつ出力されているはずです。

これで、個々の種目オブジェクトにアクセスできる状態になりました。

ステップ3:各種目をリスト項目タグで囲む

次に、取得した種目データを<li>タグで囲んでいきます。

まず、forループの直前に、結果を格納するための空文字列の変数を宣言します。

let exerciseItems = "";

そして、ループの中に以下の1行を追加します。

exerciseItems += "<li>" + exercise.name + "</li>";

この状態で、ループの外側(下)にconsole.log(exerciseItems)を記述して実行すると、コンソールには各種目が<li>要素で囲まれたHTML文字列が出力されます。

ステップ4:種目リストに項目を挿入する

最後に、組み立てたHTML文字列を<ul>要素の中に流し込みます。forループの直後に以下のコードを追加してください。

exerciseListElement.innerHTML = exerciseItems;

ここまで正しく実装できていれば、ブラウザ上の順序なしリストに、すべてのトレーニング種目が表示されるはずです。

完成版コード(全体)

参考までに、ここまでに書いたコードの全体をまとめると、次のようになります。

(function () {
  let exerciseListElement = document.querySelector(".exercise-list");

  let exercises = [
    {
      name: "デッドリフト",
    },
    {
      name: "プッシュアップ",
    },
    {
      name: "プルアップ",
    },
    {
      name: "スクワット",
    },
  ];

  let exerciseItems = "";

  for (let exercise of exercises) {
    exerciseItems += "<li>" + exercise.name + "</li>";
  }

  exerciseListElement.innerHTML = exerciseItems;
})();

動作するコード一式は、CodePenでも確認できます。

補足:map()を使ったより簡潔な書き方

なお、文字列連結によるループ処理の代わりに、map()とjoin()を組み合わせると、より簡潔に同じ結果を得られます。

exerciseListElement.innerHTML = exercises
  .map((exercise) => `<li>${exercise.name}</li>`)
  .join("");

モダンなJavaScriptではこちらの書き方が使われることも多いため、合わせて覚えておくと便利です。