リフレッシュレート

🐾 猫で例えると？

猫パンチで前足がぶれた写真から、この動きを動画として画面に映す場面を考えてみましょう。モニターが1秒間に何回表示を更新するかがリフレッシュレートで、60Hzなら60回です。一方、この写真のぶれは主に撮影中に前足が動いたためで、モニターの更新回数が原因ではありません。カメラの撮影条件と、画面を更新する回数は分けて考えます。

💻 IT現場における「リフレッシュレート」とは？

60Hzなら約16.7ms、120Hzなら約8.3msごとが更新の間隔になります。ただしアプリが新しいフレームを間に合わせられなければ、更新回数が増えても同じ画像が繰り返されます。設定値と実際の描画を分けて確認します。

フロントエンドのエンジニアにとって、この「画面の更新頻度」はアニメーションの実装において非常に重要です。JavaScriptで画面の要素を動かす際、固定のタイマー（`setInterval`など）とは別に、次の描画に合わせて処理を予約する`requestAnimationFrame`を使えます。経過時間に基づいて移動量を決めることも、更新頻度が異なる画面で動きをそろえるために必要です。

⚠️ リフレッシュレートの仕組みと注意点

現場でよく混同されるのが、「リフレッシュレート（Hz）」と「フレームレート（fps）」の違いです。この2つの足並みが揃わないと、映像の世界では致命的なバグが生じます。

ティアリング（画面のズレ）という現象

fpsは映像やアプリが作るフレームの頻度、Hzは表示側の更新頻度です。ティアリングは表示の途中でフレームが切り替わるなどして、別のフレームが一画面に混ざる現象です。Hzとfpsの数字が異なるだけで必ず起こるわけではなく、同期方式も関わります。

// #cat-iconが存在するページで実行する説明用例
const cat = document.getElementById("cat-icon");
let start;
function animateCat(timestamp) {
  if (!cat) return;
  if (start === undefined) start = timestamp;
  const progress = Math.min((timestamp - start) / 1000, 1);
  cat.style.transform = `translateX(${progress * 120}px)`;
  if (progress < 1) requestAnimationFrame(animateCat);
}
requestAnimationFrame(animateCat);

1フレームごとに固定の距離を足すと、高Hzの画面ほど速く動いてしまいます。この例は経過時間から位置を決め、約1秒で120pxへ到達します。requestAnimationFrameは次の描画前の呼び出しを予約するもので、重い処理があっても必ず一定間隔で動く保証はありません。

🛠️ リフレッシュレートを賢く使うためのポイント

機材選びやシステム設計において、リフレッシュレートの恩恵を最大限に引き出しつつ、無駄をなくすためのポイントです。

• 組み合わせを確認： 解像度とHzに対応する出力端子、入力端子、ケーブル、設定が必要です。HDMIかDisplayPortかという名前だけで判断せず、機器の対応モードを確認します。
• 更新頻度を用途に合わせる： 高い更新頻度は消費電力に影響する場合があります。フレームに同期するVRRと、OSが用途に応じて切り替える動作を区別し、機器が対応する設定を使います。
• 出力側（GPU）の性能も合わせる： モニターが144Hzに対応していても、PC本体のスペックが低くて60fpsしか映像を作れなければ、結局カクカクの映像しか表示されません。システム全体でのボトルネックをなくす設計が必要です。

猫パンチの写真のぶれ、動画のfps、モニターのHzを分けて考えると、どこを改善すればよいかが見えてきます。アプリの動きがぎこちないときも、表示機器だけでなく、フレームを作る処理に時間がかかっていないかを確認しましょう。