【あすとろ】

Astro とは？

最終更新: 2026年10月2日

💡 HTMLを基本に、必要な部分へ動きを加える

コンテンツ中心のWebサイトを作るフレームワーク。HTMLを基本に必要な部分へJavaScriptを追加するアイランド、clientディレクティブ、静的生成とサーバー描画の違いを解説します。

📌 このページのポイント

HTMLの記事の中に対話できる部分を含む構成例。静的生成・要求時のサーバー描画は別の設定で、速さは追加機能や実装にも左右されます。

ひよこ

Astroは、JavaScriptを使わずにWebサイトを作るもの？

ペンギン先生

HTMLを基本に出力するフレームワークだよ。必要な部分にはJavaScriptも追加できる。すべてのページが必ずJavaScriptゼロになる、と覚えるのではなく、何をブラウザーへ送るかを考えるんだ。

ひよこ

アイランドは、ページの中の小さなアプリ？

ペンギン先生

クライアントアイランドは、ほかの部分と分けて動かすUI コンポーネントだよ。記事はHTMLで表示し、操作が必要な画像カルーセルなどだけにJavaScriptを読み込む構成にできる。

ひよこ

Reactを置けば、クリック操作も自動で動く？

ペンギン先生

通常、clientディレクティブを付けないUI コンポーネントはHTMLとして描画され、ブラウザーで動かす処理は追加されないよ。client:loadなら読み込み時、client:visibleなら画面に現れたときに読み込んで動かす、という指定ができる。

ひよこ

静的な記事サイトしか作れない？

ペンギン先生

標準ではビルド時にページを生成するけれど、サーバー用のアダプターを使えば、要求時に描画するページも作れるよ。静的に作るかサーバーで作るかと、ブラウザーで操作を動かすかは別の選択なんだ。

ひよこ

使えば、どんなサイトでも必ず速くなる？

ペンギン先生

HTML中心にして不要なJavaScriptを抑えやすいけれど、画像、追加スクリプト、データ取得などでも速さは変わるよ。ReactやVueなどを組み合わせる場合も、必要な統合と動作を確認し、実際の表示を測って判断しよう。

もっと詳しく知りたい人へ

コンテンツコレクションは、Markdownの置き場だけ？

関連する記事や商品情報などを、構造と取得方法を定めて扱う仕組みです。Markdownなどのローカルファイルだけでなく、ローダーによって外部の内容も取得できます。データの形を定義すると、必要な情報を検査しやすくなります。

クライアントアイランドはブラウザーで対話を動かすUI、サーバーアイランドはページのほかの部分から分けてサーバー側で内容を描画する仕組みです。実行場所と役割が異なり、サーバーアイランドを使うにも対応する実行環境の設定が必要です。

まとめ：ざっくりこれだけ覚えればOK！

「Astro」って出てきたら「コンテンツ中心のサイト向けのWebフレームワーク」と思えばだいたいOK！

📖 おまけ：英語の意味

「Astro」＝ Webフレームワークの名称

💬 .astro形式のコンポーネントでHTMLを組み立てます。コンテンツをHTMLとして届け、対話が必要な部分へ機能を追加する仕組みが特徴です。