本日は、Chrome と Astro の View Transitions API の開発経緯について詳しくお伝えします。これには、Astro コミュニティが API を早期に受け入れてテストし、幅広いコミュニティに可能性を示したことも含まれます。また、Astro 3.0 でビュー遷移の新しい組み込みサポートについてもお知らせいたします。
背景
ページのさまざまな状態をシームレスに遷移する（状態遷移）ことは、ウェブ上でシームレスなアニメーション エクスペリエンスを構築するうえで、常に複雑な側面でした。CSS 遷移、CSS アニメーション、Web Animation API などのツールが利用可能であるにもかかわらず、状態遷移の作成は依然として困難なタスクでした。課題の一つは、終了する要素でのインタラクションを処理することです。これにより、遷移が複雑になる可能性があります。
また、支援デバイスで読み上げ位置とフォーカスを維持することは困難です。また、スクロール位置の違いに対応すると、状態遷移が煩雑なプロセスになります。こうした要素がすべて、ウェブページ上のさまざまな要素間のスムーズな遷移の実装を複雑にしています。
これらの課題に対するブラウザのソリューションとして、View Transitions API が登場しました。この新しい API を使用すると、2 つの状態間のアニメーション遷移を作成する際に、1 つのステップで DOM を簡単に変更できます。
Chrome 111 での View Transitions API のリリースは、JavaScript ベースのウェブアプリだけでなく、すべてのウェブサイトで遷移をサポートするという幅広いビジョンの始まりでした。今後も機能強化を予定しています。今後、Chrome では、ドキュメント間の遷移、コンポーザ ドリブンのアニメーション、スコープ設定された遷移、ネストされた遷移グループなどの機能が追加される可能性があります。
ビュー遷移の初期調査
Chrome の View Transitions API の開発は、単独で行われたものではありません。デベロッパー、フレームワークの作成者、CSS ワーキング グループからのフィードバックとコラボレーションは、数年にわたるこの機能の開発において重要な役割を果たしました。
初期段階では、デベロッパーによるテストが重要な役割を果たしました。初期バージョンの API では CSS アニメーションがサポートされておらず、遷移は制限されたいくつかのプリセットに限定されていました。初期のフィードバックから、デベロッパーは遷移を完全にカスタマイズして表現力豊かにしたいという要望が明らかになりました。このやり取りにより、優れたデフォルト、拡張性、カスタマイズのバランスを考慮して API が設計されました。
Astro は、初期の段階からビュー遷移を活用していたフレームワークの一つです。この記事の残りの部分では、Astro チームの視点から、ビュー遷移を見つけて採用し、ウェブ開発エクスペリエンスの中心的な要素に据えた経験について説明します。
Astro がビュー遷移に賭けた理由
Astro は長い間、ビュー遷移のようなものを探していました。Astro は、UI コンポーネントを軽量な HTML にサーバー レンダリングして、ページの読み込みパフォーマンスを向上させる JavaScript ウェブ フレームワークです。Astro は、処理をクライアント デバイスから可能な限りオフロードするように設計されています。Astro ウェブサイトはネイティブのブラウザ ページ ナビゲーションを使用しますが、他のウェブ フレームワークでは、JavaScript クライアントサイド ルーティングでブラウザ ナビゲーションを乗っ取る可能性があります。
このトレードオフにより、Astro チームは次のような課題に直面しました。クライアントサイド ルーティングを採用せずに、Astro でページ遷移をアニメーション化し、ページ間でアプリのような UI の永続性を確保するにはどうすればよいか。
ビュー遷移がその答えでした。ビュー遷移により、Astro は JavaScript を多用する SPA ウェブ フレームワークと同じルーティング機能を提供できますが、クライアントサイド ルーティングのパフォーマンスと複雑さのオーバーヘッドは発生しません。他のフレームワークでは、ビュー遷移はオプションの実装の詳細として扱われていましたが、Astro でははるかに大きなものでした。
Astro チームが次に答える必要があったのは、「どうやって？」という質問でした。チームは Turbo、Swup、Livewire などのプロジェクトからヒントを得て、Astro 内で同様のアプローチをいくつか試作しました。
初期の試みの 1 つは、ページ全体の「スマートな遷移」でした。これは、新しい HTML ページを現在の HTML と自動的に比較し、JavaScript を使用してすべての要素を一度に置き換えようとするものでした。巧妙な方法でしたが、エラーが発生しやすかったため、
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
幸い、Astro コミュニティでは、View Transitions API はプロダクトを複雑にすることなく、すでに強力であることが示されました。初期のデモを見た Astro チームは、ブラウザ API にできるだけ近いシンプルな Astro API のアイデアに賛同しました。ビュー遷移を Astro の中に隠された目に見えない実装の詳細として扱うのではなく、デベロッパーに直接公開できます。Astro をウェブ プラットフォームと直接連携させ、フロントエンドの全体的な複雑さを軽減。
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
作業はシンプルになりました。新しい View Transitions API を Astro に導入し、できるだけ多くのウェブサイトとブラウザに適用される自動フォールバックを提供します。ほとんどのブラウザ（Chrome 以外）ではネイティブ ビュー遷移がまだ完全にサポートされていないため、フォールバック サポートは不可欠です。
Astro での公式サポートの開始
Astro 2.9 で、Astro は試験運用版のビュー遷移のサポートをリリースしました。すぐに肯定的な反応がありました。デベロッパーは、さまざまなユースケースの素晴らしいデモを共有し始め、場合によってはすべてを本番環境にリリースするまでになりました。
Astro 3.0 では、新しい View Transitions API のサポートが確定し、すべてのデベロッパーが使用できるようになります。これらの新しい API は、試験運用版として、またはすべて一度に導入できるようになりました。
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Astro をプラットフォーム API と整合させると、ネイティブの View Transitions API 上に新しい機能を構築してテストできるという、予想外のメリットがあります。たとえば、新しい Astro transition:persist ディレクティブを使用すると、ページ全体のナビゲーション全体で要素を保持できます。これにより、持続的なオーディオ プレーヤーや動画プレーヤーなどの長寿命の要素を実現できます。これは、従来は重量級の JavaScript SPA でのみ可能でした。
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
また、Astro では、デベロッパーにとってより使いやすいようにビュー遷移をカスタマイズすることもできます。たとえば、カスタムの前後アニメーションと動的 HTML のアニメーションのサポートはすでに追加されています。これらの機能はどちらも、低レベルの API だけでは実現が難しいものですが、Astro では実質的に簡単に実現できます。
これらの機能は現在のところ Astro にのみ実装されていますが、Astro チームは、今後のブラウザの機能強化に役立てるため、仕様作成者やワーキング グループにフィードバックを送信したいと考えています。たとえば、提案を注意深くモニタリングして、CSS でアニメーションを簡単に共有できるようにします。
次のステップ
ウェブでのビュー遷移の未来は明るく、Astro、Nuxt、HTMX はすべて、ある程度のサポートをリリースしており、他の多くのフレームワークも関心を示しています。
Chrome チームは、Astro のネイティブ ビュー遷移のサポートを心より歓迎しています。これはウェブ開発にとって大きな進歩であり、よりスムーズでダイナミックなユーザー エクスペリエンスを実現します。デベロッパーの皆様は、Astro 3.0 のビュー遷移をぜひご確認ください。新しいランディング ページを作成するときも、既存のサイトをアップグレードするときも、これらの機能強化は大きな変化をもたらします。ビュー遷移は、SPA と MPA で可能なことのギャップを埋めるのに役立ちました。SPA や MPA のサポートに不足している点が他にもあるかどうか、ご意見をお聞かせください。詳しくは、ビュー遷移 WICG GitHub リポジトリでコメントをお寄せください。
すでに、革新的なデモやアプリケーションを拝見し、今後の展開に期待しています。ビュー遷移に関する皆様の取り組みは、ウェブの未来を形作っています。Astro でビュー遷移をお試しいただき、作品を共有して、この取り組みを一緒に進めていきましょう。