6月12日、The Astro Blogで「JavaScript を使わないビュー遷移(Zero-JavaScript View Transitions)」と題した記事が公開された。この記事では、JavaScriptを使用せずに、ネイティブアプリライクなビュー遷移を実現するための新しいプラットフォームAPIについて詳しく紹介されている。

Zero-JavaScript View Transitions

View Transitions APIは、ページ間のネイティブなブラウザ遷移を可能にするAPIのセットである。歴史的には、これが可能だったのはJavaScriptを多用するシングルページアプリケーション(SPA)だけだったが、最近の進歩により、ネイティブなページ遷移がウェブプラットフォームに導入されている。

AstroユーザーはAstro 2.9以来、ビュー遷移への早期アクセスが可能となっていた。
しかしそれは、View Transition APIをサポートするブラウザがまだ存在しなかったという時代に作られたもので、ページ上にJavaScriptルーターを挿入してアニメーションを管理する方法で行われている。

クロスドキュメントビュー遷移のサポート

つい先日リリースされたChrome 126およびMicrosoft Edge 126は、「クロスドキュメントビュー遷移」をサポートし、AstroでのゼロJavaScriptビュー遷移を可能にしている。

お使いのブラウザのバージョンが126であることを確認した上で、astro-zerojs-transitions.vercel.appのデモを開いて、ブラウザでゼロJavaScriptビュー遷移を体験することができる。ブラウザのネットワークパネルを探索して、リンククリックごとに完全なページロードがトリガーされ、JavaScriptが一切送信されていないことを確認してみてほしい。

ゼロJavaScriptビュー遷移の有効化

新しいView Transition APIを利用するには、@view-transitionアットルールをウェブサイトに追加するだけである。必要なCSSは以下の通り：

<style>
  @view-transition {
    navigation: auto; /* 有効化 */
  }
</style>

このルールは遷移元と遷移先、どちらのページにも含める必要がある。共通のページレイアウトコンポーネントに追加するのが良い方法である。

transition:persistについて

ちなみにAstroで人気の機能であるtransition:persistは、ナビゲーション間でエレメントを維持するためのディレクティブであり、オーディオやビデオプレーヤーなどのUIがページを跨いで再生を続けることを可能にする。しかし、この機能はまだブラウザのネイティブなクロスドキュメントナビゲーションではサポートされていない。将来的にネイティブでのサポートが期待されるが、当面は従来の<ViewTransitions />コンポーネントを使用し続けることが推奨される。

Astroの未来

リンクを使用してナビゲーションを行うことは、ウェブの基本的な行動である。これは、Chromiumおよびブラウザ全体における最も重要な進歩の1つであると考えている。
詳細はZero-JavaScript View Transitionsを参照していただきたい。