LESSON 03 · 約25分
Astroコンポーネントとテンプレート
frontmatterで値を用意し、HTMLに近い記法で組み立てます。
コードを試す前に
02で作成する基本プロジェクトが前提です。各コード例は独立した学習用の例です。
各コードは独立した学習用の例で、すべてを順に一つのプロジェクトへ上書きする形式ではありません。同じレッスン内の対応ファイルは組み合わせます。依存関係・入力ファイル・実行条件は各noteに記載します。
開発環境の準備を確認する →このレッスンでわかること
- frontmatterとテンプレートの役割を区別できる
- 配列・条件・属性をテンプレートへ反映できる
一つのファイルに二つの領域
拡張子.astroのファイルでは、上部の---で囲んだ領域をコンポーネントスクリプト、またはfrontmatterと呼びます。ここでimportや変数の準備をします。その下のテンプレートがHTMLなどの表示を定義します。AstroのfrontmatterはJavaScriptで、Markdownのfrontmatterに書くYAMLのメタデータとは役割が違います。
中括弧で値や式を差し込む
{title}で文字列を表示し、href={url}で属性へ値を渡します。mapは配列を要素の繰り返しに変え、条件演算子や&&は表示の分岐に使えます。テンプレートはReactのJSXと似た部分がありますが、class属性をそのまま書け、複数の要素を外側の一つのdivで囲む必要もありません。
HTMLを作る処理は、クリック待ちではない
静的ページのfrontmatterはビルド時に、オンデマンドページではサーバーでリクエスト時に実行されます。値を変えればブラウザーの画面が自動で再描画される、というReactのstateのような仕組みではありません。ブラウザーのイベントは07で扱います。
文字列とHTMLは別に扱う
通常の{value}は文字列を安全に表示するためにエスケープされます。HTMLとして挿入するset:htmlは別機能です。外部入力を検証せず渡すとスクリプトを埋め込まれる危険があるため、この入門では通常の式による表示を基本にします。
配列からカードをつくる
---
const notes = ['港の散歩', '山の喫茶店'];
---
<section>
<h2>旅のメモ</h2>
{notes.length === 0 ? <p>まだありません。</p> : (
<ul>{notes.map((title) => <li>{title}</li>)}</ul>
)}
</section>ページのfrontmatterでimport NoteList from "../components/NoteList.astro"し、テンプレートに<NoteList />を置いて確認します。
TRY IT YOURSELF
表示されるHTMLを予想する
- 配列に3件目を追加する
- 配列を空にして0件のメッセージを確認する
- 文字列に<b>を含め、タグとしてではなく文字として出ることを確かめる
できたらOK：mapと条件分岐によって生成される内容を説明できる
QUICK CHECK
理解を確かめよう
公式資料でもう少し詳しく
ここまで読めたら、ひとつ前進。