「もう迷わない」パフォーマンス視点で判断するJavaScript vs CSS｜現場で使える実践テクニック

#CSS #JavaScript #アニメーション #パフォーマンス #フロントエンド
C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「パフォーマンス視点で判断するJavaScript vs CSS」について解説します。

パフォーマンスが現場判断の鍵になる理由

僕も最初の頃は「動けばいい」って感覚でコード書いてました。
JavaScriptでアニメーション作るか、CSSで作るか、みたいな感じで「どちらでもいけるし」程度の判断をしていて、ほんま失敗しましたね。

ある案件で、スマートフォンでのスクロールアニメーションを実装したんですが、JavaScriptで毎フレーム要素の位置を計算していたんです。
そしたら低スペック端末でめっちゃ遅くなってしまって、クライアントから「重いんですけど」という指摘をもらってしまいました。
そこから改めてパフォーマンスを意識するようになったんです。

実は「JavaScript vs CSS」の判断って、複雑さとか予算とかいろいろあるけど、一番わかりやすい基準がパフォーマンスなんですよ。
なぜなら、ブラウザの処理方式が全く違うから。
この違いを理解しておくと、判断がめっちゃ楽になります。

CSSアニメーションが有利な場面を見極める

CSSアニメーションって、実はGPUで動くんですよ。
つまり、メインのスレッド（JavaScriptが実行される部分）に負荷がかからないわけです。
だから、スクロール中にアニメーションさせたいとか、複数の要素が同時にアニメーションするとか、そういう場面ではCSSが強い。

現場でよく見るのは、「フェードイン」「スケール変更」「スライド」みたいなシンプルな動きですね。
こういうのはCSSの@keyframesで十分。
理由は、ブラウザが最適化してくれるからです。

具体的には、こんなシーンです。

  • ページロード時の要素の段階的な出現
  • ホバーエフェクト（ボタンの拡大縮小など）
  • スクロール時の背景画像の視差効果（ただしJavaScriptで最適化が必要な場合もあり）
  • ローディング中のスピナーアニメーション
  • 複数要素の遅延アニメーション

もう一つポイントがあります。
CSSアニメーションなら「キャッシュされる」ってこと。
同じアニメーション効果を複数ページで使えば、CSSファイルはキャッシュされてるので、余分なダウンロードがない。
JavaScriptだと毎回スクリプトが実行されるリスクがあるんです。

JavaScriptが本当に必要な判断ポイント

では逆に、JavaScriptを選ぶべき場面って何か。

一番わかりやすいのは「状態管理が必要な時」です。
例えば、ユーザーの操作に応じて動きが変わるとか、複数のアニメーション状態を切り替える必要があるとか。
CSSだけだと「開く」「閉じる」の2パターンしか難しいですが、JavaScriptなら「開く途中で一時停止」みたいなことができます。

それから「複雑な計算」が絡む場合ね。
例えば、フォーム入力時に動的にグラフが更新される、みたいなやつ。
そこまでいったらもうJavaScriptないと無理です。

パフォーマンス面では、JavaScriptアニメーションは「requestAnimationFrame」（rAF）を使って実装すればGPUサポートも可能です。
ただし、コードがCSSより複雑になります。

  • ドラッグ＆ドロップ操作に応じた動き
  • ユーザーのスクロール速度に応じた動的アニメーション
  • データバインディングが必要な場合（Vue.jsやReactを使ってる場合）
  • 複雑な多段階アニメーション
  • キーボード操作などの複数イベントを組み合わせる場合

僕の失敗から学ぶ、実装前のチェックリスト

最後に、僕が何度も失敗してから身につけた、実装前に確認することをシェアしますね。

1. 計測してから判断する

「こっちの方が速そう」って推測で選ばない。
Chrome DevToolsのPerformanceタブを使って、FPS（フレームレート）がいくつ出てるかチェックしましょう。
スマートフォンも忘れずに。
僕は昔、PCでは60fps出てたけど、スマホでは30fpsに下がってて気づかなかったことあります。

2. ターゲットデバイスを明確にする

スマートフォンがメインなのか、デスクトップなのか。
低スペック端末も視野に入れるのか。
これでもう判断が変わります。
スマホなら余計なJavaScript実行は避けたいですからね。

3. アニメーションの頻度を確認する

1回だけ再生されるのか、常に繰り返すのか。
もし常に繰り返してるなら、JavaScriptの処理コストが積み重なってくるので、CSSの方が有利です。

4. 既存フレームワークとの相性を考える

React使ってるなら、アニメーションライブラリ（react-springとか）で実装した方が、状態管理と連動しやすい。
素のHTML/CSSだけなら、CSSアニメーション一択でいい。

チェックリストにしてまとめます。

  • 実装前にブラウザで計測できるか？
  • ターゲットデバイスのスペック情報は揃ってるか？
  • アニメーション中に他の処理（スクロール検出、クリック判定など）が走るか？
  • 複雑な状態管理が必要か、それともシンプルなオン・オフか？
  • モバイル環境でのテストは必須か？

まとめ

「JavaScript vs CSS」の判断って、めっちゃ悩みますよね。
でも、パフォーマンス視点で考えると、実はシンプルなんです。

シンプルな動きで状態管理が不要ならCSS。
複雑な操作が絡むか、ユーザーインタラクションに応じる必要があるならJavaScript。
そして、どちらにしろ「実装後に計測する」これが絶対ね。

僕の経験から言うと、この判断基準を持ってると、クライアントレビューの時にも「なぜこの技術を選んだか」を説明しやすくなります。
あと、バグが出た時