こんにちは。ブラウザという名の巨大な魔法の箱の裏側を覗き込む冒険へようこそ。
Webサイトを見ているとき、画面がパッと切り替わる瞬間に「カクッ」とした違和感を覚えたことはありませんか？ ページ遷移やコンテンツの入れ替えで、まるで紙芝居のように画面が飛ぶ感じ。あれを何とかして、スマホアプリのような滑らかな体験に変えたい……そんな開発者の夢を叶えてくれるのが「View Transitions API」です。
今日は、この魔法のような仕組みがブラウザの中で一体どうなっているのか、専門用語を抜きにして解き明かしていきましょう。
—
1. 「一瞬の静止画」という魔法のトリック
ブラウザが画面を書き換えるとき、実は裏側ではものすごいスピードで「今の状態」を計算して描画しています。View Transitions APIがやっていることは、一言で言うと「画面を切り替える直前と直後の『スクリーンショット』を撮り、その間をアニメーションでつなぐ」というトリックです。
これを、「お気に入りの写真の入れ替え」に例えてみましょう。
1. スナップショット（撮影）: 今飾っている写真をパシャリと撮ります。
2. 新しいレイアウトの準備: 裏側で新しい写真を準備します。
3. 遷移（トランジション）: 古い写真がフワッと消えつつ、新しい写真がスッと現れる。
ブラウザはこれを、DOM（HTMLの構造）がガラッと変わる瞬間に、ほんの一瞬だけ「静止画」を差し込むことで実現しているのです。
2. ブラウザの中では何が起きているのか？
皆さんが `document.startViewTransition()` という呪文を唱えると、ブラウザのレンダリングエンジンは以下の手順で動き出します。
- ステップ1：現在の状態をキャプチャ
ブラウザは現在の画面の「見た目」を一枚の画像として保存します。
- ステップ2：DOMの更新
JavaScriptでDOM（HTML要素）を書き換えます。でも、まだ画面には反映させません。
- ステップ3：新しい状態をキャプチャ
新しくなったDOMの「見た目」を、もう一度パシャリと撮ります。
- ステップ4：CSSによる重ね合わせ（ここが重要！）
ブラウザは自動的に「偽物のレイヤー（擬似要素）」を画面の上に重ねます。
- `::view-transition-old(root)`：古い画像
- `::view-transition-new(root)`：新しい画像
この2枚をCSSのアニメーションでクロスフェード（重ね合わせ）させることで、滑らかな遷移が生まれるんです。
3. 実装してみよう：まずはここから
難しいことを考える前に、まずはシンプルなコードで体験してみましょう。例えば、ボタンを押すと中身が書き換わるような場面を想像してください。
// ボタンをクリックした時の処理
document.getElementById(‘myButton’).addEventListener(‘click’, () => {
// ここが魔法の始まり！
// この関数の中に、DOMを変える処理を書くだけです
const transition = document.startViewTransition(() => {
// 1. DOMを更新する（例：テキストを入れ替える）
document.getElementById(‘content’).textContent = ‘新しいコンテンツに変わりました！’;
// 2. この関数が終わると、ブラウザが自動的に「新しい状態」を撮影してくれます
});
// 遷移が完了した時の処理（必要であれば）
transition.finished.then(() => {
console.log(‘アニメーション完了！’);
});
});
これだけで、ブラウザは「古い状態」から「新しい状態」へ、そっと滑らかに変化させてくれます。CSSを一切書かなくても、ブラウザがデフォルトで「ふわっと切り替わる」演出をやってくれる。これ、すごくないですか？
4. つまずきやすいポイント：大丈夫、焦らなくていい
このAPIを触っていてよくあるのが、「あれ、思ったように動かない？」という現象です。
- 「DOMの更新は必ず`startViewTransition`の中に入れる」
これだけは忘れないでください。外側で更新してしまうと、ブラウザは「いつ撮影すればいいの？」と迷子になってしまいます。
- 「CSSで指定できる名前（View Transition Name）」
もし特定の要素だけを滑らかに動かしたい場合は、CSSで `view-transition-name: my-image;` のように名前をつけてあげてください。そうすると、ブラウザは「あ、これとこれは同じものなんだな！」と認識して、位置を追いかけてくれるようになります。
最後に：Webはもっと自由になれる
View Transitions APIは、これまでのWebの「カクカクした移動」という常識を覆すツールです。最初は「ブラウザの仕組みなんて難しそう」と思うかもしれませんが、こうして「写真を差し替える仕組みなんだ」とイメージすれば、少し身近に感じられませんか？
完璧に使いこなそうと気負う必要はありません。まずはボタンを押した時の変化を、ほんの少しだけ滑らかにしてみる。その小さな一歩が、あなたの作るWebサイトを、訪れる人にとって心地よい「体験」へと変えていくはずです。
何か分からないことがあれば、いつでもまた聞きに来てくださいね。あなたの素敵なWeb制作ライフを、心から応援しています！
コメント