Astroコンポーネントのコーディング
Astroコンポーネントは、.astro拡張子を持つ、Astro独自のUI言語を使用したファイルです。先ほど開発サーバーで表示されたページも、src/pages/index.astroというファイルが静的なHTMLに変換されたものになります。
それでは、index.astroの中身をVSCodeで開いて見てみましょう。
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
Astroコンポーネントは、大きく分けて、「コンポーネントスクリプト」と「コンポーネントテンプレート」と呼ばれる領域から成り立っています。
--- // コンポーネントスクリプト --- <!-- コンポーネントテンプレート -->
.astroという特殊な拡張子を見ると、新しい言語体系を学ばなくてはならないと身構えてしまうところですが、.astro言語はHTMLのスーパーセットになっており、HTMLとしての機能をすべて含んだ上で、より便利な機能が拡張された上位互換というべきものになっています。したがって、普段のHTMLコーディングで見慣れたマークアップをすべてそのまま記述することができます。
試しに、このindex.astroのファイルを少し修正してみましょう。
---
---
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Astroのサンプルページです。">
<title>Astro</title>
</head>
<body>
<main class="main">
<article class="article">
<h1 class="title">Astro</h1>
<figure>
<img src="/favicon.svg" alt="Astroのロゴ" width="100" height="100">
</figure>
<h2>見出しが入ります。</h2>
<p>文章のサンプルです。<br>
改行が入ります。</p>
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>
</article>
</main>
</body>
</html>
修正内容は以下のとおりです。
-
<!DOCTYPE html>を追加 -
lang属性をjaに修正 -
一部の自己終了タグ（
metaやlink）の末尾スラッシュ（/）を削除（あっても問題ありませんが、img、brタグなども合わせて無しに統一） -
<meta name="generator"...>（このページは○○で作られました情報）を削除 -
<meta name="description"...>を追加 -
body内にいくつかのマークアップ（一部class属性あり）を追加
先ほど開発サーバーとして開いたブラウザで、修正内容が反映されていることを確認してみましょう。
上記修正したindex.astroのコードを見てわかるように、冒頭の---で囲われた部分（コンポーネントスクリプト）、
--- // コンポーネントスクリプト ---
を除いたコード（コンポーネントテンプレート）は、通常のHTMLとなんら遜色のないマークアップで記述されています。
コンポーネントテンプレートでは、ReactにおけるJSX構文と異なり、
-
class属性のclassName表記 -
自己終了タグ（
imgやbrなど）の末尾スラッシュ（/）が必須
などの縛りもありません。
つまり、すでに運用中のHTMLファイルがあった場合、それらのコードをそのまま流用して、.astroとして構築することもできます。
その上で、JavaScriptを内包できるJSXに似た構文や、CSSスコープなどの便利な機能を使うこともできるため、開発初心者にとってAstroコンポーネントは、非常に柔軟でとっつきやすいファイル形式と言えるでしょう。
publicフォルダーの扱い
publicフォルダーに格納されたアセット群は、Astroのビルド（astro build）によって、distフォルダに同名・同階層のファイルとしてコピーされます。
例：
public/favicon.svg → dist/favicon.svg
public/images/icon-menu.png → dist/images/icon-menu.png
この場合、Astroコンポーネントからは、publicフォルダーから見たルートパスで記述することができます。
<!-- public/favicon.svgを画像として挿入する --> <img src="/favicon.svg" alt="Astroのロゴ" width="100" height="100">
ビルドする際に、特別な処理や最適化などが必要ないアセットに関しては、このようにpublicフォルダを使った運用も可能です。
Astroの「ページ」
Astroプロジェクトにおける「ページ」は、src/pagesフォルダーにあるファイル群のことで、以下のファイルタイプをサポートしています。
-
.astro（Astroコンポーネントファイル） -
.html（HTMLファイル） -
.md（マークダウンファイル） -
.mdx（マークダウンを拡張した形式のファイル）
src/pagesフォルダーに格納されたこれらのファイルは、Astroのビルド（astro build）によって、それぞれ同名・同階層の静的HTMLファイルに変換されてdistフォルダに出力されます。
.md（マークダウンファイル）なども自動的にHTMLに変換されるため、シンプルなドキュメント運用も可能ですが、この連載では基本的に.astroファイルを用いたコーディングに絞って解説していきます。
例：
src/pages/index.astro → dist/index.html
src/pages/about.astro → dist/about/index.html
src/pages/news/2023.astro → dist/news/2023/index.html
デフォルトの設定だと、index.astro以外のファイル名の場合、ファイル名/index.htmlに変換されますが、astro.config.mjsに以下のフォーマットオプションを追加することで、
import { defineConfig } from 'astro/config';
// <https://astro.build/config>
export default defineConfig({
// 追加ここから
build: {
format: 'file'
},
// 追加ここまで
server: {
host: true,
open: true
},
});
src/pages/about.astro → dist/about.html
のように、ファイル名.htmlに変換することもできます。最終的に実現したいサイト構造に応じて適宜使い分けてください。
連載第2回では、Astro開発環境の構築と、.astro拡張子のファイルを用いたコーディングの基本を解説しました。次回は、Astroの再利用可能なコンポーネントの作成と運用方法を説明したいと思います。
