作品データと表示を分けて持つ

実践JavaScript / 全 5 枚

実践JavaScript - 作品データと表示を分けて持つ

作品データを 1 か所に集める

ポートフォリオに並べる作品を、HTML に直接書かずに配列として持ちます。1 件ぶんの項目をそろえておくと、あとから件数が増えても同じ扱いのまま足せます。

この配列が、この先ずっと画面のもとになります。あとで中身を API から取ってくる形に差し替えます。

作品 1 件を 1 つのオブジェクトにして、それを配列に並べます。

const works = [
  { title: "レシピ検索サイト", year: 2024, tags: ["HTML", "CSS"], views: 1200 },
  { title: "家計簿アプリ", year: 2025, tags: ["JavaScript"], views: 860 },
];

console.log(works.length); // 2
console.log(works[0].title); // "レシピ検索サイト"

1 / 5

← → キーでも送れます

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