リフレッシュレート

Refresh Rate

PC・システムのきほん

ディスプレイやモニターが、1秒間に何回画面全体を新しい画像に書き換える（更新する）ことができるかを示す指標です。単位は「Hz（ヘルツ）」で表され、この数値が高いほど、動きの激しい映像やスクロール操作が残像感なく滑らかに表示されます。

🐾 猫で例えると？

おもちゃに向かって素早い猫パンチを繰り出し、前足がブレて残像になっている茶トラ猫 — カメラの更新速度が追いつかずに発生した猫パンチの残像

おもちゃの気配を察知した瞬間、茶トラが繰り出した目にも止まらぬ超高速猫パンチ。しかし、カメラのシャッター（画面の書き換え速度）がその素早い動きに追いつけず、前足が大きくブレて残像になってしまっています。もしこのカメラが1秒間にもっと多くの枚数を連写（高いリフレッシュレートで更新）できていれば、パンチの軌道をブレのない滑らかなコマ送りとして捉えられたはずです。この「1秒間に景色を何回アップデートできるか」という視覚的な処理能力こそが、リフレッシュレートの概念です。

🐾猫あるある：IT現場の日常

毛づくろいで何度も高速ペロペロする： ディスプレイが1秒間に画面の描画内容を更新する回数であり、数値が高いほど映像の動きが滑らかになる指標。
機嫌が悪い時にしっぽを激しく連打する： 動きの激しい映像の残像感を減らすため、表示パネルの書き換え周期を上げて視認性を高める仕組み。
獲物を狙って頭を小刻みに細かく揺らす： フレームレートの高い映像ソースに対して、描画遅延や画面のズレを防ぎながら追従するディスプレイの表示物理特性。

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

一般的なオフィス用のPCモニターは「60Hz（1秒間に60回書き換え）」が標準ですが、最近のスマートフォンやゲーミングモニターでは「120Hz」や「144Hz」、ひいては「240Hz」といった高リフレッシュレートが当たり前になってきました。数値が倍になれば、Webサイトをスクロールした時の文字の読みやすさや、カーソルの吸い付くような滑らかさが劇的に向上します。

フロントエンドのエンジニアにとって、この「画面の更新頻度」はアニメーションの実装において非常に重要です。JavaScriptで画面の要素を動かす際、昔のように固定のタイマー（`setInterval`など）で無理やり動かすのではなく、ブラウザやモニターのリフレッシュレートに同調して描画を更新する仕組みを使うのが、現在のWeb開発のベストプラクティスとされています。

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

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

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

PCのグラフィックボード（GPU）が1秒間に作り出すパラパラ漫画の枚数を「フレームレート（fps）」と呼び、それを表示するモニター側の能力が「リフレッシュレート（Hz）」です。GPUが超高速で120枚の絵（120fps）を作って送り付けてきても、モニター側が60Hz（60枚）しか表示できない場合、処理が追いつかずに画面の上下で別の絵が同時に表示されてしまう「ティアリング（画面の引き裂き）」という現象が起きます。

// JavaScriptでモニターのリフレッシュレートに同期してアニメーションを行う例
let position = 0;

function animateCat() {
    position += 5; // 猫を右に5px移動
    document.getElementById('cat-icon').style.transform = `translateX(${position}px)`;
    
    // ブラウザが画面を書き換えるタイミング（リフレッシュレート）に合わせて次の処理を予約する
    requestAnimationFrame(animateCat);
}

// アニメーション開始
requestAnimationFrame(animateCat);

上記の `requestAnimationFrame` は、モニターが実際に画面を書き換えるタイミング（一般的には60Hzなら約16.6ミリ秒ごと）に合わせて処理を実行してくれます。これにより、無駄な計算を省きつつ、ティアリングのない最も滑らかなアニメーションを実現できます。

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

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

ケーブルの規格に注意する： 144Hz対応の高級なゲーミングモニターを買っても、古いHDMIケーブルで接続すると帯域（通信量）が足りず、60Hzでしか出力されないという悲劇が現場で多発します。DisplayPortや最新のHDMIケーブルが必須です。
バッテリー消費とのトレードオフ： スマホやノートPCで常に120Hzを出力し続けると、画面の書き換え処理で急速にバッテリーを消費します。必要な時だけレートを上げる「可変リフレッシュレート（VRR）」の設定を有効にするのが賢い運用です。
出力側（GPU）の性能も合わせる： モニターが144Hzに対応していても、PC本体のスペックが低くて60fpsしか映像を作れなければ、結局カクカクの映像しか表示されません。システム全体でのボトルネックをなくす設計が必要です。

茶トラが放つ超高速の猫パンチ（GPUが生み出すフレームレート）に対して、人間の視覚やカメラ（モニター側のリフレッシュレート）が追いつかずに残像が発生してしまうのは、まさにスペックの不一致によるティアリング現象と言えます。一方、横でどっしり構えているアメショは、そんな無駄な動きはせず、必要な時だけ確実な一撃（おやつの要求）を繰り出してきます。システムも猫も、自分の処理能力と出力先のスペックを見極め、無駄なリソースを消費しない滑らかな運用を心がけたいですね。