とある日のWeb制作現場にて
若かりし頃のワイ「今日はWebアニメーションの実装をして行くで〜」
若ワイ「実装するアニメーション内容は…っと」
若ワイ「ふむふむ…要素を上に動かすだけの簡単な実装やね」
若ワイ「CSSとJavaScriptのどちらでもアニメーション実装できるけど、どっちがええんやろ…」
若ワイ「違いはようわからんが、まぁCSSでええやろ」
若ワイ「次は、CSSのtopとtransform、どちらかのプロパティで要素を上に動かす必要があるわけやが…」
若ワイ「どちらでも要素が上に動くわけやし変わらんやろ！topプロパティで動かしたろ！」
？？？「ちょい待ちぃ〜や！！」
若ワイ「！！そ、その声は…若かりし頃にお世話になったアニキッ！？」
世話ニキ「若ワイくん…今、どちらでも変わらない言うたな？」
世話ニキ「topプロパティとtransformプロパティ、実は違いがあるで！」
若ワイ「な…なんやってー！！」
世話ニキ「それと実装したいアニメーションによってCSSとJavascriptで向き不向きがあるんや」
世話ニキ「ほな、そのあたりを一緒に学習していこか〜」
若ワイ「世話ニキィ…！（感涙）」
ご挨拶
この記事は Cocone Advent Calendar 2022 の2日目の記事です。
はじめまして、髙山さんからバトンを受け取りました、ココネ株式会社でWeb関連のフロントエンド業務を担当していますウェブ開発室の石井です。
今回がQiita初投稿になります。
前々からワイシリーズをやってみたいという憧れがあったので、悔いはありません。
大変さが身に沁みました😌
本記事では、Webアニメーションを実装する際に役に立つノウハウをご紹介します。
実際の現場でも通用するノウハウかと思いますので、この記事が少しでも参考になれば幸いです。
本記事の対象者について
本記事は以下の方々が対象になります。
- 基本的なCSSを把握している方
- 基本的なJavaScriptを把握している方
- 簡単なWebアニメーションを作ったことがある方
- CSSアニメーションとJavaScriptアニメーションの違いがわからない方
- Webアニメーションにおけるパフォーマンスについて知りたい方
CSSやJavaScriptの基本的なコトについては、本記事では触れておりませんのでご了承下さい。
Webアニメーションとは
Webアニメーションとは、Webページ全体の印象を決定づける重要な要素です。
素晴らしいWebアニメーションは、お客様に感動を与え、ユーザー体験（UX）の向上にも繋がります。
Webアニメーションが無くともWebページは成立しますが、より良いWebページを制作する上で欠かせない要素になります。
Webアニメーションの手法は主に「CSSを使用したCSSアニメーション」と「JavaScriptを使用したJSアニメーション」の2パターンがあります。
Webアニメーションを実装する上で、これらの手法の特徴を把握することがとても重要になります。
CSSアニメーションとJSアニメーションの特徴
どちらの手法でもWebアニメーションを実装可能ですが、実現したいWebアニメーションの種類によって向き不向きがあります。
以下に、2つのアニメーションの特徴をまとめました。
CSSアニメーション
- シンプルなアニメーションが得意（フェードイン、フェードアウトなど）
- 記述が簡潔になるケースが多い
- 利用するCSSプロパティによっては、パフォーマンスの低下を防ぐことができる（後述）
JSアニメーション
- 複雑なアニメーションが得意（パララックスなど）
- 記述が冗長になるケースが多い
- 負荷の大きいJSアニメーションを実行する場合、パフォーマンスが低下する
Webアニメーションのパフォーマンスについて
CSSアニメーションとJSアニメーションの特徴にて、パフォーマンスという言葉を使いました。
パフォーマンスを理解する為に、Webブラウザの仕組みについて軽く触れたいと思います。
Webブラウザは画面に要素を表示（レンダリング）する為に様々な処理をしています。
レンダリングで利用する主なスレッドとして メインスレッド（Main Thread） と コンポジタースレッド（Compositor Thread） というスレッドが存在します。
メインスレッド（Main Thread）
Webブラウザがレンダリングの工程で利用するスレッドの1つです。
メインスレッドは一番利用されるスレッドで、レンダリング処理の他にJavaScriptの実行も担当しています。
パフォーマンスを向上させるにはメインスレッドの負担をなるべく軽くすることが重要になります。
コンポジタースレッド（Compositor Thread）
Webブラウザがレンダリングの工程で利用するスレッドの1つです。
メインスレッドとは別のスレッドなのでメインスレッドが忙しい状態でも影響を受けずに処理を実行することができます。
CSSアニメーションのパフォーマンスについて
CSSアニメーションの特徴として「利用するCSSプロパティによっては、パフォーマンスの低下を防ぐことができる」と記載しました。
これは厳密に書くと、利用するCSSプロパティによっては、コンポジタースレッドだけで処理するので、メインスレッドの影響を受けずに処理を実行することが出来ます。結果としてパフォーマンスの低下を防ぎ、動作が軽くなるということです。
現在、コンポジタースレッドだけで処理が可能なCSSプロパティは以下になります。
# コンポジタースレッドだけで処理されるCSSプロパティ
transform, opacity
冒頭のやり取りで、topプロパティとtransformプロパティを例に挙げていました。
2つのプロパティ、どちらも要素を動かすという点では同じに見えます。
しかし、topプロパティはコンポジタースレッドだけで処理されるCSSプロパティではない為、処理をする際にはメインスレッドも必要になります。
topプロパティで要素を動かした場合、その度にメインスレッドでの処理が発生する為、Webブラウザの負担が大きくなり、結果パフォーマンスの低下に繋がります。
要素を動かす場合は、コンポジタースレッドだけで処理されるtransformプロパティの利用をオススメします。
まとめ
少々、専門的な話も入りましたが現場で役立つWebアニメーションのノウハウをご紹介しました。
今回の記事で、メインスレッドやコンポジタースレッドの存在を初めて耳にしたという方もいたのではないでしょうか？
Webアニメーションは奥が深く、どんなに素晴らしいアニメーションでも動作が重かったり、環境によって上手く動作しないことがあるとユーザー体験（UX）は低下してしまいます。
お客様に感動を与えるWebページを制作することはフロントエンドの醍醐味なので、UX向上の為にもメインスレッドとコンポジタースレッドは覚えておいて損はないと思います。
明日の Cocone Advent Calendar 2022 の記事は、ココネ株式会社で働くエンジニアが技術に関する情報をお届けしている ココネエンジニアブログ 内で掲載している「CSSで子要素の数によってスタイルを変更させる」のご紹介になります。是非、読んで頂けると嬉しいです！🎉