Astro のファイルを読む

フォルダの構成

新しい研究室サイトは、こんな構成になっています。

src/
├── pages/         ← 1 ファイルが 1 ページになる
│   └── index.astro
├── components/    ← 部品
│   └── MemberCard.astro
├── data/          ← データ
│   └── members.ts
└── styles/        ← 見た目
public/            ← 画像など、そのまま公開するファイル
└── img/

src/pages/ に置いたファイルが、そのまま URL になります。src/pages/index.astro はトップページ、src/pages/about.astro を作れば /about/ というページができます。

.astro ファイルの形

.astro ファイルは、--- で区切られた 2 つの部分でできています。

---
// 上の部分: 準備（JavaScript）
const title = 'iCAR';
---

<!-- 下の部分: HTML -->
<h1>{title}</h1>

• 上の --- の間: データを読み込んだり、変数を用意したりする場所
• 下: ほぼ普通の HTML。{ } で囲むと、上で用意した変数の中身が入る

この例では、{title} の場所に iCAR が入り、<h1>iCAR</h1> という HTML ができます。

部品を作る: MemberCard.astro

メンバー 1 人分のカードを部品にすると、こうなります。

---
// この部品を使う側から受け取る値
const { name, en, role, photo } = Astro.props;
---

<div class="member-card">
  <img src={`/img/${photo}`} alt={name} />
  <p class="role">{role}</p>
  <h3>{name}</h3>
  <p class="en">{en}</p>
</div>

2 章で書いた HTML とほとんど同じです。違うのは、名前や写真の部分が {name} のような「穴」になっていることだけです。Astro.props は、この部品を使う側から渡された値を受け取るためのものです。

部品を並べる: index.astro

トップページでは、データを読み込み、1 人ずつ部品に渡して並べます。

---
import MemberCard from '../components/MemberCard.astro';
import { members } from '../data/members';
---

<section id="member">
  <h2>Members</h2>
  {members.map((m) => (
    <MemberCard name={m.name} en={m.en} role={m.role} photo={m.photo} />
  ))}
</section>

members.map((m) => ( ... )) は「members の 1 人ずつを m と呼んで、カッコの中を繰り返す」という意味です。11 人いれば、MemberCard が 11 個できます。

import は、別のファイルにある部品やデータを使えるようにする宣言です。

手元で動かす

Astro のプロジェクトは、次の 2 つのコマンドで手元で動かせます。

npm install   # 必要な部品をダウンロードする（最初の 1 回だけ）
npm run dev   # 手元でサイトを動かす

npm run dev を実行すると http://localhost:4321/ のようなアドレスが表示されます。ブラウザで開くと、サイトが見られます。ファイルを保存すると、ブラウザの表示が自動で更新されます。止めるときは、ターミナルで Ctrl + C を押します。

確認テスト

チェックリスト

• .astro ファイルの上の部分と下の部分の役割を説明できる
• MemberCard の部品と、それを並べる index.astro の関係を説明できる