配列から一覧を描画する

JavaScript入門 / 全 5 枚

JavaScript入門 - 配列から一覧を描画する

作品のデータは、オブジェクトの配列で持つ

作品を 3 つ並べるのに、HTML へ li を 3 行書くこともできます。ただ、それだと作品が増えるたびに HTML を書き足すことになります。データは配列で持ち、画面はそこから作ります。

この配列の要素 1 つが、一覧の 1 行になります。要素が 3 つなら 3 行です。

第 7 章で作ったオブジェクトを、第 6 章で使った配列に並べただけです。

const works = [
  { title: "ポスター", year: 2024 },
  { title: "名刺", year: 2025 },
  { title: "ロゴ", year: 2025 },
];

console.log(works.length); // 3
console.log(works[0].title); // ポスター

1 / 5

← → キーでも送れます

このスライドが付いているレッスンを開く