📑

Astro使ってみたのでその所感

2022/07/01に公開

Astro

idea

最近Astroを使って個人サイトを作る機会がありました。
なかなか良かったので、個人的に感じたメリットを振り返っていきたいと思います。

Astroとは

https://astro.build/

Astroは一言でいうと静的サイトビルダーです。
静的サイトビルダーというとNext.jsやNuxtJSのSSGを思い浮かべるかもしれませんが、Astroは前述のフレームワークとは少しアプローチが異なります。
~~「More HTML、Less JavaScript」とあるように、~~（いつの間にか記述がなくなってました）Astroはビルド時に可能な限りJavaScriptを排除して、HTMLとCSSを生成します。
不必要なJavaScriptを排除することによって、Webサイトにおける高いパフォーマンスを担保します。

個人的に感じたメリット

UIフレームワークとの統合が可能

AstroはReactやVueといった、UIフレームワークを統合できます。
~~必要な場面があるかはわかりませんが~~なんと驚くべきことに、複数のUIフレームワークの併用が可能です。

Astro supports a variety of popular frameworks including React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit.

本記事執筆時点（2022.7.1）時点では上記のフレームワークがサポートされています。

ただし、上記のフレームワークを統合したとしても、デフォルトではビルド時にすべてのJavaScriptが排除されます（詳しくは下記のPartial Hydrationを参照）。

Partial Hydrationというコンセプト

Partial HydrationはAstroのコアコンセプトです。これまでに説明したように、Astroはビルド時にJavaScriptを排除します（デフォルトではすべて排除）。
一方でインタラクティブなUIを実装するためには、クライアントサイドでJavaScriptが必要なこともあります。
Astroはページ全体でJavaScriptを強制するわけではないので、開発者がコンポーネント単位で明示的にJavaScriptを許可します。これをPartial Hydrationといいます。

Partial Hydration

---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 下記コンポーネントはJavaScriptが排除される -->
<MyReactComponent />

<!-- 下記コンポーネントはJavaScriptが適用される -->
<MyReactComponent client:load />

コンポーネント指向な開発ができる

ReactやVueなどのUIフレームワークと統合することもできるので、当然コンポーネント指向での開発が可能です。
また標準の.astroファイルでも、HTML+JSXライクな構文となっており、HTMLやJSXを書いたことのある人ならば、親しみやすいように設計されています。
私は普段Reactを使うことが多いのですが、Reactの経験があれば、すぐに書くことが可能だと思います。

Astroコンポーネントは以下のような構文です。

コンポーネント構文

---
// コンポーネントスクリプト (JavaScript)
---
<!-- コンポーネントテンプレート (HTML + JS Expressions) -->

試しにシンプルなButtonコンポーネントを作ってみます。

Button.astro

---
const { title } = Astro.props
---
<button>{ title }</button>

上記のコンポーネントをページ（or別コンポーネント）からインポートして使うことができます。

---
import Button from './Button.astro';
---
<div>
  <Button title="hoge" />
  <Button title="huga" />
  <Button title="piyo" />
</div>

ScopedなCSS

Astroコンポーネントにスタイルタグを記述すると、自動的にScopedなCSSが生成されます。

Scoped CSS

<style>
  h1 { color: red; }
</style>
<!-- ↓　下記のように変換される -->
<style>
  h1.astro-HHNQFKH6 { color: red; }
</style>

ファイルベースのルーティングシステム

Astroはファイルベースのルーティングをサポートしてます。
src/pages/ディレクトリ以下に.astroか.mdを配置することで、自動的に静的なルーティングを設定できます。

# 静的なルーティング例
src/pages/index.astro        -> example.com/
src/pages/about.astro        -> example.com/about
src/pages/about/index.astro  -> example.com/about
src/pages/about/me.astro     -> example.com/about/me
src/pages/posts/1.md         -> example.com/posts/1

また本記事では触れませんが、動的ルーティングにも対応しています。

Markdownのサポート

AstroではMarkdownをビルドインでサポートしています。
一般的なMarkdownの記法に加え、コンポーネントをインポートできるなど、Astro用に拡張された記述が可能です。
ブログやドキュメントなどのMarkdown形式で構築したいサイトにも向いています。

Markdown例

---
layout: ../layouts/BaseLayout.astro
setup: |
  import Button from '../../components/Button.astro'
---

# Hoge
- fuga
<Button title="piyo">

TypeScriptのサポート

TypeScriptもビルドインでサポートされています。
ただしAstro自体は型チェックをしないようなので、エディターのプラグインなどを使用する必要があります。
VSCodeを使っていれば、AstroVSCodeExtensionで型チェックが可能です。

個人的ユースケース

高パフォーマンスな静的サイトの構築
JavaScriptがそこまで必要ではない
UIフレームワークを使いつつ、不要なJavaScriptは省きたい
Next.jsやNuxtJSがオーバースペックに感じるサイト
SPAの挙動が必要ない
コンポーネント指向で開発したい

あくまで個人的にですが、上記のような場合にAstroは検討できると思います。

他のフレームワークとの比較については公式にも言及があるので、下記をご参照ください。

おわりに

私は普段、Next.jsを使用したWeb開発を行なうことが多いのですが、ちょっとした静的サイトを作るには若干オーバースペック気味に感じていたこともあったので、Astroはその辺りを上手く代替してくれるフレームワークに感じました。静的サイトの制作においては、1つの選択肢として候補に入れておくのもアリだと思います。

本記事で紹介しているの機能は、あくまで一部にしかすぎないので、Astroに興味がある方は是非公式ドキュメントをご覧ください！