めちゃくちゃマイナーな趣味の情報集約の場としてwikiを作りたくなり、パッケージ利用よりはエンジニアらしく自作したいなー、との動機から、AstroとmicroCMSで簡単なwikiページを開発しました。
最低限の機能は1日かからず完了、デザインや追加機能、開発環境のグレードアップ、CI/CDの整備等をじっくりことこと、との感じで割とのんびり作成。ポストでは表現出来ずですが、GitHub ActionsやLinter、Prettierの設定も済。コンテンツを作る前に開発が楽しくなってしまったパターンでした。
技術的なポイントはAstroの公式ドキュメントが相当丁寧で、microCMSも技術ブログに様々な実装例を豊富に掲載してくれているので、ここではコード等無しに開発体験の感想をばばーっと書き留めます。
Astro
良かった点
公式ドキュメントが丁寧
結構丁寧にドキュメントとして仕様が落ちている
日本語訳されているパートも多く、ハードルは低いかも
integrations（プラグイン）が豊富
外部のライブラリやプラットフォーム対応をサポートしてくれるプラグイン機構がなかなか強力
`npx astro add XXX` な具合で簡単に組み込める。他フレームワークの場合は結構あちこちに設定アップデートをかける必要性が出るので、かなりストレスフリー
今回は利用しなかったけれども、アイランドアーキをサポートする上で、プラグインが強いとマイグレーション先としても有力になってくるのでは
ライフサイクル理解が簡単
SSG無いしSSRを軸に置いているので、DOM生成前に走らせたいのはこれ、と割と明確に理解が出来る。戸惑いのポイントは少ない気がする
その意味ではVueも `script setup` があるか、、
高速
Viteベースな上、ゼロJSの思想なため、ページ自体が軽量
SSG無いしSSRなので、サーバー側にはJavaScriptは渡るものの、フロントエンド側には一切無し
明示的にフロントエンドに組み込みたいJavaScriptももちろん書ける
Lighthouse計測もめちゃくちゃ良かった
もうちょっとな点
Linter、Prettier周りはちょっと面倒だった
VSCode上にAstroの拡張機能はあるものの、プロジェクト単位で設定するESLintやPrettierの適用はちょっと面倒だった
VSCode補完もちょっと弱いイメージ
これはVueやReact等の強い勢力のサポートに慣れ過ぎてしまったゆえかもしれない
リアクティブイベントの定義がレガシー
ボタン押下でリクエストを飛ばす等の実装を書く場合、フロントマターで無く `script` タグの中に書きますが、かなり久しぶりに `addEventListner` を書いた気がする
microCMS
良かった点
技術ブログに実装例が豊富
AstroとmicroCMSの例もばっちりあったので参考にした
APIが返すコンテンツがまっさらなHTML
下手なクラス等が全く入っていないので、アプリケーション側で自由自在にカスタマイズが出来る
おかげで今回はTypographyに食べさせたら一瞬でデザインが終わった
もうちょっとな点
js-sdkのドキュメントはもうちょっと欲しいかも
各メソッドが何を返すのかな、を一瞬迷ったりもしたので、I/O明文化した物があれば、と思った
コンテンツを書く際にテンプレート的な物が作れると良かった
Redmineのチケットテンプレート的な雰囲気で、microCMSの新規コンテンツも作れると良いなー、と思った
ここは現在進行形で未解決
結論
めちゃくちゃ良かった
開発体験もアプリケーションの速度も良し
機能的にもSSG/SSRに絞った内容になっているので、あんまり戸惑うポイントが無い
SSGなサイトを作るなら、AstroとmicroCMSの取り合わせは個人的にスタンダードにしようと結論
今後の機能拡張の中では、高度なリアクティブコンポーネントを作る様な場面があれば、アイランドアーキを試してみたい