世は大フレームワーク時代
この世には終わりの無いものが二つある。宇宙と、新しいwebフレームワークの誕生だ。
というわけでwebフレームワークという宇宙にまた新たな星が誕生しました。
つい先日ver1.0のリリースを迎えたAstroです。
Astroとは
Astroは静的サイトの開発に適したwebフレームワーク/ビルダーで、MPA(Multiple Page Application)アーキテクチャを採用しています。
UIフレームワーク(VueやSvelte等)で作成したテンプレートやmarkdown、MDXを元に静的なhtmlを生成するのが主な役割になっています。
既存のものだとGatsbyやNext.jsが比較対象になるでしょう。(これらはSPAアーキテクチャを採用していますが)
Astroを使うメリット
ざっくり分けると3つあります。
- 特定のUIフレームワークへの依存がない
- 低い学習コスト
- 高速
特定のUIフレームワークへの依存がない
先程比較対象に挙げたGatsbyやNext.jsはUIフレームワーク/ライブラリとしてReactを使用しています。
AstroはJSXに酷似した独自のテンプレート言語の他、以下のUIフレームワークが公式でサポートされています。
- React
- Vue
- Svelte
- SolidJS
- Preact
- Lit
特筆すべき点は、このUIフレームワークらを同時に複数使用できることです。
以下サンプルコード。
---
import NavBar from "../components/navbar/Navbar.jsx";
import Component from "../components/navbar/Component.svelte";
---
<div>
<Navbar />
<Component />
</div>
独自のテンプレート言語についてはひとまず置いといて。
ご覧の通り、.jsxのコンポーネントと.svelteのコンポーネントが並用できています。
便利そうですが、メンテナンスが難しくなりかねないというデメリットもあるので使い方には気をつけたほうがよさそうですね。
この特徴がもたらすメリットとして、別のUIフレームワークへの移行がスムーズにできるというのありますね。(こっちの方がメインかも)
低い学習コスト
UIフレームワークに縛りがないので、慣れたツールを使えるという点で学習コストは低いと言えるでしょう。
独自の構文もJSXに酷似しているため、htmlとJavascriptさえ出来れば簡単に理解できるものだと思います。
独自の構文
例として、.astroファイルはこんな感じの構成です。
---
// コンポーネントスクリプト (JavaScript)
---
<!-- コンポーネントテンプレート (HTML + JS Expressions) -->
リストコンポーネントの例。
---
import ListItem from './ListItem.astro'
interface Props {
list: string[]
}
const { list } = Astro.props as Props;
---
<ul class="wrapper">
{list.map(item => <ListItem content={item}/>)}
</ul>
<style>
.wrapper{
display: flex;
}
</style>
なんとなくVueとReactを混ぜた感じがしますね。かなり読みやすいです。
Vueでおなじみの<slot />なんかもあります。
テンプレート内ではJSXに酷似した構文が使用できます。
JSXとの違い
attribute名
classが普通に使えて、attribute名はkebab-caseになっています。
- <button className="btn" onClick={handleClick}>Click Me!</button>
+ <button class="btn" onclick={handleClick}>Click Me!</button>
<head>の挿入
Next.jsの<Head>のようにテンプレート内で宣言できます。
コメントの扱い
JSXはjs文法のコメント(//で始まる)を使用しますが、Astroのテンプレート内ではhtmlコメント(<-- -->で囲う)を使用します。
学習コストを高めるような大きな違いはないですね。
高速である
Astroの公式サイトでは「Astroで遅いウェブサイトを構築することは不可能です。」とまで言われています。
そんなAstroはアイランドアーキテクチャを採用しています。
ざっくり解説しますと、webページを構成するパーツ（コンポーネント）を必要に応じて動的にする手法です。
以下の図のように、機能性が必要でない部分はビルド時に静的生成して、必要な部分は最低限のJavascriptとともにレンダーするイメージです。
詳しく知りたい方はPreactの筆者であるJason Miller氏が執筆したこの記事をお読みください。
デフォルトでは、全てのコンポーネントはビルド時に静的生成され、一切のJavascriptを含みません。
client:loadなどのディレクティブを付けてやっとJavascriptが一緒に送信されます。
<Component client:load /> <-- ページロード時に読み込む -->
<Component client:idle /> <-- ページロード後に読み込む -->
<Component client:visible /> <-- コンポーネントがビューに入ったときに読み込む -->
この手法により必要最低限のJavascriptのみをユーザーに送ることが可能です。
おわりに
Astro、いかがでしょうか。個人的に触ってみて好感触だったので、この記事でその魅力を伝えられていたら嬉しいです。
この記事では紹介しきれませんでしたが、ssrや画像最適化などのNext.jsっぽい機能もあったりします。
プラグインも色々あるのでぜひ一度触ってみてください。