こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。
CSSの世界へようこそ！毎日コードを書いていると、「うわ、これどうやって動いてるんだ…？」と頭を抱えたくなるような新しい機能に出会うこと、ありますよね。大丈夫ですよ、最初はみんなチンプンカンプンですから安心してください。
今回は、最近のWeb制作でめちゃくちゃ熱い注目を集めている「View Transitions API（ビュー・トランジションズ・API）」、その中でも一番の魔法使いである`::view-transition-group`（ビュー・トランジション・グループ）という擬似要素について、とことん優しく解き明かしていきます。
難しい専門用語はなるべく置いておいて、身近な例えを使いながら一緒に見ていきましょう！
—
ページが変わる瞬間の「モヤモヤ」、感じたことありませんか？
みなさんも普段ネットサーフィンをしていて、ページ内のリンクをクリックしたときに、画面が「パッ」と一瞬で切り替わったり、真っ白になったりして、「あれ、今どこに飛ばされたんだっけ？」と迷子になった経験はありませんか？
あの、画面が急に切り替わる瞬間の冷たい感じ、なんとかしたいですよね。
「ページ A からページ B へ移動するときに、まるで一つの滑らかな動画を見ているかのように、要素がスルスルと移動してくれたら気持ちいいのに……！」
そんな私たちの長年の夢を叶えてくれるのが、View Transitions APIです。そして、その裏側で「どの要素が、どうやって変身して移動するのか」を裏で完璧に仕切っている舞台監督こそが、今回主役の `::view-transition-group` なんです。
—
`::view-transition-group` って一体なに？（お引越しのダンボール箱に例えてみよう）
いきなり `::view-transition-group` なんて名前を聞くと、「うわ、なんか難しそう……」とブラウザのタブをそっと閉じたくなるかもしれませんが、大丈夫。身近な例えで考えてみましょう。
想像してください。あなたが今、お部屋の引っ越しをしようとしています。
お気に入りの「マグカップ」を、古い家から新しい家に持って行きたい。
このとき、どうしますか？
1. 古い家の棚からマグカップを取り出す。
2. 専用の「ダンボール箱」にそのマグカップを優しく包んで入れる。
3. 新しい家の、新しい棚の場所にそのダンボール箱を運んで、中身を取り出して綺麗に配置する。
この手順の中の「2番：専用のダンボール箱」、これこそがまさに `::view-transition-group` の正体です！
ブラウザは、ページが切り替わる瞬間、動かしたい要素（例えば商品のサムネイル画像など）を一時的にこの「ダンボール箱」の中にフワッと包み込みます。そして、古い画面から新しい画面へと、その箱ごとシュパッと移動させてくれるんです。
つまり、`::view-transition-group` とは、「要素が変身して移動するための、秘密の入れ物（グループ）」のことなんですね。
—
実際のコードと、ちょっとした秘密の構造
CSSの中で、この「ダンボール箱」を指定するには以下のように書きます。
/ 「product-image」という名前が付けられたお引越し箱（グループ）を指名する /
::view-transition-group(product-image) {
/ ここにアニメーションのスピードなどを書きます /
animation-duration: 0.5s;
}
「あれ？ただの箱なのに、中身はどうなっているの？」って気になりませんか？
実は、この `::view-transition-group` の中身は、さらにいくつかのパーツに分かれています。まるで、ダンボール箱の中に「お皿を入れるケース」や「緩衝材」が入っているようなイメージです。
ちょっとだけ裏側の構造をのぞいてみましょうか。
1. `::view-transition`
- 画面全体をすっぽり包み込む、一番大きなお部屋（オーバーレイ）。
2. `::view-transition-group(名前)`
- 個別の要素（画像やタイトルなど）を包む、さっきの「ダンボール箱」。
3. `::view-transition-image-pair(名前)`
- 箱の中で、「古い画面の画像」と「新しい画面の画像」の2枚を重ね合わせて持っているトレイ。
4. `::view-transition-old(名前)`
- トレイの上にある、古い画面の画像（だんだん消えていく）。
5. `::view-transition-new(名前)`
- トレイの下にある、新しい画面の画像（だんだん浮かび上がってくる）。
「うわ、なんか階層が深くて難しそう……！」と思いました？
大丈夫です。日々のコーディングで、この全階層を毎回フル活用することは滅多にありません。
私たちが一番よく使うのは、やっぱり今回主役の `::view-transition-group` です。ここをいじるだけで、「移動のスピード」や「位置が変わるときの滑らかさ」を自由自在にコントロールできるからです。
—
【実践】実際にコードを書いて、魔法をかけてみよう
百聞は一見に如かず。実際に小さなサンプルを見てみましょう。
HTMLとCSSを組み合わせて、要素がスムーズに移動するアニメーションを作ってみます。
HTMLの準備
新鮮なりんご
(※ `view-transition-name` という魔法の属性をHTMLに書いておくことで、ブラウザに「この要素はお引越しさせるから、箱を用意してね！」と伝えています。)
CSSの記述
/
ここが今回の主役！
「apple-image」という名前がついたお引越し箱（グループ）の動きをカスタマイズします。
/
::view-transition-group(apple-image) {
/ アニメーションにかかる時間を0.6秒にちょっとゆっくりめに設定 /
animation-duration: 0.6s;
/ 動きに「おっ、ちょっとタメがあって気持ちいいな」と思わせるイージング（緩急）をつける /
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
たったこれだけのCSSを書くだけで、ブラウザは自動的に「お、古いページのりんごの位置から、新しいページのりんごの位置まで、このダンボール箱をスーッと移動させればいいんだな！」と理解し、滑らかなアニメーションを実行してくれます。
昔の私たちなら、JavaScriptの複雑なライブラリを入れて、位置を計算して……と涙ぐましい努力をしていたのが嘘のようですね。時代は進化しました。
—
現場のプロからのちょっとしたアドバイス（つまずきポイント）
最後に、私が実務でこの View Transitions API を触っていて、「あ、ここでみんなハマるな」というポイントをこっそりシェアしておきますね。
1. `view-transition-name` はページ内で「世界に一つだけ」にする
- お引越し箱の名前（IDのようなもの）なので、1つのページの中に同じ名前が複数あると、ブラウザが「どの子の箱やねん！」とパニックを起こしてしまいます。必ずユニーク（一意）な名前をつけてあげてください。
2. 対応しているブラウザを意識する
- この機能は比較的新しいものです（Google ChromeなどのChromium系ブラウザで先行してサポートされています）。もし他のブラウザで見ても、アニメーションしないだけでサイトが壊れるわけではない（「プログレッシブ・エンハンスメント」と言います）ので、安心してチャレンジしてくださいね。
—
おわりに
いかがでしたでしょうか？
`::view-transition-group` と聞くと、何やら難解な呪文のように感じられたかもしれませんが、中身は「要素をお引越しさせるための専用のダンボール箱」なんだとイメージできれば、ぐっと身近に感じられたのではないでしょうか。
フロントエンドの技術は日々進化していますが、ベースにある「ユーザーに気持ちいい体験を届けたい」というワクワク感はいつの時代も変わりません。
ぜひ、あなたのローカル環境でこのコードを試して、画面の中の要素がスルスルと移動する気持ちよさを味わってみてください。「おっ、できた！」という小さな感動の積み重ねが、あなたを最高のエンジニアにしてくれますよ。
それでは、次の現場でお会いしましょう！Happy Coding!
コメント