自分のサイトをAstroで作り直した話

定期的にやるやつ！

背景・モチベーション
- いろいろ使いたい
- それぞれのサイトに適したものを考える
本題：Sveltekit → Astro の置き換え
できた！

背景・モチベーション

（※個人的な話なので興味ない人は飛ばそう）

いろいろ使いたい

個人的な思想として、個人でやっているWebサイトはそれぞれ違う技術を使いたいというモチベーションがあります。

どうしてもお仕事だと長期的な保守のことやチーム開発のことを考えると、あまり尖った道具を採用することはありません。正直、よほど強い理由がない限りは React 系一択になる。

そのため、個人でやってるプロダクトでは、あまりお仕事で使ってないやつを試してみたい！というモチベーションがあり、特定の何かだけを使うのではなく、サイトごとに全部違うものを使ってみたいと思っています。

あと、僕個人のマインドとしてはテンプレート系が好きだったりはします。テンプレートが好きというかHTMLとCSSが好き。

そのため、現在も僕が保守している3つのサイトは以下のような技術構成になっていました。

鳥小屋ポータRu
- 僕の個人サークルのWebサイト
- Sveltekit
鳥小屋プラグイン置き場
- RPGツクール用のプラグインの公開サイト
- Astro.js
プレポタ
- ブラウザゲームの遊べるサイト
- Sveltekit

……あれ、Sveltekit が2つになっちゃってるじゃん！！！１１１　←モチベーション

それぞれのサイトに適したものを考える

以前の記事にもちらっと書いていましたが、『3. プレポタ』のサイトを作る際、最初は HonoX を使おうと考えていました。が、サイトの性質上、SinglePageApplicationのページであったほうが都合が良いという理由があり、おそらくプレポタの要件にあっているのは Sveltekit だろうと考え Sveltekit を採用しています。

『1. 鳥小屋ポータRu』のサイトは動的な要素はそんなに多くないため、正直 Sveltekit はオーバースペックです。別に Sveltekit である必要はない気がします。

そこで、それぞれのサイトに求められる要件をまとめ、採用技術の整理をすることを考えました。

鳥小屋ポータRu（個人サークルのページ）
- ＝作ったゲームたちの公式サイトの集合体
- 各ゲームごとにページのデザインは違う場合がある
  - ゲームの雰囲気にあわせてページの構成が変わったりする
  - 画像が多いのでちゃんと最適化とか必要
- → 画像最適化などの公式サポートがある Astro がよさそう
鳥小屋プラグイン置き場（RPGツクールのプラグイン公開サイト）
- すべてのページがデザイン固定
- コンテンツはすべて Markdown で書いている
- ページ数も少なめ。画像とかも少ない。
- → ぶっちゃけなんでも良さそう！
プレポタ（ブラウザゲームのサイト）
- ログイン・ゲームのスコアランキングなどの動的要素があり、ステート管理やJavaScriptの処理が多い
  - SinglePageApplication 的な要求が多い
- → 引き続き Sveltekit を使うのが良さそう！

というわけで、『1. 鳥小屋ポータRu』については Sveltekit ではなく Astro に置き換えることにしました。Astro は既に『2. 鳥小屋プラグイン置き場』で使ってしまっていますが、こちらのサイトは別に Astro である必要もそこまでないので、別の機会に何か面白そうなものに置き換えることにします。

本題：Sveltekit → Astro の置き換え

置き換え、といいつつ、Astro の中ではコンポーネントとして Svelte を利用することができます。そのため、元のサイトで使用していた一部のコンポーネントは概ねそのまま持っていくことができました。

……が、Astro の特徴の1つとして Astroアイランドがあります。

Astro は基本的には静的サイトとしてビルドすると、ページ内から JavaScript が消え去ります。JavaScript で動く動的な要素を利用したい場合は、その部分だけをアイランドとして作成する必要があります。

特に問題ないでしょ～と思ったのですが、実際に移植している中で以下のような問題がありました。

.astro のコンポーネント以外から .astro のコンポーネントは呼べない

それはそう。

例えば、 Svelte のコンポーネントの中で以下のようなことはできません。

<script>
import MyAstroComponent from './MyAstroComponent.astro'; // ←だめ
</script>

<MyAstroComponent  />

例えば、サイトのロゴとかアイコンのような 共通部品を .astro のコンポーネントで作っていると、 Svelte などの他のフレームワークの中からは参照できなくなってしまいます。

これを避けるためには『基本的に全部 Svelte など他のフレームワークを使う』または『呼び出し元から slot / children として渡す』必要があります。

---
// 呼び出し元で、Astro のコンポーネントを import し、 slot / children で渡す
import MySvelteComponent from './MySvelteComponent.svelte';
import MyAstroComponent from './MyAstroComponent .astro';
---

<MySvelteComponent>
  <MyAstroComponent />
</MySvelteComponent>

何もかも Svelte で実装するのもどうなんだ？という点と、 astro:assets の提供する画像最適化を行う <Image> コンポーネントを使いたかったので、僕は呼び出し元から渡す方法で実装を行いました。

が、一部で次の問題にぶち当たります。

Astroアイランドを使うと `<astro-island>` という要素が生成される

例えば以下のような Astro ファイルを作成します。

---
import MySvelteComponent from './MySvelteComponent.svelte';
---

<div class="hoge">
  <p>こんにちは</p>
  <MySvelteComponent  />
</div>

するとレンダリング後のHTMLは以下のようになります。

<div class="hoge">
  <p>こんにちは</p>
  <astro-island uid="xxxx" ....>
    <!-- ここに MySvelteComponent  の中身 -->
  </astro-island>
</div>

<astro-island> という要素が作成され、その中にコンポーネントは描画されます。ハイドレーションするための情報がここに渡されているためです。

が、これによってHTMLの構造が変わることが非常に困った。

具体的に何に困ったのかというと『カルーセル』です。

ゲームの紹介ページなので、スクリーンショットを載せるようにカルーセルを多用していました。カルーセルの中には当然画像が入るため、画像については astro:assets の <Image> コンポーネントを使いたく、先ほどの呼び出し元から .astro のコンポーネントを渡したくなります。

// イメージ
<CarouselComponent>
  <div class="item"><Image src={image01} /></div>
  <div class="item"><Image src={image02} /></div>
  <div class="item"><Image src={image03} /></div>
</CarouselComponent>