SAKUSPACEを支える技術
▼ 目次
こんにちは、Saku です！ すでに2026年ですが、この記事は、フロントパッケージリーディング Advent Calendar 2025 の 9 日目の記事です。
本ブログサイトを（約1年前に）開設しましたので、かなり今更ですが技術スタック周りについて紹介できればと思います。
本サイトの開設背景などは詳しい説明はこちらにあるので、ぜひご覧ください。また、同記事では使用技術の簡単な紹介も行っていますが一部現状と異なったりする部分があるので、改めて本記事で技術スタック全体の紹介と各技術の選定理由などを説明していきます。
技術スタックの全体図と概要
言語フレームワーク
- JavaScript/TypeScript
- Astro
- React
使用技術について、メイン言語〜エディタにかけて要点だけご紹介します。 先に述べた通り、このサイトは個人的な技術の実験場の側面を持ちます。 その上で今回はAstroを主軸として技術選定を行いました。 Astroを選定した理由ですが、単純にAstroを使いたかったのがあります。まぁ業務じゃないので少々私情が入るのはお許しを。その上で、HTMLに長く触れている自分にとって.astroといういわゆるHTMLのスーパーセットの仕組みを持つAstroは非常に書きやすかったこと・静的サイト中心の構成で相互インタラクションが少ない（ほぼない）ブログサイトの要件にマッチしていたことが挙げられます。
コンテンツ更新の中で、いわゆるCMS的な機能が欲しくなるかなとも思い、CMS有するプロジェクトでよく使用されるNext.jsとどちらを選定するかも迷いましたが、更新するのは主に自分でありわざわざCMSを入れずとも問題ないかなと思ったのでAstroを選びました。Astroだとコンテンツコレクションという機能があり、型安全で簡単に.mdや.mdxファイルを管理できるので選びました。
CMSと繋ぐのであればDraft ModeやISR、SEO周りなどのAPI・機能が充実している点でNext.jsの方が標準機能の充実を感じるところもあります。Next.jsの方が、GitHubを漁っていてもGitHub Starを多く獲得しているインテグレーションパッケージが多い肌感もあります。
ただ、裏を返せばAstroの方がシンプルな機能で使いこなしやすいというのはありますし、必要になったらインテグレーションを探したり、スクラッチで実装したりといったいわゆるオプション的な考え方は個人的に好んでいます。あとは、最低限の機能やエコシステムは担保されている印象はありますし、ましてや個人ブログであれば十分すぎると感じています。例えば、AstroはSSGをデフォルトとしており、静的サイト特化のイメージがありますが、SSRの対応やReactなど他のUIフレームワークとのインテグレーションも可能で、徐々に動的組み込みにも対応してきている印象です。
スタイリング
- UnoCSS
確か本ブログサイトを開設当初はTailwind CSSを選択しましたが、2ヶ月ほど運用した頃にUnoCSSに乗り換えました。理由としては、Tailwind CSSはユーティリティクラスが膨大であり、そこまで使用しないかなと感じたこと。またUnoCSSのこれまたオプション的な設計哲学と使い勝手の良さ、CSS生成の仕組みの納得感に惹かれたことが挙げられます。
また、Astro自体Viteベースであるので、作者が同じUnoCSSとも相性はいい方なのでは？と思います。
1年経った今でも特に不満なく使用できていますし、Tailwind CSSと比較しても特に大きな差は感じていません。UnoCSSにはユーティリティクラスを見やすく記述するプリセットやショートカット機能などもあるので、より良い形にカスタマイズしていければと思います。
ブログ記事管理
- astrojs/mdx
- rehype/remark
ブログ記事は主にMarkdownで書いていますが、一部Reactコンポーネントを埋め込みたい部分があったため、MDXを選択しました。Astro自体MDXのサポートも充実しているので、特に問題なく使用できています。
また、LinkCardの生成など記事コンテンツのUIに必要な部分で一部remark/rehypeプラグインを使用しています。
OG画像生成
- Satori
- budoux
OG画像生成はここら辺のパッケージを使用しています。ただもうちょい簡単にわかりやすくやりたくもあるので、他いい方法見つければ乗り換えたいなと思っています。astroのインテグレーションにogとかもあるので覗いてます。
リンター/フォーマッター
- ESLint
- Prettier
一年前は他に良さそうなのを知らなかった…のでESLintとPrettierを選択しましたが、最近はより高度な静的解析ツールも出てきているので、今後乗り換えも検討したいと思います。
考えてるのはBiomeやOx系などです。Biomeくん.astroファイルのサポートを正式にしてくれないかな〜…
フォーム
- React Hook Form
- Zod
- SSGForm
一部Reactを組み込んでいますが、これはフォーム当初はまわりなどにReact対応のライブラリなどを使用した方が作りやすさを感じていた名残です。Astro単体で作っても良かったのですが、バリデーションなど個人的に抜け漏れる部分を考慮し、ライブラリ >> Reactインテグレーションを選択しました。 ただし、個人的にReactを入れるとAstroのゼロJS等軽量差が薄まる印象です。なぜならば、Reactを入れるとどうしてもクライアントサイドでJSが動作するため、このJSの分だけ.jsファイルとなり生成されてしまいます。
そのため、徐々に.astro化 or Preact or Svelte or Alpine.js等のより軽量なフレームワークへの置き換えも検討しています。良さそうなのを見つけたら随時置き換えていく予定です。置き換えの際にどれくらいJSが軽減できたか・パフォーマンスが向上したか等も記事にできればと思います。
バージョン管理
- GitHub
ホスティング
- Cloudflare Pages
当初はホスティング先を Vercel や Netlify、Amplify 等で迷いましたが、できる限り低コストで運用出来ればという部分を考え Cloudflare Pagesを選択しました。一年経った今でも問題なく運用できています。まぁそもそも個人ブログレベルであればどのホスティングでも大抵ローコストで運用できるとは思いますが。。
また、同じCloudflareでもWorkersもあって、移行せずとも運用できていますが、将来的に移行した方が良さそうと感じたら検討したいと思ってます。
※VercelのhobbyプランやAmplifyの無料枠内（利用開始から確か12ヶ月間）であれば無料で運用はできると思います。
CI/CD
- GitHub Actions
相変わらず良き。
エディタ
- Windsurf（当初）
- Visual Studio Code（現在）
当初はWindsurfとCursorの2大AI IDE時代だったため、日本で流行っていたCursorとは天邪鬼を発動しWindsurfを愛用していました。とても使いやすかったのを覚えています。
ただ自社で導入しやすかったのがVSCode（GitHub Copilot）だったということもあり、知見を貯めるため使い続けたところプライベートでもそちらを使うようになってしまいました。
また、Claude CodeやCodexなどCLI系LLMの時代にもなったことがWindsurfの使用頻度が下がった原因だなと思います。一年で変わりすぎやろ…
おまけ：使用生成AIツール
- Claude Code on the web
- Codex via ChatGPT
ブログ記事の更新にあたり、最近は上記2つをスマホから使用しています。 もちろんエディタで使うこともありますが、ちょっとした手直しをしたい時・アイデアを口頭で伝えて形にしたいときなどはスマホから使用しています。Astroのコンテンツコレクションはすごく便利で、最低限の管理は可能なのですが、いかんせんスマホからの更新がしづらい気がします。Obsidianとかをかませば幾分かマシなので、ObsidianをCMSとして運用しようかとも思いましたが、上記2つの生成AIツールを使うことで、スマホからの作業効率が大幅に向上しました。
まとめ
今回は、本ブログサイトの使用技術について簡単にご紹介しました。 投稿したい記事のネタは色々あるので、無理のない範囲で執筆していこうと思います！！
本記事を読んで頂きありがとうございました！