Astroを軽くさわってまとめてみた

Astroとは

2022年の8月にv1.0がリリースされたwebフレームワーク。
公式によると

Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。

特徴

コンテンツファーストである

コンテンツにフォーカスしたと書いてあるように、マーケティングサイト、出版サイト、ドキュメントサイト、ブログ、ポートフォリオ、一部のeコマースサイトを作成する際に向いている。
他のWebフレームワークのほとんどは複雑なWebアプリケーションを構築するために設計されているものが多く、Astroはアプリケーションにフォーカスした実装と引き換えに高いパフォーマンス機能を提供しているらしい。

もしプロジェクトでWebアプリケーションを構築しようとしている場合、Astroは最適ではないかもしれないので、アプリケーション特化のNext.jsをチェックしてみてとのこと

サーバーファーストである

Astroはサーバーサイドでのレンダリングを活用し、MPA（マルチページアプリケーション）のアプローチをしている。
Next.js、SvelteKit、Nuxt、Remixなど、他のモダンなJavaScript Webフレームワークはクライアントサイドレンダリングを主に行っており、SPA（マルチページアプリケーション）と呼ばれるアプローチをとっている。

MPA vs SPA
どちらが良いか悪いかということではなくトレードオフの関係である。
サーバーサイドレンダリングの場合、クライアントレンダリングと比べてJavaScriptのダウンロード、解析、実行をあまり必要としないため初回ロードが早くなる。これは、コンテンツに特化したWebサイトでは重要なためAstroで採用されている。
一方、ルーティングに関してはSPAの方が早いためこれを重視するWebアプリケーションでは有益である。

複数のUIフレームワークが利用できる

現在（2022/09/09）はReact、Preact、Svelte、Vue、SolidJS、AlpineJS、Litが使える。
使用するにはまずインストールする必要がある。

npm install @astrojs/alpinejs

詳しいインストール方法は公式に書いてある。
integrations-guide

インストールしたら、astro.config.mjsにimportしてintegrationsの配列に関数を追加する。

astro.config.mjs

import { defineConfig } from 'astro/config';

import react from '@astrojs/react';
import preact from '@astrojs/preact';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
import lit from '@astrojs/lit';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  integrations: [react(), preact(), svelte(), vue(), solid() , lit(), alpine()],
});

Astroコンポーネントの中であれば、複数のフレームワークで作られたコンポーネントをインポートし、レンダリングできる。

src/pages/mixing-frameworks.astro

---
// 例: 同じページで複数のフレームワークのコンポーネントを混在させる
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

Astroコンポーネント

クライアントサイドのランタイムを持たない、HTMLのみのテンプレートコンポーネントである。
Astroコンポーネントはビルド中にHTMLへ変換されるため、コンポーネントの内部でJavaScriptコードを実行しても、すべて事前に実行され、ユーザーに送られる最終ページから取り除かれる。そのため、サイトを遅くするJavaScriptがゼロのWebサイトをつくることができる。

Astroコンポーネントの構文は、HTMLのスーパーセットになっている。ファイル拡張子は.astro
Astroコンポーネントは、コンポーネントスクリプトとコンポーネントテンプレートという2つの主要な部分で構成されている。

コンポーネントスクリプト

コンポーネントスクリプトはコードフェンス（---）で囲われており、以下のようなことを記述できる。

• 他のAstroコンポーネントのインポート
• 他のフレームワークコンポーネント（Reactなど）のインポート
• データ（JSONファイルなど）のインポート
• APIやデータベースからコンテンツを取得するコード
• テンプレートで参照する変数の作成

コンポーネントテンプレート

コンポーネントテンプレートは、コンポーネントの出力するHTML部分になる。
Astroのコンポーネントテンプレート構文は色々サポートされている。

src/pages/index.astro

// コンポーネントスクリプト
---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';

const name = "ujita";
---

// コンポーネントテンプレート
<Layout title="Welcome to Astro.">
	<main>
		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
		<ul role="list" class="link-card-grid">
            // コンポーネント表示したり
			<Card
				href="https://docs.astro.build/"
				title="Documentation"
				body="Learn how Astro works and explore the official API docs."
			/>
		</ul>
        // JSXみたいにかける
        <div>
          <h1>Hello {name}!</h1>  <!-- 出力: <h1>Hello ujita!</h1> -->
        </div>
	</main>
</Layout>

<style>
	h1 {
		margin: 2rem 0;
	}
</style>