このコースで育てるもの

解説

このレッスンで分かること

• 入門で書いた script.js を app.js として開き直し、外のデータで動くポートフォリオアプリまで育てます
• 課題は関数を 1 本書く形が中心で、採点はいつも戻り値を見ます

入門の終わりから、このコースの始まりへ

入門の最後に完成した script.js は 300 行ほどありました。作品カードを組み立てる処理、一覧を描き直す処理、ボタンとフォームのイベント。ひとつひとつは短いのですが、上から順に足していった結果、ファイルの中で「どこがデータで、どこが表示か」の境目が薄れかけています。

このコースでは、そのファイルを app.js という名前で開き直します。入門の成果物をそのまま残して次の版を作れますし、これから足していくものが「画面を動かすスクリプト」から「データを扱うアプリケーション」へ性質を変えるためです。

いまの入口はこうなっています。配列は手で書いてあり、書き換えると表示が変わります。

const works = [
  { title: "プロフィールサイト", year: 2026, views: 120, published: true }
];

renderWorks(works);

コースの終わりには、同じ場所がこうなります。データは外から来て、遅れて届き、ときどき失敗します。

async function start() {
  const works = await loadWorks();
  renderWorks(works);
}

たった数行の違いに見えますが、この形を書けるようになるまでに必要なものが、このコースの中身のほぼすべてです。

足していく道具と、いま困っていること

道具から入ると、使い道の分からない構文を覚えるだけになります。困りごとのほうを先に置きます。

入門の pickWorks を思い出してください。空の配列を用意し、for-of でまわし、条件に合わないものを飛ばし、残りを push していました。あれは正しいコードです。ただ、条件が「公開ずみ」「人気だけ」「カテゴリ別」「新しい順」と増えるにつれて、同じ形の関数が増えていきます。第2章はその増えかたを止めるための章です。

作品データの形を先に固定する

章をまたいで同じデータを扱うので、形をここで決めます。入門では 4 項目でしたので、id と tags と category の 3 つが増えます。

const work = {
  id: 1,
  title: "プロフィールサイト",
  year: 2026,
  views: 120,
  published: true,
  tags: ["HTML", "CSS"],
  category: "site"
};

id は作品を 1 件だけ探すときの目印、tags は表示用の短い文字列の配列、category は分類用の値です。category に入れてよい値は site と card と table の 3 つに固定します。値を絞っておくと、分類も絞り込みも同じ 3 つで通せます。作品は入門と同じ 5 件を使います。

課題では、採点は必ず戻り値を見ます。console.log で正しい値を出しても、return を書き忘れていれば不正解です。

解説

題材を入門から変えないのは手抜きではありません。新しい題材にすると、その題材の説明から始めることになります。すでに手になじんだ画面を使えば、1 行目から本題に入れます。

よくある間違い

• 入門のファイルを直接書き換えてしまう — 途中で分からなくなったときに戻る先が無くなります。script.js はそのまま残し、コピーを app.js として作って、HTML の読み込み先を <script src="app.js" defer></script> に変えてください