部品とデータに分ける

大変だったのは「同じ形の繰り返し」

前の章で自分を追加したとき、書いたのはこんなコードでした。

<div class="col-md-4">
    <div class="member-item">
        <img class="img-responsive img-rounded facepic" src="img/あなたの写真.jpg">
        <h4>環境情報学部</h4>
        <h3>あなたの名前</h3>
        <p class="text-muted">Your Name</p>
    </div>
</div>

8 行のうち、あなた固有の情報は 4 つだけです。残りは全員まったく同じ「型」です。この型が 11 人分、手で繰り返し書かれています。

この書き方には問題があります。

• 型を少し変えたい（例: 写真を丸くする）とき、11 か所すべてを直す必要がある
• 1 か所だけ書き間違えても気づきにくい（</i> のように）
• 中身を変えたいだけなのに、型のコードも読まないと場所が分からない

部品とデータに分ける

解決の考え方はシンプルです。型（部品）と中身（データ）を別々に置き、組み合わせるのは機械に任せます。

データは、こんな一覧になります。

export const members = [
  { name: '村井純', en: 'Jun Murai', role: '教授', photo: 'jun.jpg' },
  { name: '佐藤雅明', en: 'Masaaki Sato', role: '特任准教授', photo: 'saikawa.jpg' },
  { name: 'あなたの名前', en: 'Your Name', role: '環境情報学部', photo: 'you.jpg' },
];

1 人が 1 行です。メンバーを追加するときは、この一覧に 1 行足すだけです。HTML の型を触る必要はありません。

型は 1 か所にだけ書きます。写真を丸くしたければ、その 1 か所を直せば全員に反映されます。

フレームワークとは

部品とデータを組み合わせて、最終的な HTML を作る仕組みを提供してくれる道具を、フレームワークと呼びます。この組み立ての作業をビルドと呼びます。

フレームワークには Astro、Next.js、Hugo などいろいろありますが、このチュートリアルでは Astro を使います。

• 書き方が HTML にとても近い。2 章の知識がそのまま使える
• ビルドすると、ただの HTML と CSS ができる。GitHub Pages にそのまま置ける
• 部品とデータの分け方が分かりやすい

確認テスト

チェックリスト

• 素の HTML の大変さを「型の繰り返し」という言葉で説明できる
• 部品とデータに分けると、何が楽になるか説明できる