Astro と Panda CSS が良さそうという話

この記事はデジクリ Advent Calender 2023 10 日目の記事です。

デジクリは芝浦工業大学の創作サークルです。デジクリについて，詳しくは こちらのサイト をご覧ください。

9 日目の記事は 19th バルブさんの「 自己顕示欲から見る創作 」です。

これまで静的 Web サイトの制作では，Hugo を個人的に好んで使っていました。たった一つの実行ファイル hugo.exe の中に幾多もの強力な機能が搭載されており，なおかつビルドが高速なところが魅力的だからです。実際，このサイトも Hugo で構築しています。

しかし，最近は Hugo ではなく， Astro と Panda CSS のコンビに可能性を感じつつあります。この 2 つの組み合わせに惹かれる理由を書き連ねていきましょう。

Astro とは

Astro は，2022 年 8 月に登場した新しい JavaScript 製フレームワークです。¹単なる静的サイトジェネレーターとして使えるだけでなく，Web アプリケーション，Web API のエンドポイントとしての利用することも可能なようです。

最大の特徴としては，明示的に宣言しない限り，クライアント側で JavaScript を実行しないようにする点が挙げられます。これは Hydration と呼ばれ，不要な JavaScript を排除することでサイトの表示を高速に行える仕組みです。

これに加えて， Astro Islands と呼ばれる仕組みが提供されています。必要に応じて React ， Vue ， Svelte といったフレームワークを併用することができ，部分的に動的なコンテンツを提供するといった柔軟なことが可能です。従来の静的サイトジェネレーターには（恐らく）無かった面白いアイデアでもあります。

なお，各ページの構成には .astro ファイルを用いることになっており，この中に HTML，CSS 及び JavaScript (TypeScript) のコードを書いていきます。React おなじみの JSX とほぼ同じような記述をすることも可能です。

Panda CSS とは

Panda CSS は，2023 年 6 月にリリースされたばかりの新しい Zero-runtime な CSS フレームワークです。² Chakra UI と同じ開発元が制作しています。

登場から日の浅い後発の CSS フレームワークということもあり，既存のライブラリーの良いところを取り入れていたり，最新の CSS 技術（Cascada layers，:is，:where など）を使っていたりする部分が特徴的です。³

いわゆる CSS-in-JS のような書き方でスタイルを記述します。ただし，style 属性に CSS オブジェクトを挿入するのではなく，class 属性（場合によっては className 属性）に対して行います。具体的には次のように書けば良いのです。

<div
  class={css({
    background: "gray",
    padding: "100px",
  })}
>
  <p
    class={css({
      fontSize: "2rem",
      fontWeight: "bold",
      textAlign: "center",
    })}
  >
    Hello, world!
  </p>
</div>

なお，よくあるレイアウトを手軽に設定できるようにした Pattern と呼ばれるものも用意されています。css() の代わりに container()，grid()，flex() を呼び出すことで適用できます。これは Chakra UI とほぼ同じ種類のものが存在するようです。

なぜ Astro と Panda CSS のコンビが良いのか

単に Astro だけを使うのではなく，Panda CSS を併用するのが良さそうと個人的に考えています。基本的な機能は Astro が十分に有しているのですが，スタイリングに関しては Panda CSS を導入すると圧倒的に書くのが楽になるからです。

Astro 単体が持つスタイリングの機能 は本当に最低限のものです。スタイルを適用したいタグに class 名を指定して，<style> 要素の中に CSS（または Sass や Less ）を書き込むという古典的な手法を使うことになります。これはこれで悪くはないのですが，Panda CSS ならば，class 名を考えたり，似たようなレイアウトのコードを多数書いたりする手間を割かずに済み，効率良くスタイリングを行えるのです。

Hugo から Astro へと乗り換えようとしている

ここまで Astro と Panda CSS の秘める可能性を語ってきました。実を言うと，いくつかの理由で自サイトを Hugo からこの 2 つへ移行して再構築している最中にあります。

正直，自サイトの依存関係に npm パッケージがいくつか絡んでいるため，敢えて Hugo で構築する必要性が薄れています。言い換えると，このサイトの場合，一つの実行ファイルさえあれば何でもできる Hugo の良さを最大限発揮できる状態にありません。Hugo 自体は大変良い静的サイトジェネレーターですが，自サイトには合わなくなって来たのです。むしろ，npm からインストールできる静的サイトジェネレーターを利用した方が何かと都合が良いはずです。

さらに，このサイトは自分で作ったオリジナルのデザインであり，Hugo のコミュニティが提供する テーマ を利用していません。込み入ったカスタマイズを全くのゼロで行っており，大量の HTML ファイルと SCSS ファイルを一挙に抱えているため，メンテナンスに手間を要しているのです。Astro と Panda CSS へ移行すれば，.astro ファイルの中に集約することで複雑なファイル構造は解消され，メンテナンスの改善が期待できます。

そのほかにも理由を挙げられますが，長くなっても仕方ないので列挙するだけにしましょう。

• そもそも現行のデザインが今となっては古臭く感じられて気に入らない。
• Markdown のレンダリングをもっと細かくカスタマイズしたい。
• クライアント側で JavaScript を一切使わない Web サイトを Hugo で構築すると手間が掛かる。

終わりに

たぶん，年末から年明け頃にかけて新しいものに刷新されるかもしれません。どんなに遅くとも，来年のアドベントカレンダーの季節までには変わっているはずです。