Astroは高速に動作するだけでなく、alpine.js等のVanilla Javascriptもそのまま動くので、Reactのコンポーネントを使用するよりも軽いUIコンポーネントの使用も可能です。今回はそのAstroがウェブデザインの世界と親和性が高い理由について分析します。

Barba.jsの存在

Barba.jsはVanilla JavaScriptで書かれたライブラリで、Ajaxでページの一部のみを他のHTMLで書き換える等の用途で使用することが出来て、ReactのようなSPAをHTMLとの組み合わせで実現します。なぜこのライブラリが優れているかというと、ページ遷移処理時にいくつものカスタムフックがあり、GSAPのようなダイナミックなアニメーションを実現するライブラリと組み合わせることで、デザイナー目線から見ると面白い、新鮮なページ遷移アニメーションが作れるからです。

実際にbarba.jsとGSAPを組み合わせてるサイトの実例です
https://theshift.tokyo/en/

ウェブデザイナーの憧れ、AWWWARDSで何度も受賞歴があるデザイン会社が製作しています。他のサイトも面白いアニメーションが見られるので是非ご覧下さい。
https://www.awwwards.com/GardenEight/

本日はこの会社のテクニックを盗むべくして、サイトのソースを研究していました。AWWWARDS等の海外のデザイン評価サイトではアニメーションや画像を大量に読み込むサイトを高く評価するけれど、この会社のサイトは画像を多く読みこむわりにわりと軽いことに気づいたからです。

結果的にこの会社の画像読み込みはintercectionObserverを上手く使った独自実装でした。しかし、圧縮しているjavaScriptをprettierでフォーマットしてみると3万行とか書いてある。凄い技術力のデザイナーがいるのだと驚かされました。

WordPressをバックエンドに使うべきか

この会社の作るサイトのバックエンドはWordPressが使われてることが多いようです。なぜWordPressなのでしょう、最も軽いヘッドレスCMSは沢山あります。そしてAstroの存在があります。Astroはマークダウンを直接レンダリング出来るので、クライアントのページを更新したいという要望に、マークダウンの書き替え方を伝えるだけで済みます。わざわざバックエンドにCMSを導入するコストがある会社ならば良いですが、例えばニュース部分だけど更新したいという中小企業の要望にはこの方法のほうがコストが低いです。

AstroとBarba.jsの相性の良さ

Astroは全ページをレンダリングします。クライアントで実行するコンポーネントが減れば減るほどSEO的に有利です。そこでBarba.jsやGSAPのアニメーションを組み合わせても、レンダリングは済んでいるデータを読み込んでアニメーションさせるだけなのでBarba.jsというかSPAの欠点のSEO対応が簡単に出来るわけです。Astroはステートレスなフレームワークですが、ウェブアプリケーションを作るような用途でない限りサイト全体のステート管理ライブラリというものは必要ありません。クライアントで動作するJavaScriptを最初にロードさせるようにして、Vanilla JavaScriptでstateを管理すれば良いだけです。

Astroは今後2年ぐらいで中小案件で多用されるようになるのではないか

多くのサイトにとって重要なのはPVです。PVを稼ぐためにいかにデザインを工夫するかという従属的な役割ですから、サイトが重くなるようなアニメーションは求められていません。しかし、現在、多くのサイトでアニメーションが多用されるようになった背景には、実際のところ動くサイトのほうがユーザーにとって気持ちよくて使いやすい、つまりUXが向上するからでしょう。ところがCSS Animationはそのニードを満たすほどには進化していないので、GSAPかFramerMotionが多く用いられる傾向にあります。そしてこれまでHTMLとCSSでサイトを作ってきた人が取り入れやすいのはVanilla JavaScriptで書かれたGSAPのほうです。そしてフロントエンドフレームワークはUIのコンポーネントの普及と再利用性の点から今後更に需要がますでしょう。最もHTMLとCSSとJavaScriptの組み合わせから移行しやすいのがAstroです。そう、Next.js程の機能が求められるのは大規模な案件だけで、Astroで十分だと多くのクライアントは考えるようになるというのが私の予測です。

私はもっとAstroの可能性、ユーザー認証やECサイトなど、出来ることを学習してみたいです。テンプレートがいっぱい既にあるけれど。