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

# Astroとは
2022年の8月にv1.0がリリースされたwebフレームワーク。
公式によると
> Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。

# 特徴

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

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

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

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

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

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

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

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

```
npm install @astrojs/alpinejs
```

:::note info
詳しいインストール方法は公式に書いてある。
[integrations-guide](https://docs.astro.build/ja/guides/integrations-guide/ "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>

```