どうも、しろっぴです。この記事がしろっぴぶろぐの初投稿になると思います。 さてはて、初めてブログを書くのでどう書けば良いのかさっぱりですが、手始めにこのブログの技術スタックについてお話しましょう。
構成
Frontend
├── Astro
├── MDX
├── React (@astrojs/react)
├── shadcn/ui (Base UI)
└── Tailwind CSS
Tooling
├── TypeScript
├── Bun
├── Biome
├── Zod
└── Vitest
Hosting
└── Cloudflare Pagesこのブログは図（コードブロック？）の通りに構成されています。おそらくWappalyzerなどで確認しても同等の情報が得られると思います。さて、それぞれの技術スタックの紹介と採用理由について話していきましょう。全部紹介すると長くなるので、主要なものだけ紹介します。
Astro
読者の方もよくご存知だと思います。Astroです。数年前は個人ブログにNext.jsを使うかVueを使うかといった論争があったりなかったりしましたが、今(2026年)はお手軽にブログを作るならAstro一強だと思います。Astroの魅力は語りきれないほどあるので、今回はAstroを取り巻くエコシステムについて話します。 Astroは本体だけでも十分強力ですが、個人ブログを作るうえで嬉しいのは、公式インテグレーションやライブラリがとても充実していることです。MarkdownやMDXを使ったコンテンツ管理はもちろん、Tailwind CSSや各種UIライブラリ、CMS、検索、画像最適化など、必要になったものを後から組み合わせていくことができます。ブログに不可欠なものを、自分でコードをそれほど書かずに手に入れられるのがAstroを使う大きな利点です。
shadcn/ui
最近（割と昔から？）流行っているUIコンポーネント集です。実はこのブログはAIエージェントに作らせたのですが、一貫したデザインになっていると思います。AIにフロントエンドを任せると、デザインの一貫性が崩れがちです。Agent Skillsを使えばいくぶんマシにはなりますが、それでも崩れることはあります。そんなときに手を差し伸べてくれるのがUIコンポーネント集です。特にshadcn/uiは、パッケージとして読み込むのではなく、コンポーネントのコードをプロジェクトにコピーして自分のコードとして持つ仕組みなので、AIも中身を直接読めて理解しやすいようです。便利ですね。長い物には巻かれたい主義です。shadcn/uiは長いものではありませんが、きっとこれから長いものになるでしょう。
Biome
2年前くらいに人気になりはじめたBiomeです。本当はoxfmtとoxlintを使いたかったのですが、どうやらAstroには対応していないようで、泣く泣くBiomeを選びました。実験的機能としてですが、v2.4.0からBiomeはAstroファイルのHTML・CSS・JS(TS)部分をまとめてlintとフォーマットが出来るようになったらしいです（Biome v2.4のリリースノート）。
Bun
おなじみBunです。実は自分はBunのアイコンを小籠包だと思っていましたが、実際はどうやら肉まんのようですね。きっと同じ勘違いをしている読者の方もいらっしゃると思います。Bunを採用した理由はビルドとパッケージマネージャーが速いからです。
┌───────────────┬────────┬────────┬────────┬──────────┐
│ │ 平均 │ 最小 │ 最大 │ 標準偏差 │
├───────────────┼────────┼────────┼────────┼──────────┤
│ Node v26.10.0 │ 3.13秒 │ 2.98秒 │ 3.36秒 │ 0.12秒 │
├───────────────┼────────┼────────┼────────┼──────────┤
│ Bun 1.4.2 │ 2.44秒 │ 2.30秒 │ 2.56秒 │ 0.09秒 │
└───────────────┴────────┴────────┴────────┴──────────┘ビルド時間を実測してみたのですが、確かにBunのほうが速いです。ただ、まだ記事が一本しかないブログなのであまり差がないですね。ブログが大きくなったときに絶大な効果を発揮してくれると思います。乞うご期待。 ちなみに、ブログをBun APIを使った実装にしたらビルドがもっと速くなるかもしれません（ビルド時間の大半はVite側の処理なので、大差はないかもしれませんが）。ただ、いつでもNode.jsに切り替えても問題ない後方互換性を維持するためにNode.jsの書き方でブログを作っています。
Cloudflare Pages
静的ホスティングをするならお馴染みのCloudflare Pagesです。特に言う事はありませんが、強いていうなら、VercelやNetlifyといった他のホスティングサービスと比べて、帯域が無制限なことです。帯域料金を気にしなくていいのが素晴らしいです。DNS使えば無料でプロキシ使えるし、ドメインも安いし、本当にありがとう。
作ってみて
ここまで色々と技術について書いてきましたが、次に書きたいのはClaude Codeについての感想です。自分でしっかりデザインも設計もしましたが、実装したのは全部Claude Codeです。以前なら、実装そのものに1週間ほどかけてこのブログを作っていたと思います。しかし今では、ほぼ仕様設計書丸投げしただけで、実装に一日もかかることなく、自分の希望通りのブログを作ってくれました。
もちろん低レイヤだったり、安全が関わるものに関しては人間が手でコードを書く必要があると思います。ただ個人的には、ソフトウェアやウェブの分野では、人間がコードを書く機会はほとんどなくなりそうだと感じました。（趣味でZigを手書きしたいと思っていますが。）そう考えると、これから重要になるのはコードを書く能力というよりも、自分が何を作りたいのかを明確にする能力だと思います。これから勉強するのは、プログラミングではなく国語かもしれません。国語から逃げている理系なのでヒエヒエ怯えてます。
とはいえ、これはプログラミングを勉強する意味がなくなったという話ではないと思います。むしろ逆で、AIにコードを書いてもらうからこそ、そのコードが何をしているのか、コードベースの構造、アーキテクチャ自体の理解をすることは重要かなってふんわり思っています。結局のところ、AIが実装を肩代わりしてくれるといえど、実際に自分で設計して、コードを書いて、リリースするという経験は活きてきますし、不可欠だと思います。AIエージェントが主流になってから数年経ちましたが、未だにどこまで人間が対応するか、どこまでAIに任せるかはわかりません。機会があったらそういう本を読んで勉強したいです。
これから
まだ初投稿なので、このブログ自体もかなり小さいです。今後はプログラミングについての記事を書いたり、作ったものを紹介したり、たまには技術に関係ないことを書けたらなと思います。きっと自分が書くブログは誰かを対象にしたものではなく、実用性に欠けていて自己満足なものを書くと思いますが、読者の方にわずかばかりの楽しさを提供できたらなと思います。ブログというものをきちんと続けられるかはわかりませんが、とりあえず気が向いたときに書いていきます。
それでは、今回はこの辺で。 しろっぴぶろぐをよろしくお願いします。