Astroコンポーネントの構造

Astroコーディングの基本としてまず押さえておくべきことは、ファイルの拡張子は.astro であること。そして、ファイルが大きく3つの要素に分かれていることの2点である。下記はファイルを構成する3つの要素である。

コンポーネントスクリプト
コンポーネントテンプレート
コンポーネントスタイル

従来のウェブサイトは「HTML」「CSS」「JavaScript」の3つでそれぞれファイルを分けて作成されていたが、Astroフレームワークを使うことで .astro ファイル1つで全てを統合することができるようになっている。ここで考えたいのは、ウェブサイトを構成する大きな3要素を、どのように記述することができるのか？　ということである。

本記事ではそれらを踏まえて整理していきたい。とはいえ詳細な機能やできることを語ることは避け、あくまで概要のみに焦点を当てた記載としたい。

コンポーネントスクリプト

--- （ハイフン3つ）で区切られた範囲のことを指し、ここにはTypeScriptコードを記述することができる。具体的にできることとしては、下記のようなことが挙げられる。

他のコンポーネントやライブラリの import
外部APIやデータベースからのデータ取得
親コンポーネントからの Astro.props（属性）の受け取り
HTMLテンプレートで使う変数やロジックの計算

該当の部分については、フロントマター（コンポーネントスクリプト）とも呼ばれるため、そちらの名称で知っている方の方が多いかもしれない（少なくとも自分はそうだった）。フロントマターとはマークダウンファイルでも使われている名称であり、タイトルや作成日、タグ、公開設定などのメタ情報を記載する --- （ハイフン3つ）で囲われた範囲のことを指している。

コンポーネントテンプレート

HTMLタグを記述することができる。AstroフレームワークはHTMLスーパーセットと言われることもあり、HTMLが分かっていれば最低限の実装は可能となっている。HTMLとの違いとして、波括弧 { } を使うことでJavaScriptの変数や処理結果を直接埋め込むことができるようになっている。また、コンポーネントスクリプトでインポートしたコンポーネントをタグと同じような書き方で利用することも可能だ。

コンポーネントスタイル

<style> タグで囲われた範囲のことを指し、そこにはCSSコードを記述してレイアウトを指定することができる。ちなみにレイアウトが反映されるスコープの範囲はファイル内のみに限られる（つまりクラス名が他ファイルと被っていても問題にならない）。

参考コード

ここまで解説した3要素を実際のコードで表すと、以下のような構造になる。

---
// 1. コンポーネントスクリプト（フロントマター）
import Header from './Header.astro';
const { title = "デフォルトタイトル" } = Astro.props;
---

<!-- 2. コンポーネントテンプレート -->
<Header/>
<main>
  <h1>{title}</h1>
</main>

<!-- 3. コンポーネントスタイル（このファイル内だけに適用される） -->
<style>
  h1 {
    color: #333;
    font-size: 2rem;
  }
</style>