2023年8月30日、Astroのver3.0がリリースされました。

去年の8月にver1.0がリリースされたので、おそらく来るだろうと思っていましたがやっぱり来ました。

今回の記事はver3.0になり、既存のプロジェクトをバージョンアップしたときに不具合が出るところなどを中心にお伝えさせていただきます。

変更点すべてを詳しく知りたいという方は、公式サイトでご確認ください。

Astro ver3.0公式サイト：https://astro.build/blog/astro-3/

Astroって何？という方はまずはこちらの記事からご覧ください。

超高速Webサイト構築用フレームワーク”Astro(アストロ)”について

Nodeのバージョンアップ

開発環境、デプロイ環境ともに、Nodeのバージョン18.14.1以降が必要になります。

v3.0がインストールできない場合、デプロイできない場合は、nodeのバージョンを確認してみてください。

開発環境であれば、以下のコマンドを実行すれば確認できます。

node -v

画像の最適化

v3.0では、画像の最適化が安定版としてリリースされたため、<img>タグの書き方が変わりました。

以下はコード例です。

---
import { Image } from 'astro:assets';
import sample from "../images/sample.png"
---

<Image src={sample} alt="サンプル画像" />

この記述だけで画像の最適化が行われます。

いくつかポイントがあるので、記述しておきます。

  • 画像ファイルはsrc内のフォルダに置く。最適化をしたくない場合は、ルートのpublicフォルダ内に置く。
  • altは必須。
  • width,heightはsrc内フォルダにある画像を呼び出す場合は自動出力されるため不要。
  • <img>タグを使う場合は、呼び出す際に.srcを追記。ただし、最適化は行われない。

---
import sample from "src/images/sample.png";
---

<img src={sample.src} width="400" heigth="300" alt="サンプル画像" />

CSSのスコープが厳格になった

以前までは親コンポーネントで設定したcssが、子コンポーネントに反映されることなどがあり、スコープが甘い部分があったのですが、今回のバージョンアップでより厳格なスコープになりました。

これにより他のコンポーネントに影響を及ぼさなくなったのはいいことなのですが、思いもよらぬところで表示が崩れる場合もあるので注意が必要です。

正式にSPAモードに変えられるようになった

これが今回のバージョンアップの一番の目玉です。

Astro 3.0でSPAモードが可能になりました。

SPAについて

今まではSPA(シングルページアプリケーション)はフレームワークで言えば、Next.js,Gatsby.js,Nuxt.jsなどが有名で、ユーザーがページ遷移したか分からないほどページ遷移が非常に高速なのが最大の特徴です。

仕組みを簡単に説明すると、SPAでは最初にサイトにアクセスしたときに全てのページのデータを取得し、その後のページ切り替えは、変更の差分データのみを変えるといった仕組みです。

そのためページをリロードする必要がなく、ブラウザ上で動作するため、非常に高速なページ遷移を実装することが可能というわけです。

MPA(Astroの場合)

AstroはMPA(マルチページアプリケーション)のフレームワークなため、ページにアクセスするたびに、そのページのファイルを取得するというのが大きな特徴です。

ただ、Astroは従来のMPAフレームワークとは違い、非常に高速な画面表示が可能なことが大きな特徴の一つです。

従来のSPAとAstroのSPA

従来のSPAはReactやVue.jsといったモダンJavaScriptでの実装をしており、最初のページが読み込まれればその後のページ遷移の表示速度は速いのですが、最初に大量のJavaScriptを読み込むため、初回のページロードに時間がかかるのが問題点でした。

従来のAstroではサイトを遅くするJavaScriptをゼロにすることができるため、初回のページロードは非常に高速で、他のページへの遷移も高速だったのですが、SPAほど高速でリッチな画面遷移はできませんでした。

しかしながら、今回のバージョンアップにより、AstroでもSPAが可能になりました。

しかも、JavaScriptではなく、View Transitions APIという仕組みを使っているため、従来のように大量のJavaScriptを読み込む必要はなく、初回のページロードも高速です。

公式にはView Transitions APIをサポートする最初の主要な Web フレームワークと書かれているので、他にこの仕組みを使っているフレームワークはまだ登場していないと思います。

SPAモードにする方法

SPAモードにする方法は非常に簡単です。

---
import { ViewTransitions } from 'astro:transitions';
---

<ViewTransitions />

この二行でSPAモードにすることができます。

元に戻すときは、このコードを消すだけなので、非常に便利です。

詳細は公式サイトでご確認ください。

【Astro公式(ビュートランジション)】

SPAにするときの注意点

他のSPAのフレームワーク(Next.jsやNuxt.js)を使ったことがある方なら分かると思いますが、SPAの画面遷移時にはクリーンアップ処理が必要になります。

今までAstroプロジェクトで素のJavaScriptを使い、addEventListerを使ったスクロールやクリックイベントを実装していた場合は、画面遷移後に動かなくなるため注意が必要です。

Googleアナリティクスが計測できない

GoogleアナリティクスはGoogleが提供している無料のサービスで、サイトに訪れたユーザがどのような行動をしたかがひと目でわかるツールです。

SPAでは画面遷移が計測できなくなるため対策が必要なのですが、Astroは他のSPAとは構成が違うため、私自身、現時点では対策が取れていません。

AstroでGoogleアナリティクスを導入する場合は、コードをそのまま埋め込むとパフォーマンスが落ちるため、PartyTownというライブラリを使うことが推奨されているのですが、SPAモードの場合はエラーが起きます。

こちらに関しては今後、対策が見つかり次第対応し、記事にしたいと思います。

まとめ

今回はAstroのバージョンアップに関する変更点や注意点を書かせていただきました。

バージョンアップ直後にドキュメントを読んでいた時は、「Astroの進化はすごい」と思っていただけでしたが、徐々に「来年はもっと進化するだろう」という思いも持つようになりました。

今後も日々勉強し、Astroの進化にしっかりついていこうと思います。