まずAstroを触ったほうがいい理由
はじめに
結論として、Next.jsやSveltekit、Remixなどの他のフルスタックフレームワークより先にAstroを触るべきです。
ではなぜそうしたほうが良いのかを、私の経験則に基づいて話させていただきます。
Astroの特徴について
特徴や他フレームワークとの違いは沢山ありますが、ここでは抑えていくつかを話していきます。
沢山のフレームワークを利用可能
Next.jsといえばReact、SveltekitといえばSvelte、NuxtといえばVue.jsというように、従来のフルスタックフレームワークはひとつのフレームワークしか対応していないというのがデファクトスタンダードでした。
ただ、Astroはプラグインを導入することで、ReactやVue、SvelteはもちろんTailwindCSSなどの沢山の種類のフレームワークを導入することが出来るんです。
ちなみに公式サイト(https://astro.build)を見ればわかるとおり、他にも色々なフレームワークを利用可能です。
SSG / SSRが可能
AstroといえばSSGという印象がありますが、実はSSRが可能なんです。
SSRが出来ることによって、より動的なアプリケーションも作成可能であるため、Astroをとてもおすすめします。
デプロイもかんたん
先程SSRも可能と言いましたが、SSGなら静的だからデプロイかんたんだけどSSRはデプロイ用のビルド方法がそれぞれに無いとムリじゃないか！と思われるかも知れません。
但し！
AstroはCloudflare Pages、Deno Deploy、Vercel、Netlifyなど様々なプラットフォームにデプロイ可能です。
Node.jsでそのまま動かすことも出来るっぽい？です。
Astroコンポーネントが優秀すぎる
*.astroというコンポーネントが使えるのですが、これがHTMLとJSXやMDX、Svelte(やVue)の記法をとってもいいとこ取りしたものだと思うんです。
使えばわかると思いますが、こんな書き方が出来ます。
---
import Component from '...'
const links = [
'https://github.com/kstdx',
'https://twitter.com/kstdx_dev',
'https://kstdx.com',
]
---
<Component>
{links.map((link) => (
<a href={link}>{link}</a>
))}
</Component>
- MarkdownのFront-matter的な書き方でスクリプトがかける
- SvelteやVueの独自記法ではなくReactみたいなmapが可能！(コレかなり嬉しい)
なぜAstroを先に触ったほうが良いのか
今までの理由を並べたら触るべきとは思ってしまいますが、実は他にも理由があります。
それは圧倒的なかんたんさです。
CLIはもちろん、ディレクトリ構造もめちゃくちゃかんたんで、仕組みも理解してしまえば単純です。(実装が凄いですが)
なので、Hackableなフレームワークとも言うことが出来ますね。
初心者にも上級者にもおすすめのフレームワーク、Astroでした。
Discussion