「More HTML, Less JavaScript」が気になるAstroを触ってみる

※この記事は以前ちょっと株式会社 社員ブログで公開していたものです

こんにちわ！フロントエンドエンジニアのしまむーです！
現在主流のサイトジェネレーターは個人的な体感としてNext.js、Nuxt.js、Hugo、Gatsby.jsの四つが現在の主流になっているのではないかなと感じています。ちょっと社では主にGatsby.jsとNext.jsを利用することが多いのですが今回はMore HTML, Less JavaScriptのキャッチコピーが気になる*静的サイトジェネレーター** Astro を触ってみようと思います。

Astroとは

Astro（アストロ）は、コードを基に静的サイトを生成できる静的サイトジェネレーターです。最大の特徴は生成されたコードではJavaScriptがビルドされたファイルに最低限しか使われていないという点です。実際に公式のテンプレートで作成されたページをビルドしてみたのですが、生成されたものはHTMLとCSSのみで構成されていました。(もちろん表示上でどうしても必要なJSのコードなどは記述することが可能です)

大部分がHTML、CSSのみになることによってJavaScriptの処理に使われる時間がなくなり表示速度や処理の実行速度が高速化されます。

Astroの基本構文

コンポーネント

AstroのComponentの構文はとてもシンプルで理解しやすいです。
特徴としてはHTMLテンプレート部分とJavaScriptの記述部分が---のラインで区切られている点です。その他は一般的なJSXとJavaScriptでの記述と何ら変わりありません。
また、各フレームワークの構文をネイティブでサポートしており、AstroにReactのコンポーネントを組み合わせて使うことも可能です。

---
// Component Script (JavaScript)
// ButtonGroup.astro　の Buttonコンポーネントをimport して利用する
import Button from './Button.astro';

// names = ["hitokage", "zenigame", "hushigidane"];
import names from '../data/pokemon.json';

// 当然APIからフェッチで取得してきたデータも扱えます。
// const names = await fetch('SOME_SECRET_API_URL/pokemon').then(r => r.json());
---
<!-- Component Template (HTML + JS Expressions) -->
<div>
  {names.map((name) => (
    <Button>title</Button>
  ))}
</div>

プロジェクト構造

基本的には下記のようなディレクトリ構造を用います。他のサイトジェネレータでもよく見かけるような構造ですね。

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── [...slug].astro
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
└── package.json

その他の機能

ルーティングなどについてもNext.jsと同様にファイル名とディレクトリの名称に沿ってページが生成されます。他のサイトジェネレーターにあるような基本的な機能は一通り揃っており十分実用に耐えると思います。
ページネーションを標準で備えているのが個人的にとても感動しました。

触ってみて良かった点

まずシンプルなのですんなり理解が行えた点がとても良い点です、ドキュメントをそこまで見ずともコードを見ていてconfigファイル以外については大体何となく理解できます。
そして何よりも良かった部分がページネーションが標準で用意されている点です、ページネーションって個人的にライブラリを使うか実装するかで毎回悩む部分なので標準で用意されているのはとても嬉しいですね。

悪かった点は軽く触った分についてはそこまで感じませんでした、Sass, Stylus, Lessなどもサポートされているので特に問題は感じませんでしたね。
ただ、強いてあげるならCSS in JSを利用したい場合については今回試さなかったため問題がある可能性もあるかもしれません。

最後に

Astroは標準で欲しい機能が概ね用意されており触ってみて実際に使ってみたいなと思いました。フロントエンド界隈は現在もさまざまなフレームワークやサイトジェネレーターが開発されています、今後も便利なサイトジェネレーターがどんどん開発されていくと思うので新しいものが出てきたら試して使えるものはどんどん取り入れていきたいですね！