Astroとは
ひとことで言うと
Astroは、Astro公式の説明で「ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワーク」です。EmDashのサイトでは、Astroがページ、レイアウト、コンポーネント、サーバーでの描画を担当します。
フォルダーの構成と役割
図のテキストを読む
flowchart TB
subgraph SRC["src/"]
PG["pages/<br/>URLに対応するページ"]
LY["layouts/<br/>共通の外枠（ヘッダー・フッター）"]
CO["components/<br/>使い回す部品"]
end
CFG["astro.config.mjs<br/>インテグレーションとアダプター"]
SEED["seed/seed.json<br/>コレクション・メニュー・サンプルコンテンツ"]
PG -- "読み込む" --> LY
PG -- "読み込む" --> CO
| WordPress | Astro | 役割 |
|---|---|---|
index.php、single.php、page.php |
src/pages/ |
URLのルート |
template-parts/ |
src/components/ |
使い回すマークアップ |
header.php、footer.php |
src/layouts/ |
ページ共通の外枠 |
style.css |
src/styles/ |
サイトのスタイル |
| プラグインとデータベースの設定 | astro.config.mjs |
インテグレーションとサーバーのアダプター |
ページファイルとURLの対応
src/pages/ の各ファイルが、そのファイルパスに対応するURLになります。角括弧の付いたファイル名は、URLの一部を変数として受け取ります。
図のテキストを読む
flowchart LR
F1["src/pages/index.astro"] --> U1["/"]
F2["src/pages/posts/index.astro"] --> U2["/posts"]
F3["src/pages/posts/[slug].astro"] --> U3["/posts/hello-world"]
F4["src/pages/pages/[slug].astro"] --> U4["/pages/about"]
コンポーネントとサーバーでの描画
- Astroコンポーネント（
.astroファイル）は、コンポーネントスクリプトとコンポーネントテンプレートの2つの部分でできています。 ---で囲んだ部分のコードはサーバーで実行され、その下のマークアップが返すHTMLになります。データベースへの問い合わせなどのサーバーの処理は、---の中に書きます。- Astro公式は、Astroコンポーネントは「クライアント上でレンダリングされない」と説明しています。ビルド時、またはリクエスト時にサーバーで描画されます。
- 現在のEmDashのテンプレートは
astro.config.mjsでoutput: "server"を指定しています。そのため、ページはリクエストごとにデータベースからコンテンツを取得でき、公開したコンテンツの表示に再ビルドは要りません。
Astroの詳しい使い方は、Astro公式の日本語ドキュメント（https://docs.astro.build/ja/）で確認できます。
AIに聞いてみよう
根拠にした公式ページ
- Astro公式「Astroを選ぶ理由」：https://docs.astro.build/ja/concepts/why-astro/
- Astro公式「Astroコンポーネント」：https://docs.astro.build/ja/basics/astro-components/
- Astro公式「ページ」：https://docs.astro.build/ja/basics/astro-pages/
- Astro公式「オンデマンドレンダリング」：https://docs.astro.build/ja/guides/on-demand-rendering/
- EmDash公式「WordPress開発者のためのAstro」（本サイトの訳）：https://docs.emdashcms.com/coming-from/astro-for-wp-devs/