JavaScript

この記事では「JavaScript」について、基本の意味と使い方を初心者向けにやさしく説明します。

A feature that adds animated effects to screen transitions, creating a smoother and more natural user experience.

View Transitions API

View Transitions APIは、Webページの見た目が切り替わるときにアニメーションをつけるための仕組みです。

たとえば、ページ内のある部分の内容が変わるとき、いきなりパッと切り替わるのではなく、スムーズなフェードやスライドなどの視覚効果をつけることで、ユーザーにとって自然な流れを作ることができます。

これまで、ページの状態が変わるたびに自分でアニメーションをJavaScriptやCSSで細かく作る必要がありましたが、View Transitions APIを使うと、ほぼ自動的にページ遷移や要素の更新をアニメーション化できるのが大きな特徴です。

さらに、SPA（シングルページアプリケーション）だけでなく、従来のリンクでページを移動するような構成でも、Chromeなど一部の対応ブラウザでは、ページ遷移全体にアニメーションを加えることも可能になっています。

主な特徴

• JavaScriptの1行の記述で、画面の変化にアニメーションを追加できる
• .startViewTransition(() => {...}) を使って状態の変更を包み込むだけ
• CSSで view-transition-name を設定すれば、対象要素の切り替えもアニメーション化できる
• ページ全体の遷移にも使える（document.startViewTransition）

例

button.addEventListener("click", () => {
	document.startViewTransition(() => {
		// この中で DOM を変化させる
		box.textContent = "変わったよ！";
	});
});

このように、状態の変更をアニメーション付きで見せることができます。