Astroとは、アイランドアーキテクチャをベースとしたコンテンツドリブンのウェブサイトを作成するためのウェブフレームワークです。
備忘録的にご紹介します。
Astroはコンテンツを届けることに注力したフレームワーク
Astroはコンテンツが豊富なサイト向きのWebフレームワークで、アイランドアーキテクチャを採用しています。
ドキュメントサイト、ブログ、ポートフォリオ、ランディングページなどに向いており、管理者ページやメッセージ管理などをするのには向いていません。（他にもっと向いてるのがある）
「コンテンツ」を届けることに注力しているWebフレームワークと言えます。
アイランドアーキテクチャとは
アイランドアーキテクチャを、ものすごいザックリと表現すると「HTMLの海に浮かぶウィジェットのようなもの」であり、そのアイランドを用いて組み立てることによってサイトが構成されることになります。それぞれのアイランドは組み立てとしては他のアイランドから独立していますが、プログラムによってアイランド同士が状態を共有し、相互に要素を変更することが可能です。
この利点として、アイランドごとに違うJavaScriptフレームワークを用いたりすることができるようになります。つまり、Webサイトを制作するときに、ReactやVue、Svelteなどからどれか1つのJavaScriptフレームを決めて制作するということがなくなり、異なるスキルセットを持つチームメンバーが新たなJavaScriptフレームワークを覚えなくても平行的に開発作業に参加できるようになります。
容易に開発メンバーを増やすことができるようになる、というのは面白いアピールです。
Astroの書き方
いくつかのテンプレートが用意されているので、ソコから始めると理解しやすいと思われます。
ドキュメントサイト自体もAstroで作成されており、Starlightというテンプレートがあります。
こちらのトップページのコードは以下にあります。
部分的に引用します。
---
title: Starlight 🌟 Astroでドキュメントサイトを作る
head:
- tag: title
content: Starlight 🌟 Astroでドキュメントサイトを作る
description: Starlightは、Astroを使った美しく高性能なドキュメントサイトの構築を支援します。
template: splash
editUrl: false
lastUpdated: false
hero:
title: Starlightでドキュメントを輝かせる
tagline: 最高のドキュメントサイトを作るために必要なものがすべて揃っています。高速でアクセシブル、しかも使いやすさも備えます。
image:
file: ~/assets/hero-star.webp
actions:
- text: はじめる
icon: right-arrow
link: /ja/getting-started/
- text: GitHubで見る
icon: external
variant: minimal
link: https://github.com/withastro/starlight
---
import { CardGrid, Card } from '@astrojs/starlight/components';
import AboutAstro from '~/components/about-astro.astro';
import TestimonialGrid from '~/components/testimonial-grid.astro';
import Testimonial from '~/components/testimonial.astro';
<CardGrid stagger>
<Card title="心躍るドキュメント" icon="open-book">
サイトナビゲーション、検索、国際化、SEO、読みやすいタイポグラフィ、コードハイライト、ダークモードなどを内蔵しています。
</Card>
<Card title="Astro製" icon="rocket">
Astroのパワーとパフォーマンスを最大限に活用できます。お気に入りのAstroインテグレーションやライブラリで、Starlightを拡張できます。
</Card>
<Card title="Markdown、Markdoc、MDX" icon="document">
お好みのマークアップ言語を使えます。Starlightは、TypeScriptの型安全性を活かしたフロントマターのバリデーションを組み込みで提供します。
</Card>
<Card title="独自のUIコンポーネントの利用" icon="puzzle">
Starlightは、特定のフレームワークに依存しない、ドキュメント向けの完全なソリューションとして提供されています。React、Vue、Svelte、Solidなどで拡張可能です。
</Card>
</CardGrid>立ち止まって検討すべき点
昔、サーバーサイドJavaScriptが出てきたとき「JavaScriptでなんでもやるんだな」という印象を持ちました。
このAstroも様々なインテグレーションが用意されており、Eコマース向けの決済機構やログイン機能を実装する認証機構などを導入することが可能とされています。SQLiteクローンのDBを設置することもでき、Pagefindによるページ検索機能を追加することも出来ます。このように様々なコトができ、また多くのブログ等で取り上げられているからこそ「本当にAstroを選択するのがベストなのか？」というのは検討すべきかなと思います。
WordPressで良くない？
CMSとしてWordPressと連携する方法が公式で紹介されています。これで、Astroの静的サイトジェネレーターとしての利点を活かしつつ、WordPressを基本とした利用をすることが出来ます。
https://docs.astro.build/en/guides/cms/wordpress/
なら、もうWordPressをそのまま使ったほうがコンテンツを素早くお届けできてしまうのでは…？
デザインも豊富だし…
と思う方もいるのではないでしょうか。
実際のところ、特に表示速度に問題がないのならまずはWordPressでのサイト公開をしてしまい、裏でAstro版をコツコツ作るというのもアリではないでしょうか。
生のHTML、CSS、JavaScriptで良くない？
サイトやページのコンテンツ次第ですが、生の3点セットで間に合ってしまうこともあるのではないでしょうか。
職業訓練校のカリキュラムなのか HTML, CSS, (生の)JavaScriptを身につけているWebデザイナーの方も多いと思うのですが、HTML, CSS, JavaScriptでコト足りる場合もあるかと思います…。
プロジェクトにおけるオンラインマーケティングの重要ポイントがWebサイトではなく、例えば動画やSNSコミュニケーションであるならばそちらに注力し、WebサイトについてはWebデザイナーに任せてしまうなどのリソース配分もアリかと思います。
AIコーディング時代のAstroの使いどころ
RAG的にデータベースにある既存コンテンツ内のコードをチェックさせつつ、新たなページを対話しながら作成する…とかは結構コスパ良いのではないかなと思います。
WordPressなどのCMSでも同じことができると思いますしAIとの連携プラグインなども存在していますが、イメージしやすいのはAstroとAIの組み合わせじゃないかなと思います。
トップページやカテゴリー別のデザインは決めて作成し、それに準じたページを大量に生産させるとかはプログラマブル・コンテンツの利点ではないでしょうか。
（プログラム可能なコンテンツ、の意味で使っています）
例えばですが、ある程度のコンテンツ量が期待されるオウンドメディア、アフィリエイトサイトなど記事を量産するような目的においては効果的ではないかなと思われます。
この時代がいつまで続くかはわかりませんが、2025年内はなんとか通用するのではないでしょうか。
