こんにちは！Webの世界へようこそ。
フロントエンドの深淵を覗く旅へようこそ。今日は、多くのWeb開発者が「魔法みたい！」と驚く「View Transitions API」という技術について、その裏側でブラウザがどんな汗をかいて頑張っているのか、紐解いていきましょう。
難しい専門用語も、私たちの日常の風景に例えれば怖くありません。肩の力を抜いて、一緒に見ていきましょうね。
—
ページ遷移の「ぎこちなさ」を解決したい
皆さんは、Webサイトでリンクをクリックしたとき、画面が一度真っ白になってから新しいページがパッと表示される「あの瞬間」に、少しだけ寂しさを感じたことはありませんか？
これまでのWebは、いわば「ページをめくるたびに、本の内容を全部書き換える」ような仕組みでした。これだと、どうしても「パッ、パッ」と切り替わる不自然な間（ま）が生まれてしまいます。
そこで登場したのがView Transitions APIです。これを使うと、まるでアプリのように、画面が滑らかに溶け込むようなアニメーションを実現できます。
「撮影」と「合成」：ブラウザの中の映画監督
ブラウザがこの滑らかなアニメーションを実現するとき、実は裏側でとても面白いことをしています。映画の撮影現場を想像してみてください。
1. 「今の画面」を写真に撮る（キャプチャ）：ブラウザは、遷移前の画面をパシャリと撮影します。
2. 新しい画面を準備する（レンダリング）：その裏で、次のページのDOMツリー（HTMLの構造）を急いで構築します。
3. 魔法の重ね合わせ（遷移）：撮っておいた写真と、新しく出来上がった画面を重ねて、ゆっくりと入れ替えるアニメーションを実行します。
このとき、ブラウザは「DOM」という設計図を一度完全に壊して作り直すのではなく、「古い画面の画像」と「新しい画面の構造」を一時的に同時に保持しているんです。これが、このAPIの最大のポイントです！
—
実践：魔法をかけるコードの書き方
理屈はわかっても、コードは難しそう…と思われましたか？ 大丈夫、基本はとてもシンプルです。ブラウザに対して「ここから遷移を始めますよ！」と合図を送るだけなんです。
// ページ遷移を実行する関数
function navigateWithTransition(url) {
// ブラウザに「これから画面遷移するから、上手いことやって！」と伝えます
// document.startViewTransition という魔法のメソッドを使います
if (!document.startViewTransition) {
// もし古いブラウザだったら、普通に移動する（優しさのフォロー）
window.location.href = url;
return;
}
// 魔法の開始！
document.startViewTransition(async () => {
// この中でDOMを書き換える処理（fetchして新しい中身に入れ替える等）を行うと
// ブラウザはその変化を察知して、滑らかにアニメーションさせてくれます
await updateDOM(url);
});
}
この `document.startViewTransition` を呼ぶだけで、ブラウザは「あ、今から変わるんだな！」と理解し、先ほどお話しした「撮影→合成」のプロセスを自動でやってのけます。
—
つまずきやすいポイント：ブラウザの「苦労」を知っておこう
ここで一つ、皆さんに知っておいてほしい「ブラウザの苦労」があります。
View Transitions APIは、アニメーション中に「どの要素が、どの要素に変わるのか」を見極めようとします。例えば、前のページの「商品画像」が、次のページの「詳細画像」に滑らかに移動してほしいとき、ブラウザに「これとこれは同じものですよ」と教えてあげる必要があります。
そのために使うのが `view-transition-name` というCSSのプロパティです。
/ CSSで名前を付けてあげるだけ /
.product-image {
/ この要素には「main-image」という名前を付けるよ！ /
view-transition-name: main-image;
}
これだけで、ブラウザは「あ！前のページにあった `main-image` が、こっちのページにもある！じゃあ、この位置からあの位置までスライドするように動かしてあげよう」と判断してくれるようになります。まるで名探偵ですね。
—
最後に：完璧を目指さなくても大丈夫
Webブラウザという巨大なシステムは、実はとても繊細です。少しのミスで画面がガクついたりすることもあります。でも、最初から完璧に使いこなそうなんて思わなくていいんですよ。
まずは、「画面がパッと切り替わる瞬間に、ブラウザが一生懸命写真を撮って、きれいに繋げようとしているんだな」と想像してみてください。その視点を持つだけで、皆さんのコードはよりブラウザに優しく、そしてユーザーにとっても心地よいものに変わっていくはずです。
もし分からなくなったら、いつでもここに戻ってきてくださいね。Web開発の旅は、少しずつ、ゆっくり進むのが一番ですから。
それでは、また次回の探求でお会いしましょう！
コメント