Astroのアイランド機能を使ってSvelteを組み合わせた開発をつかってみました。使ってみた感想といくつか戸惑った箇所があったのでまとめてみました。
@astrojs/svelte
Astro+Svelteを使った理由
今回、AstroでSvelteを使った理由ですが、どちらもほどんど使ったことがなかったので同時に学べて学習効率がよさそうだと思い採用しました。
使ってみた感想
まず、AstroとSvelteの公式サイトにあるチュートリアルやドキュメントは非常に丁寧でわかりやすかったです。作成中に戸惑った箇所もありましたが、公式サイトのドキュメントを見ることで大体解決できました。
少しハマったポイントは下記になります。
ページファイル
pageコンポーネント（ページファイル）を.svelteにすると404になってしまいました。pageコンポーネント（ページファイル）にできるのは、.astroや.mdなどのようです。
また、Svelteコンポーネント内からAstroコンポーネントを使用することもできません。このような点に注意する必要がありました。
// 読み込めない
<script>
import MyAstro from "../components/MyAstro.astro";
</script>
<MyAstro />
clientディレクティブ
AstroのpageコンポーネントからSvelteを読み込む際には、Svelteコンポーネント内でJavaScriptを使用している場合は、client:*のディレクティブを使用する必要があります。
---
import MySvelte from "../components/MySvelte.svelte";
---
<MySvelte client:only="svelte" />
最初は、Svelteコンポーネント内に記述したJavaScriptが全く動かず、エラーも何も出なかったため、原因が全くわからなかったのですが、ハイドレートが必要なコンポーネントにはclientディレクティブの指定が必要であることがわかりました。これも公式サイトにしっかりと書かれていますね。
まとめ
公式ドキュメントをよく読んで、制限事項や問題点を事前に把握することが重要だと改めて痛感しました。
そして、AstroとSvelteを使った開発はとても柔軟で効率的であると感じました。以前は、静的なWebサイトをEJSを使用してヘッダー、フッターなどを分割して作っていましたが、Astroのような静的サイトジェネレーターを使うことで、より効率的に作業を進めることができると思いました。
今回はページ以外のコンポーネントはすべてSvelteで作成したので、最終的にSveltekitでいいのではと思ってきましたが、AstroとSvelteを同時に学ぶという目的は達成することができたのでOKとします！