この記事は あざらしいっぴき Advent Calendar 2023 の8日目の記事です。
私とAstroの付き合いもだいぶ長くなったんじゃないかな？と思って確認したら、ポートフォリオサイトをAstroにしたのは2022/12/30だった。なのでAstro歴1年弱ということになる。そんなAstro歴1年弱による、なぜAstroを使うのか ＆ 使ってみてどうか、という話。
書いてる人
いにしえのHTML手打ち職人、現フロントエンド寄りフルスタックWEBエンジニア。
画面系はVue2, Vue3, React(Pages router, App router), HTML/CSS/JavaScript, jQueryと結構幅広く触った。
どんな感じでAstro使ってるの？
- ポートフォリオサイトが2022/12/30にVue2→astroに載せ替え
- 小説サイトが2023/5/11からastroで新規作成
Astroってどんなん？
Astroについてざっくり説明すると『速いと噂のすごいシンプルなフロントエンドフレームワーク』って感じ。
下記の記事特徴がまとまってて良い。
なんでAstroを使いはじめたの？
ざっくり3点。
- 静的サイト向けの機能に絞られている（必要充分なシンプル）
- CSSの再学習が不要
- Vue/Reactと書き方が近いので、学習コストが低かった
元々だいぶ複雑度の高いサイトだったのだが保守がしんどい状態になっていたので、がっつりシンプルに寄せたかったところにちょうどよかったのがAstroだった。
Astroのいいところ
シンプル
静的サイトのための機能に絞られているのでシンプルで良い。やはりシンプルはベスト。
シンプルだけど画像最適化もできる
元のサイトはwebpへの変換を人間がローカルでやってたんですが、おかげで楽になりました✌
シンプルだけどページ遷移のトランジションも簡単に実装できる
ドキュメントのコード差分が少なすぎてなんか前準備とかあるんかなと思ったら本当に2行いれるだけでページ遷移がふわっとするんだ。ヤバい。
CSSを再学習しなくてよい / CSSの置場に悩まなくてよい
Vue.jsと同じく普通のCSSが書ける＋.astro内にstyleタグを書けばいいだけなので、CSSの再学習が要らないしCSSの置場に悩まなくてよいのがとても良い。
個人的にはHTML/CSS/JavaScriptのファイルが1つになったって感じで、HTML/CSSを手打ちにだいぶ感覚が近い感じがするので、かつて非エンジニアのHTML手打ち個人サイト勢がたくさんいたように、非エンジニアのAstro個人サイト勢が増えたらいいなぁ、と思ったり思ったりする。
Astroの悪いところ
シンプル過ぎる
複雑なことをやろうとすると一気にコードが膨れちゃうになっちゃうことがあります。『Reactなら5行くらいで終わるのになあ』みたいなことが倍以上の行数になったりする。
Astroの中でVue/Reactを呼び出すこともできるので、最後の手段としてはそれを利用してもいいと思います。ただ自分のポートフォリオに関しては『Astro（.astroファイル）で実現できる範囲が保守しやすいライン』としているので、.astroファイルだと実現がめんどいな…と思ったら代替手段を検討、みたいにしてます。
で、Astroって仕事で使えるの？
あんまり推奨できない気がします。特にReact/Vueを使える人は素直にNext/Nuxtを使う方がいいケースが多い気がします。
かなり肯定的に好印象な話ばかりしてきましたが、そもそも『充分にシンプルなサイトを作るということを重視している』ので、そういうケースにおいて、Astroを使うのは、とってもGOOD！って感じです。
仕事で作るようなリッチなサイトは悪いところで語った『Reactなら5行くらい終わるのになあ』がかなり大きなデメリットになってくると思います。Astro内でReactを呼ぶこともできますが、それなら最初からNext.jsで作った方がシンプルになると思います。
仕様書の段階ではシンプルなサイトだったとしても、シンプルを重視しているケースでない限りは、Next.jsかNuxt.jsにしておいた方が安全牌だと思います。Next.js/Nuxt.jsでシンプルなサイトを作っても問題はないですが、Astroで複雑なサイトを作るのは面倒なので。
まとめ
Astroはシンプルなサイト作るケースにはすごくいい！！けど、複雑なサイト（jsを多用するようなもの）を作ろうとしたときに面倒なので、仕事ではNext.jsやNuxt.jsの方が良いケースの方が多そう。
