概要

本ページでは、WebサイトのフレームワークをSvelteからAstroに移行した理由と、その移行によって得られたメリットについて書きます。Astroへの移行により、コンテンツ管理の効率化や多言語対応、さらに生成AIとの親和性が向上し、サイト運営がより柔軟かつ効果的になりました。これにより、サイト構造の簡素化とコスト削減を実現しました。

移行の理由

移行の理由はいくつかあるのですがSvelteに問題があったわけではありません。SvelteやSvelteKitはAstroに移行したあとも好きなWebフレームワークでありつづけますが以下の複合的な要因によりAstroに移行しました。

• Astroを使ったサイト作りに以前から興味があった
• 記事のコンテンツの管理が楽になるから
• 生成AIの台頭にあわせて親和性の高いコンテンツの扱い方をしたかったから

それぞれ簡単に触れていきます。

Astroを使ったサイト作りに以前から興味があった

これについては2023年にSvelteKitで前身のサイトを作った時点で興味がありました。当時もAstroは一部の界隈で人気がありましたが、Svelteほどには育ってはいない状態で現在2025年と異なりドキュメントの日本語かも進んでいませんでした。Svelteもシンプルで非常に高速と言われていますが、そのSvelteですら凌駕してしまうほどにAstroのSSGによるコンテンツ生成が軽量でSvelteに負けずシンプルでわかりやすいコードやコンポーネントを作れます。その上で、Astro以外にもReactやVue,Svelte,Solid.jsなど他のWebフレームワークのコンポーネントをAstroに読み込ませてWebページを作れる柔軟さも魅力に感じました。

さらに、リポジトリ内にsrc/contentにフォルダーを作り、作ったフォルダー内にマークダウンファイルを格納することで簡単にブログを作れる機能もあります。マークダウンで手軽に書いたコンテンツをブログのように整形して表示し、目次やシンタックスハイライト（コードブロック）の表示までライブラリをインストールして設定ファイルを少し書き込むだけで簡単にページが作れてしまいます。

このようにコンポーネントの柔軟性やMarkdown(.md, .mdx)を直接読み込みWebページのコンテンツを簡単に作れる機能、そしてSvelteすら凌ぐ高速なサイトを簡単に作れる点で非常に魅力がありましたが、当時は将来Astroがどのようになるかわかなかったため近頃AIの機能に全力投球する「Clineに賭ける！」のようなことをAstroに対して行うことができませんでした。しかし、2年間Astroのコミュニティをみたり、Amazonの電子書籍を通じてデモサイトを作ってAstroの扱いを学んだりしたことからこの懸念はもうないだろうと判断できました。

記事のコンテンツの管理が楽になるから

今回の移行の一番の理由はコンテンツの管理が楽になるからです。今まではHeadlessCMSを使ってコンテンツを管理していました。HeadlessCMS側のAPIにデータのフィルターの機能がついていたり、Web側でエディターがついていたりなどはするのですが、値上げが続いていたりその割にWordPressのようにエディターがリッチでなく、データ通信の制約があったりなど細部をみるとライターもしくは開発者としてのUXがあまり優れていなかったと考えています。ブログはMicroCMS、ダイアリーはNewtで管理し、MicroCMSはWebエディターを使わずにVisual Studio Codeでマークダウンテキストを書いてMicroCMS側にコピーアンドペーストして、WebのサーバーサイドでHTMLに直す処理をしていました。それをわざわざするぐらいにはMicroCMSのエディターには不満を感じていました。またHeadlessCMSでコンテンツを更新したあと毎回VercelでRedeployする手順も生じていてそれも面倒でした。Webhookを使うことでその手順の自動化はできますが、頻繁な更新でデータの通信量を増やしたくない気持ちも湧いてきてしまうのでRedeployは手動で行なっていました。

今回の移行でAstroで構築されたサイトとなりましたが、Astroであれば前で書いた通りにmarkdownをローカルで管理できVisual Studio Codeで直接コンテンツを書き更新できます。さらにVisual Studio Codeの拡張にはFront Matter CMSという拡張があり、ローカルでのMarkdown記事の管理の効率化やタグやカテゴリの管理などローカルでCMSの管理画面のような機能を提供してくれます。今まで行っていた作業がVisual Studio Codeだけですべて完結してしまいRedeployの必要もなくなり、しかも料金はタダです！記事の量が1万、10万と増えたらそれはそれで問題が起こるかもしれませんがそうなったらその時に考えれば良いと思います。Markdownであれば今回の移行のように手軽にデータを扱えますので。少なくとも小規模での個人サイトの作成には非常に強力なツールであると言えます。

生成AIの台頭にあわせて親和性の高いコンテンツの扱い方をしたかったから

Visual Studio Codeだけですべて完結する便益に加えて、ClineやFront Matter CMSのAIチャットやAIエージェントを扱うことができます。これにより記事の作成をサポートしてもらったり、翻訳のサポートを受けたりができます。多言語対応が今までであれば非常に手間でしたが、生成AI関連の拡張も増えて多言語展開のハードルも下がったと思います。韓国語の話者は0.5億人、英語の話者が15億人、日本語の話者が1億人と仮定すると単純にパイが16.5倍増になり、運がよければSNSでの海外の方々との交流の機会も生まれるのではないかと思っています。

今回の改修での変更点

サイト自体は大きく変更していませんが以下が主要な変更となります。

• ブログのコンテンツを日英韓に対応
• プロセカ関連のコンテンツをアクセス数および外部リンクがあるものに絞り込み
• 開発者・ライターの体験が向上（内部）

三ヶ国語対応は前に述べた通りです。生成AIやAstro、Front Matter CMSの機能で簡単にコンテンツの管理や翻訳ができるようになりました。プログラミングの話題は世界共通で需要がありますし、日本独自の情報も日本が好きな方であれば興味のある内容になるかと思います。原文は日本語で日本向けのコンテンツにはなりますが、世界共通の話題と日本のローカルな話題を気軽に発信できるのはありがたい変化だと思います。

プロセカ関連のコンテンツについてはEvent Point Calculatorと楽曲効率表のみに絞り込みました。Event Point Calculator EXは楽曲の基礎点の算出とサイトへの反映に手間がかかる割に、一定数あるとはいえEvent Point Calculatorほどは使われていないので削除しました。楽曲効率表は一部の方々に使われていたり外部リンクがあるのでこちらは残しております。他はすべて削除しております。たとえば、アクティブユーザー数の推移はランキングの最下位が圏外になり更新できない、圏外への変更から運営もあまり出したがっていない、ユーザーも情報が古くて興味がないなどの理由で削除しています。ツールは2つに集約はしましたので今後は集約したツールに集中して更新をします。

開発者・ライターの体験が向上は前にも述べた通りですがAstroの機能を使うことによりサイトがたった1つのツールで手軽に更新できるようになりました。完全無料です。ブログだと多少は有用な情報を書きたいところですが、こちらのダイアリーであれば好き勝手に更新しやすくなったと思いますし、構造の変更により自動化や金銭の支払いの必要性すら無くなったことはとても良い変化だと思います。

まとめ

SvelteからAstroでWebサイトを組み直して、サイト内の整理整頓や追加機能の実装をしました。まだ完成ではないですが、必要以上に複雑な構造が除去された上で費用の心配もいらなくなったので多少の手間はかかりましたけれども良い変更だったと思います。近頃は生成AIの発達に伴いAIエージェントの市場もできていているのでその辺りを学習しBlogで更新しつつ、自由にDiaryをかけると良いと思います。