Astro 3.0の新機能によるサイト高速化について

• Web Create
• 2024.02.21

Webディレクターのもっちです。

今回は、昨年リリースされたAstro 3.0の2つの最大の機能であるView Transitionsと画像最適化について詳しくご紹介します。これらの機能は、Astroを使って高速でモダンなウェブサイトを作るのに役立ちますので、是非ご覧ください。

View Transitionsについて

View TransitionsはAstro 3.0で追加された新しい機能で、各ルート間でフルページのリロードが発生する通常のマルチページ アプリを、シングルページ アプリのように動作させることができるものです。これにより、ページ遷移がスムーズになり、ユーザー体験が向上します。

View Transitionsを使うには、まずブラウザで利用可能なView Transitions APIを使用して、ページ間をルーティングします。このAPIはまだすべてのブラウザでサポートされていないため、Astroは自動的にフォールバックを提供します。
次に、ページのヘッドにAstroからView Transitionsコンポーネントを配置します。これをすると、新しいルートに移動するときに、Astroは自動的にページ全体をView Transitions疑似要素でラップし、優雅なフェードインアニメーションを追加します。もちろん、このアニメーションはカスタマイズ可能です。

さらに、ルート間で要素をアニメーションで表現することもできます。
例えば、カード型のUIを使っている場合、カードをクリックすると詳細ページに遷移する際に、カードが拡大して画面全体に広がるようなアニメーションを実現できます。
また、詳細ページから戻る際には逆のアニメーションが行われます。このようなアニメーションは、View Transitionsコンポーネントにidやshared属性を付与するだけで実現可能です。

画像最適化について

画像最適化もAstro 3.0で追加された新しい機能で、HTMLの画像タグをAstroの画像コンポーネントに置き換えるだけで、任意の画像を変換、最適化、ロードすることができるものです。これにより、画像のパフォーマンスや品質が向上します。

画像最適化を使うには、まずAstroに最適化させたい画像を任意のディレクトリに保存します。次に、HTMLの画像タグをAstroの画像コンポーネントに置き換えます。この際、altタグを追加することを忘れないでください。
これだけで、Astroは自動的にWebP画像に変換し、元の画像よりも4倍以上容量を小さくします。また、Astroはレイアウトシフトを防ぐために高さと幅を追加し、よりパフォーマンスの高いモダンな画像のロード方法を提供します。これらの処理はすべてビルド時に行われるため、ランタイムのオーバーヘッドはありません。

もちろん、画像最適化もカスタマイズが可能です。Astroの画像コンポーネントには、フォーマットや品質などのオプションを指定できます。また、画像サービスを使ってリアルタイムに画像を変換することもできます。現在、AstroはCloudinaryとImgixをサポートしています。

Astro 3.0の変更点について

Astro 3.0では、View Transitionsや画像最適化などの新機能を追加するとともに、いくつかの変更も行いました。これらの変更は、Astro 3.0以前よりも安定的で使いやすくするためのもので、具体的には、以下のような変更がありました。

• Node 16やTypeScript 4などのサポートを廃止し、Astro 1.0のAPIの多くを非推奨に指定
• HTMLの圧縮や画像サービスの変更など、いくつかのデフォルト設定を変更
• getStaticPathsはデフォルトで結果をフラット化しないよう変更

これらの変更により、既存のプロジェクトが動作しなくなる可能性があります。その場合は、公式ドキュメント等を参照してください。また、Astroはアップグレードガイドやマイグレーションツールを提供する予定です。

まとめ

Astro 3.0では、View Transitionsと画像最適化という2つの強力な新機能を追加しました。これらの機能は、Astroを使って高速でモダンなウェブサイトを作るのに非常に役立ちます。
また、いくつかの変更も行いましたが、これらはAstroをより安定的で使いやすくするために必要なものです。Astro 3.0をぜひお試しください。