Chrome/Edgeが実装したクロスドキュメントビュー遷移APIを用いて、Astroが「JavaScriptなしのビュー遷移」を実現

6月12日、The Astro Blogで「JavaScript を使わないビュー遷移(Zero-JavaScript View Transitions)」と題した記事が公開された。この記事では、Astroが提供する新しい機能であるJavaScriptを使わないビュー遷移について詳しく紹介されている。以下に、その内容を簡潔にまとめて紹介する。

ビュー遷移APIとは？

ビュー遷移APIは、ネイティブブラウザ遷移を実現するための新しいAPIのセットである。Webの標準技術として実装が進んでいるため、近い将来すべてのブラウザ上で利用可能になる。従来、この機能はJavaScriptを多用するシングルページアプリケーション（SPA）でしか実現できなかったが、最近の進歩により、ネイティブページ遷移がウェブプラットフォームにもたらされた。

クロスドキュメントビュー遷移とは、ウェブブラウザにおいてページ間の遷移をスムーズにアニメーションで表示するための新しいウェブプラットフォームAPIであｒ。このAPIは、従来のページ遷移のように完全なページリロードが発生する場合でも、アニメーションを適用してユーザーに対してシームレスな体験を提供する。

クロスドキュメントビュー遷移の特徴

ネイティブサポート：
- クロスドキュメントビュー遷移APIは、ブラウザのネイティブ機能として提供されるため、JavaScriptを使用せずにアニメーションを実現できる。これにより、ページロード時のパフォーマンスが向上し、開発者はアニメーションの実装に伴う複雑なコードを省略できる。
シームレスなユーザー体験：
- ページ間の遷移がアニメーションで表示されるため、ユーザーにとって自然でスムーズなナビゲーション体験が提供される。これにより、アプリケーションの使いやすさが向上し、ユーザーのエンゲージメントが高まる。
簡単な実装：
- クロスドキュメントビュー遷移を有効にするためには、CSSの設定を追加するだけでよい。例えば、@view-transitionルールを使用してナビゲーションアニメーションを指定する。

クロスドキュメントビュー遷移の使用方法

以下に、クロスドキュメントビュー遷移APIを使用した簡単なコードサンプルを示す。

HTMLとCSSの設定

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>View Transitions Demo</title>
  <style>
    @view-transition {
      navigation: auto; /* クロスドキュメントビュー遷移を有効にする */
    }
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      margin: 20px;
    }
    .link {
      display: block;
      margin: 10px 0;
      padding: 10px;
      background-color: #f0f0f0;
      text-decoration: none;
      color: #333;
    }
    .link:hover {
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>View Transitions Demo</h1>
    <a href="page2.html" class="link">Go to Page 2</a>
  </div>
</body>
</html>

上記のコードでは、@view-transitionルールを使用してナビゲーションアニメーションを有効にしている。page2.htmlにも同様の設定を追加することで、ページ間の遷移がスムーズにアニメーション表示される。

クロスドキュメントビュー遷移APIは、現代のウェブ開発において重要な役割を果たす新しいツールであり、特にユーザーエクスペリエンスを重視するアプリケーションにおいて、その真価を発揮する。

Astroにおけるビュー遷移

Astroユーザーは、Astro 2.9以降、ビュー遷移機能に早期アクセスできるようになった。当初のブラウザの制限により、JavaScriptルーターをページに挿入してアニメーションを管理する方法が採用されたが、これは長期的な解決策ではなかった。しかし、主要なウェブブラウザが改善されるにつれて、JavaScriptルーターを完全に取り除くことが可能となった。

現在の状況

Chrome 126（先週リリース）とMicrosoft Edge 126（今週リリース）が「クロスドキュメントビュー遷移」をサポートし、AstroにおいてJavaScriptを使用しないビュー遷移が実現された。

デモ

最新のブラウザバージョン（Chrome 126またはEdge 126）を使用して、astro-zerojs-transitions.vercel.app デモを開くことで、JavaScriptを使わないビュー遷移を体験できる。ブラウザのネットワークパネルで確認すると、リンクをクリックするたびに完全なページロードが発生し、JavaScriptが一切送信されないことが確認できる。

Zero-JavaScriptビュー遷移の有効化

ネイティブな新しいビュー遷移APIを利用するためには、ウェブサイトに以下のCSSを追加するだけである。

navigation: auto; /* enabled! */

このルールは、遷移の両端に含める必要がある。共有ページレイアウトコンポーネントに追加するのが良い方法だ。

既存プロジェクトのアップグレード

既にAstroの<ViewTransitions />コンポーネントを使用している場合、このコンポーネントを削除し、上記のCSSルールに置き換えることが可能だ。これにより、後方互換性のあるJavaScriptルーターがページから削除され、クライアントサイドコードの複雑さが軽減される。

import { ViewTransitions } from "astro:transitions";
<ViewTransitions fallback="none" />

古いブラウザでビュー遷移を実行したい場合は、後方互換性のある<ViewTransitions />コンポーネントを引き続き使用することができる。

`transition:persist`について

Astroの人気機能であるtransition:persistディレクティブは、ナビゲーション間で要素を持続させる機能を提供している。しかし、ネイティブなクロスドキュメントナビゲーションではこの機能はまだサポートされていない。ネイティブサポートが将来追加される可能性があるが、当面の間、<ViewTransitions />コンポーネントを使用する必要がある。

Astroの未来

リンクを使用したナビゲーションはウェブの基本的な動作であり、今回の進展はChromiumとブラウザ仕様プロセスにおいて最近の記憶に残る最も重要な進展の一つである。Google Chromeや他のブラウザベンダーと協力しながら、この新しいAPIの普及を進めていく。

開発者は、ネイティブビュー遷移を今日から利用することも、今後のユーザーへの展開を待つこともできる。準備が整ったら、CSSの1行を変更するだけで有効化できる。

詳細はZero-JavaScript View Transitionsを参照していただきたい。