【最高の開発体験】Astro + shadcn/ui

Web開発、特にフロントエンドよりの開発をされている皆さんの開発環境は何を利用してますか？

今回は、ぎょうざの中で固まりつつあるWebアプリ開発環境についてのお話です。

ちなみに、ぎょうざはジャンル問わず「規模が小さく新しいもの」が好きです。バンドであればインディーズ派です。

また、自分が使うものは自分で作りたい人です。

ぎょうざはWebアプリをつくるとき、開発要素を次の3つで捉えています。

（Webアプリ）＝（動かす）＋（見せる）＋（届ける）

（動かす）：Webアプリを論理的にどのように動かすか、このリンクを押したらどこへ飛ぶか

（見せる）：WebアプリをUIを使ってどのように見せるか、ボタンの形、色、大きさ

（届ける）：Webアプリをどうデプロイするか、ホスティング先

上の式で言うところの（動かす）＋（見せる）を、Astro（動かす）＋shadcn/ui（見せる）

で手軽に作り込めるようになったのがめちゃくちゃ良かったです。

デプロイ先については、各自のお財布事情が絡んでくると思ったので、本記事ではおまけとして触れています。

Astro（動かす）＋shadcn/ui（見せる）＋ Cloudflare Pages（届ける）

によって、Webアプリがより簡単に、より楽しく作れるようになったので、それぞれご紹介していきます。

Astro（動かす：フロントエンド開発フレームワーク）

結論として、なんでもっと早く使い始めなかったのかと後悔してます。

Next.jsにどっぷり浸かっていたため、名前は知ってはいたのですが

最近までお恥ずかしながら食わず嫌いしてしまっていました。

とにかく高速
機能がコンパクト
Webアプリ開発に適したコンポーネント群が豊富

本サイト（ほぼSSG）のような静的コンテンツが多いWebアプリを作るレベルでしたら

Astroを利用するほうが良いと思いました。理由を、Next.jsと比較して下記にまとめてみました。

※本サイトの開発ケースおよびめちゃくちゃ独断です。規模の大きいWebアプリ開発の場合は、この限りではありません。

（比較項目）	Astro	Next.js
開発フレームワーク	フロントエンド	フロントエンド
レンダリング	SSG、SSR（組み合わせ可）	SSG、SSR、ISR、CSR（組み合わせ可）
対応ホスティングサービス数（静的、SSR）	○	○（※Vercelが最適）
採用ケース	静的なコンテンツが多く、かつ部分的に動的なコンテンツを組み込みたい（本サイトのようなブログなど)	情報のリアルタイム性が求められ動的コンテンツが多い（X：旧Twitterなど）
node_module容量	約400MB	約900MB
ページパフォーマンス	○	△
学習コスト	○	△

- Next.jsはできることが多い分、実装方法を調べる時間も多かったです。今回の場合は過剰スペックでした。
- ユーザー認証など、複雑な機能を作り込みたい事情がある場合は、Next.jsの検討もありです。
- 公式ドキュメントで他のフレームワークからの移行もサポートされています。もちろんNext.jsからの移行も可能です。

既存プロジェクトのAstroへの移行

サイトをAstroに変換するためのヒントとコツ。