フロントマターとは

Astroコーディングの基本としてまず押さえておくべきことは、ファイルが大きく3つの構造に分かれていることである。それぞれの概要については、こちらの記事にまとめてある。以下はその結論から引用した。

コンポーネントスクリプト： TypeScriptによるデータ取得やロジック処理
コンポーネントテンプレート： HTMLベースの描画領域（{ } で変数埋め込み）
コンポーネントスタイル：そのファイルだけに適用されるカプセル化されたCSS

表題となっている「フロントマター」は、この中の「コンポーネントスクリプト」のことを指す。公式ドキュメントを読む限り「コンポーネントスクリプト」が正式のようだが、個人開発ブログ界隈では「フロントマター」が使われているようだ。Astroコンポーネント（.astro）ではコンポーネントスクリプト、Markdown（.md）ではフロントマターと呼ぶのが公式の厳密な区別となるが、本記事ではフロントマターと呼称させていただきたい。

元々、「フロントマター」はMarkdownファイルのメタ情報を記載するための記述方式の名称として使われていた。Astroにおけるフロントマターも、Markdownファイルにおけるフロントマターと書き方は同じであり、--- （ハイフン3つ）で囲うことで実装が可能となっている。

そんな「フロントマター」はAstroの大きな特徴の一つであり、Astroを最大限活用するためには「何を書くことができるのか？」は勿論のこと、「何を書いてはいけないのか？」といったタブーについても知るべきではないだろうか。本記事ではそういった「フロントマター」の基礎を理解することを目標としたい。

フロントマターの大前提

フロントマターに記載する内容は「TypeScriptによるデータ取得やロジック処理」と説明しているが、こちらは脳内で「実際に画面に描画するために必要な前準備」と読み替えて欲しい。前準備として必要な処理としては、主に下記の4つが考えられる。

他のコンポーネントやライブラリの読み込み
親コンポーネントからのProps受取
外部APIやファイルシステムからのデータ取得
テンプレートで使うための計算やロジック処理

1から3については想像しやすいのではと思う。画面に描画する前に手元に持ってきておかないと着手すらできない情報（コンポーネントという部品や、親から受け取る引数、外部で管理しているデータなど）を取ってくる処理はフロントマターに書いておこうね、という話だ。テンプレートで使うための計算やロジック処理について、事前にレンダリングで使うと便利なロジックを準備しておいたり、画面に表示するデータを用意しておくこともできる。説明だけを聞いても理解は進まないので、下記のコードを見てみて欲しい。

---
// 1. 他のコンポーネントやライブラリの読み込み
import Header from '@/components/Header.astro';
import { formatDate } from '@/utils/date';

// 2. 親コンポーネントからの Props（属性）受取
interface Props {
  title: string;
  publishDate: Date;
}
const { title, publishDate } = Astro.props;

// 3. 外部APIやファイルシステムからのデータ取得
const response = await fetch('外部API');
const posts = await response.json();

// 4. テンプレートで使うための計算やロジック処理
const formattedDate = formatDate(publishDate);
---

import Header from '@/components/Header.astro'; ではヘッダー部品を取得している。 const { title, publishDate } = Astro.props; ではプロパティを受け取っている。 const response = await fetch('外部API'); では外部APIを呼び出して、必要な情報を取りに行っている。 const formattedDate = formatDate(publishDate); では日付を画面表示用のフォーマットに変換している。

「実際に画面に描画するために必要な前準備」ということは理解いただけたと思う。むしろフロントマターには何を書いては駄目なのだろうか？

フロントマターのタブー

フロントマターに書いてはいけないものを理解するためには、「フロントマターに実装した処理はサーバー／ビルド時のみで実行される」ということを知っておく必要がある。言い換えるとビルドされた後に期待される操作については、フロントマターに書いても動かないということになる。

ユーザーのアクションに応答する「イベントハンドラー」
コンポーネントの「状態」をフロントマターで保持・更新しようとすること
ブラウザ関数を実行すること
非効率な重いデータ処理や「無制限なループ処理」を書くこと

ユーザーのアクションに応答する「イベントハンドラー」

ボタン押下といったイベントに対する制御は、フロントマターに記載されても動かない。なぜなら、それらイベントハンドラーの制御はビルドされた後に実行されるものだからである。

コンポーネントの「状態」をフロントマターで保持・更新しようとすること

Reactの useState やVueの ref のようなものをご存じの方は、それと同じような感覚で、Astroフレームワークの状態制御をフロントマターに書こうとしてしまうかもしれない。しかし、ビルド時にしか動かないフロントマターに書いたところで保持も変更もできないことを理解しておかなければいけない。

ブラウザ関数を実行すること

ChromeやFirefoxといったブラウザには、それぞれブラウザが提供している関数というものが存在する。これらはビルド時ではなく、ブラウザに描画されるタイミングで実行される処理のため、フロントマターに書いたところで動くはずがない。

非効率な重いデータ処理や「無制限なループ処理」を書くこと

SSG（静的サイト生成）の場合、フロントマターの処理はビルド時に全ページ分が一斉に実行される。これによりビルドに何十分も時間がかかるようになる。

まとめ

本記事では、Astroの「フロントマター（コンポーネントスクリプト）」の基礎と注意点について解説した。ポイントを以下の表にまとめた。

項目	ポイント
役割	画面に描画するための「前準備」を行う場所
主な処理内容	1. import 2. Props受取 3. データfetch 4. 描画用ロジック
実行環境	サーバーサイド（ビルド時 / SSR時）
タブー（NG行為）	ブラウザ専用のAPI（window等）の操作、イベント処理の記述