ビュー遷移

私たちは、多くの人がWebアプリケーションにSPAアーキテクチャを採用した主な理由は、美的考慮事項によるものだと、しばらくの間主張してきました。

私たちの著書『Hypermedia Systems』で、Web 1.0スタイルの連絡先管理アプリケーションについて議論する際に述べているように、SPAバージョンと同等の機能を備えていても、アプリケーションには深刻な*美的*問題があります。

ユーザーエクスペリエンスの観点から見ると、アプリケーションのページ間を移動したり、連絡先を作成、更新、または削除したりすると、顕著なリフレッシュが発生します。これは、すべてのユーザーインタラクション（リンクのクリックまたはフォームの送信）で、アクションごとに処理するまったく新しいHTMLドキュメントを含む、ページ全体の更新が必要になるためです。

–Hypermedia Systems - 第5章

Webページ間のこの耳障りな「カチャッ」という音は、しばしばFlash of Unstyled Content（スタイルが適用されていないコンテンツのちらつき）を伴い、ずっと私たちを悩ませてきました。最新のブラウザはこの状況をいくらか改善していますが（残念ながら、リクエストが処理中であることが分かりにくくなっている）、特に、うまく作成されたSPAで実現できることと比較すると、状況は依然として悪いものです。

さて、Webの初期には、これはそれほど大きな問題ではありませんでした。*ブラウザのツールバーに*恐竜の周りを星が飛び交い、燃えるようなテキスト、テーブルベースのレイアウト、踊る赤ちゃんなどがあり、私たちは主にWebをftpクライアントのようなものと比較していました。

ハードルは*低く*、時代は*良かった*のです。

悲しいかな、Webはそのような幼稚なものを捨て去り、今では洗練された魅力的なインターフェースをユーザーに提供することが期待されており、*スムーズな*ビュー状態間の遷移も含まれています。

繰り返しますが、これが多くのチームがSPAアプローチをデフォルトにする理由だと考えています。古い方法は…単にぎこちなく見えるのです。

#CSSトランジション

初期のWebエンジニアは、Web開発者が異なるビュー状態間のスムーズな遷移を提供したいと考えていることに気づき、これを達成するためのさまざまなテクノロジーを提供しました。主なものの1つはCSSトランジションで、ある状態から別の状態への数学的な*遷移*を指定できます。

HTMLにとって残念なことに、CSSトランジションはJavaScriptを使用する場合にのみ利用できます。トランジションをトリガーするには、要素を動的に変更する必要がありますが、「バニラ」HTMLではこれはできません。実際には、これはSPAを構築するためにJavaScriptを使用しているクールな子供たちだけがこれらのツールを使用できることを意味し、SPAの*美的優位性*をさらに強固なものにしました。

htmxは、ご存じのとおり、CSSトランジションをプレーンHTMLで利用できるようにします。これは、新旧両方のコンテンツに存在する要素を取得し、それらに属性を「確定」させる、やや複雑なスワッピングモデルを介して実現します。これは巧妙なトリックであり、ハイパーメディア駆動型アプリケーションを、よくできたSPAのように滑らかに感じさせるために使用できます。

しかし、新しい技術が登場しました。ビュー遷移APIです。

#ビュー遷移API

ビュー遷移APIは、CSSトランジションよりもはるかに意欲的で、*DOM全体*をある状態から別の状態に遷移させるための、一般の人々が利用できるシンプルで直感的なAPIを提供しようとしています。

さらに、このAPIはJavaScriptだけでなく、HTMLのプレーンな古いリンクやフォームでも利用できるようになっているため、Web 1.0アプローチを使用して*はるかに優れた*ユーザーインターフェースを構築できます。

この機能が利用可能になったら、「Hypermedia Systems」の連絡先アプリケーションを再検討するのは楽しいでしょう！

これを書いている時点では、APIはCSSトランジションと同様にJavaScriptでのみ利用可能であり、Chrome 111+でリリースされたばかりです。

JavaScriptでは、APIはこれ以上ないほどシンプルです


  // this is all it takes to get a smooth transition from one 
  // state to another!
  document.startViewTransition(() => updateTheDOMSomehow(data));

これはまさに私が求めていたAPIです。

幸運なことに、このAPIを通常のhtmxスワッピングモデルにラップするのは簡単です。これにより、HTMLで一般的に利用できるようになる前に、htmxでビュー遷移の探索を開始できます！

htmx 1.9.0以降、hx-swap属性にtransition:true属性を追加することで、APIを試すことができます。

#実践的な例

それでは、htmxと組み合わせたこの新しい輝かしいおもちゃの簡単な例を見てみましょう。

そのためには、2つのパートが必要です

CSSを介したビュー遷移アニメーションの定義
htmxを搭載したボタンへの小さなアノテーションの追加

#CSS

最初に行う必要があるのは、必要なビュー遷移アニメーションを定義することです。

@keyframesを使用して、コンテンツをスライドさせてフェードイン/アウトするアニメーションを定義します
:view-transition-old()および:view-transition-new()疑似セレクターを使用して、slide-itという名前のビュー遷移を定義します
定義したばかりのslide-itビュー遷移に.sample-transitionクラスを関連付け、CSSクラス名を使用して要素にバインドできるようにします

（ビュー遷移APIの詳細は、Chromeデベロッパーページに記載されています。）


    <style>
       @keyframes fade-in {
         from { opacity: 0; }
       }
    
       @keyframes fade-out {
         to { opacity: 0; }
       }
    
       @keyframes slide-from-right {
         from { transform: translateX(90px); }
       }
    
       @keyframes slide-to-left {
         to { transform: translateX(-90px); }
       }
    
       /* define animations for the old and new content */
       ::view-transition-old(slide-it) {
         animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
         600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
       }
       ::view-transition-new(slide-it) {
         animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
         600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
       }
    
       /* tie the view transition to a given CSS class */
       .sample-transition {
           view-transition-name: slide-it;
       }
        
    </style>

このCSSは、.sample-transitionクラスを持つコンテンツが削除されるとフェードアウトして左にスライドし、新しいコンテンツがフェードインして右からスライドインするように設定します。

#HTML

CSSを介してビュー遷移を定義したら、次に、このビュー遷移をhtmxが変更する実際の要素に関連付け、htmxがビュー遷移APIを利用することを指定します


    <div class="sample-transition">
       <h1>Initial Content</h1>
       <button hx-get="/new-content" 
               hx-swap="innerHTML transition:true" 
               hx-target="closest div">
         Swap It!
       </button>
    </div>

ここでは、新しいコンテンツを取得するためにGETを発行し、最も近いdivのinnerHTMLをレスポンスで置き換えるボタンがあります。

そのdivにはsample-transitionクラスが付いているため、上記で定義したビュー遷移が適用されます。

最後に、hx-swap属性には、htmxにスワップ時に内部ビュー遷移JavaScript APIを使用するように指示するオプションtransition:trueが含まれています。

#デモ

これらをすべて組み合わせることで、htmxでビュー遷移APIの使用を開始する準備が整いました。Chrome 111+で動作するデモを以下に示します（他のブラウザでも正常に動作しますが、素敵なアニメーションは得られません）

初期コンテンツ

このページをChrome 111+で見ていると仮定すると、上記のコンテンツが左に滑らかにスライドアウトし、右からスライドインする新しいコンテンツに置き換えられるはずです。素晴らしい！

#結論

これはかなり洗練されていて、概念を理解すれば、それほど難しいことではありません！この新しいAPIは、多くの可能性を秘めています。

ビュー遷移は、ハイパーメディア駆動型アプリケーションと、今日より普及しているSPAアーキテクチャとの間の競争条件を劇的に平準化できると感じている、エキサイティングな新しいテクノロジーです。

Web 1.0アプリケーションの醜い「カチャッ」という音をなくすことで、SPAアプローチの審美的な利点は減少します。私たちは「見た目」ではなく、さまざまなアーキテクチャに関連する実際の技術的なトレードオフに焦点を当てることができます。

私たちは、ビュー遷移がバニラHTMLで利用できるようになるのを楽しみにしていますが、それまでは、htmxで今日から試すことができます！