requestanimationframeとは？初心者向け解説と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

岡田康介

名前：岡田康介（おかだこうすけ）ニックネーム：コウ、または「こうちゃん」年齢：28歳性別：男性職業：ブロガー（SEOやライフスタイル系を中心に活動）居住地：東京都（都心のワンルームマンション）出身地：千葉県船橋市身長：175cm 血液型：O型誕生日：1997年4月3日趣味：カフェ巡り、写真撮影、ランニング、読書（自己啓発やエッセイ）、映画鑑賞、ガジェット収集性格：ポジティブでフランク、人見知りはしないタイプ。好奇心旺盛で新しいものにすぐ飛びつく性格。計画性がある一方で、思いついたらすぐ行動するフットワークの軽さもある。 1日（平日）のタイムスケジュール 7:00 起床：軽くストレッチして朝のニュースをチェック。ブラックコーヒーで目を覚ます。 7:30 朝ラン：近所の公園を30分ほどランニング。頭をリセットして新しいアイデアを考える時間。 8:30 朝食＆SNSチェック：トーストやヨーグルトを食べながら、TwitterやInstagramでトレンドを確認。 9:30 ブログ執筆スタート：カフェに移動してノートPCで記事を書いたり、リサーチを進める。 12:30 昼食：お気に入りのカフェや定食屋でランチ。食事をしながら読書やネタ探し。 14:00 取材・撮影・リサーチ：街歩きをしながら写真を撮ったり、新しいお店を開拓してネタにする。 16:00 執筆＆編集作業：帰宅して集中モードで記事を仕上げ、SEOチェックやアイキャッチ作成も行う。 19:00 夕食：自炊か外食。たまに友人と飲みに行って情報交換。 21:00 ブログのアクセス解析・改善点チェック：Googleアナリティクスやサーチコンソールを見て数字を分析。 22:00 映画鑑賞や趣味の時間：Amazonプライムで映画やドラマを楽しむ。 24:00 就寝：明日のアイデアをメモしてから眠りにつく。

はじめに

ウェブページには動きをつくる場面がたくさんあります。requestAnimationFrame または小文字で requestanimationframe という名前で呼ばれるこの仕組みは、動きを滑らかに描くための“タイミング合わせ”をブラウザに任せるものです。初心者さんにも使い方を知っておくと、ゲーム風の演出やアニメーション付きの説明ページを作るときに役立ちます。

requestAnimationFrameとは何か

このAPIは画面が1回書き換わるたびにコールバック関数を実行します。従来の setInterval や setTimeout だと、ブラウザの描画タイミングとずれて描画が引っかかったり、CPUを無駄に使ってしまうことがありました。requestAnimationFrame はブラウザの描画タイミングとピタリと合うように実行されるため、動作が自然でスムーズになります。

基本的な使い方

使い方の基本はとてもシンプルです。コールバック関数を用意して window.requestAnimationFrame に渡すだけ。時間を表す time 引数を受け取ることができ、これを使ってアニメーションの速さを調整します。

例として次のようなループを作ると、毎フレームで描画処理を行うことができます。<span>function loop(timestamp){ /* 描画処理 */ window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop);

setInterval との比較

特徴	ブラウザの描画タイミングに合わせて実行され、不要な更新を減らしやすい
メリット	滑らかな動きと省電力、CPU負荷の低減が期待できる
デメリット	背景タブなど描画が止まる場面ではコールバックが呼ばれない

注意点と実装のコツ

・ページが非表示のタブにあるときは多くの場合コールバックを停止して、リソースを節約します。これは現代のウェブアプリのパフォーマンス向上に役立つ特徴です。

・time 引数は経過時間で、0からカウントされるわけではありません。アプリの開始時刻を記録してからの経過時間として扱うと、移動距離や回転角度などを正確に制御できます。

・複数のアニメーションを同時に走らせたい場合は、それぞれのループを独立して実装するか、共通のタイムスタンプを渡して同期させるとよいでしょう。

まとめ

要点はつぎのとおりです。requestAnimationFrame を使えば、ブラウザが最適なタイミングで描画を更新してくれるため、滑らかで自然なアニメーションが実現します。初心者のうちは基本のループを作るところから始め、time の扱い方と描画の最適化を少しずつ学んでいくと良いでしょう。

requestanimationframeの同意語

requestAnimationFrame: ブラウザの描画タイミングに合わせてコールバックを実行する公式API。アニメーションを滑らかに更新するために、次の描画フレームの直前に callback を呼び出す。
rAF: requestAnimationFrame の略称。コードやドキュメントで短く書くときに使われる呼び方。
raf: 小文字の略語表記。実装やサンプルコードで見かけることが多く、機能は同じ。
アニメーションフレームのリクエスト: 日本語の直訳表現。描画のタイミングで次のフレームを描くように「リクエスト」することを意味する言い換え表現。
アニメーションフレーム要求: 別の言い換え表現。フレーム描画のタイミングを要求するという意味。
描画タイミングAPIのリクエスト: フレーム描画のタイミングを扱う API のリクエストという意味合いの表現。機能の説明として使われることがあるが、厳密には関数名ではない。
requestAnimationFrame(): 関数を実際に呼ぶときの表記。コード上で「requestAnimationFrame()」と書いて使うのが一般的。
公式APIのフレームリクエスト: 公式仕様の一部である「フレームリクエスト機能」の説明表現。

requestanimationframeの対義語・反対語

cancelAnimationFrame: すでに requestAnimationFrame でスケジュールされたコールバックの実行を取り消すこと。RAF が予約した描画タイミングを打ち消す、反対側の操作です。
アニメーション停止: アニメーションの実行を完全に止める状態。描画の自動更新を停止して、アニメーションを実行しない意味合いの対義語です。
setTimeout: 一定の遅延を経て1回だけコールバックを実行するタイマー。画面のリフレッシュと必ずしも同期せず、RAF とは異なるタイミングで描画を走らせます。
setInterval: 一定間隔で継続してコールバックを実行するタイマー。ブラウザのリフレッシュと自動的に同期されない点が、RAF の同期性とは異なる描画タイミングを生み出します。
手動描画: ブラウザの自動描画タイミングに任せず、開発者が任意のタイミングで描画処理を呼び出す状態。RAF の自動同期とは反対の運用イメージです。
描画更新を自動化しない: 自動的な描画更新をオフにして、描画を手動・別のイベントで走らせる考え方。

requestanimationframeの共起語

requestAnimationFrame: ブラウザが次の描画タイミングに合わせて1フレームの更新を実行するAPI。高い滑らかさを実現するために使われる。
cancelAnimationFrame: 実行予定のフレーム更新をキャンセルする関数。
msRequestAnimationFrame: 旧IE/Edge向けの prefixed バージョン。現在は非推奨または廃止傾向。
webkitRequestAnimationFrame: 旧Safari/Chrome向けの prefixed バージョン。現在は標準へ移行中。
performance.now: 高精度な経過時間を返すAPI。時間制御やフレーム間隔の計測に使われる。
timeStamp: requestAnimationFrame のコールバックに渡される高精度タイムスタンプ。
polyfill: 古い環境でも requestAnimationFrame を動作させるための実装（ポリフィル）。
frameRate: 1秒あたりの描画フレーム数の目安。ブラウザが内部的に採用する値に依存する。
fps: frames per second の略。frameRate の別名として使われることがある。
animationLoop: 描画を継続的に更新するループのこと。
canvas: HTMLのキャンバス要素。アニメーションの描画対象としてよく使われる。
CanvasRenderingContext2D: キャンバスの2D描画コンテキスト。描画内容を実際に描く役割。
gameLoop: ゲーム開発で使われる、一定の間隔で描画更新を行うループ構造。
browserRepaint: ブラウザが画面を再描画するタイミング。RAFはこのタイミングに最適化されて動作する。
repaint: リペイントの作業。描画が更新される過程の語彙。
vendorPrefix: ベンダー接頭辞（例: webkit, ms）に関する話題。
setTimeout: RAFの代替として使われる遅延実行の手段。滑らかさはRAFより劣ることがある。
Web Animations API: Web Animations API は、CSSやJavaScriptで複雑なアニメーションを制御する新しい標準。RAFと比較・連携して使われることがある。
クロスブラウザ対応: 各ブラウザでの挙動差を意識した共起語。
time-based animation: 時間の経過に基づくアニメーション設計の概念。

requestanimationframeの関連用語

requestAnimationFrame: ブラウザに、次に描画が発生するタイミングでコールバックを実行するよう依頼する API。パフォーマンスの良いアニメーションを実現し、60fps 前後を目安に動作します。
cancelAnimationFrame: 登録した requestAnimationFrame のコールバックをキャンセルする API。不要になったアニメーションを止めるときに使います。
RAFポリフィル: 古いブラウザで requestAnimationFrame を使えるようにする代替実装。互換性を保つために用いられます。
Web Animations API (WAAPI): JavaScript から直接アニメーションを制御できる、CSS アニメーションより柔軟な API。高度な制御にも対応します。
timeStamp: requestAnimationFrame のコールバックが呼ばれた時点の高精度タイムスタンプ。経過時間の計測に使われます。
performance.now: 高精度な経過時間を返すブラウザAPI。アニメーションの経過時間計測に便利です。
deltaTime: 前回のフレームから現在までの経過時間。アニメーションの速度を安定させる指標として使います。
frame rate: 1秒間に描画する回数の指標。60fps などがよく使われます。
60fps: 1秒間に60回描画されることを目安とする滑らかさの基準。多くのモニターに同期します。
ブラウザのリペイント: 画面を新しい内容で塗り直す作業。RAF はこのタイミングに合わせて呼び出されます。
repaint: 画面の一部を再描画する処理。不要なリペイントを避けることが滑らかさに繋がります。
layout: 要素のサイズ・位置を計算する過程。再計算を最小限に抑えることが重要です。
paint: 要素を実際に描画する過程。色やテクスチャを画面に塗る作業です。
compositing: 描画結果を複数のレイヤーとして結合して最終的な画面を作る過程。滑らかさに影響します。
will-change: CSS プロパティの将来の変更を事前に最適化するヒント。スムーズなアニメに寄与します。
GPU acceleration: GPU を活用して描画処理を高速化すること。長時間走るアニメで効果を発揮します。
V-Sync: 垂直同期。モニターの描画タイミングと同期させることでティアリングを減らします。
非表示タブのスリープ throttling: タブが非表示の場合 RAF の呼び出しを抑制・遅延させ、リソースを節約します。
visibility API: ページが表示中かどうかを判定する API。表示状態に応じて処理を調整できます。
document.visibilityState: 現在のページの表示状態を表す値。"visible" か "hidden" が主な値です。
main thread: JavaScript が基本的に実行される UI のメインスレッド。長い処理はフレームを止める原因になります。
イベントループ: JavaScript のタスク・コールバックを順次処理する仕組み。RAF のタイミングもここで管理されます。
macro tasks: 大きな単位のタスク。RAF のコールバックはマクロタスクとして扱われる場合があります。
micro tasks: 短く即時に実行されるタスク。Promise などが該当します。
setTimeout: 一定の遅延後に関数を実行する古典的なタイマー。RAF とは性質が異なり、描画タイミングには最適化されません。
setInterval: 一定間隔で関数を繰り返し実行する API。正確性は保証されにくい場合があります。
RAFとsetTimeoutの比較: RAF はブラウザの描画タイミングに合わせて実行され、滑らかさと省エネを両立しやすい。setTimeout は固定間隔で遅延がズレやすいことがあります。
animation loop: 継続してフレームを更新するループ。ゲームや高度なアニメーションの基本構成です。
time-based animation: 経過時間を基準にアニメーションを動かす手法。フレームレートに依存しづらく安定します。
easing: 動きの加速・減速を自然に見せる補間技法。よく使われる曲線には ease-in-out などがあります。
lerp: 2点間を一定割合で補間する線形補間。アニメーションの移動計算でよく用いられます。
CSS Animations: CSS だけで動きを作る方法。基本的にはスタイルベースのアニメで、単純な動きに向きます。
WAAPIとCSS Animationsの違い: WAAPI は JS から細かい制御ができ、複雑なシーケンスにも対応。CSS Animations は宣言的で簡潔に動作します。
互換性・ブラウザサポート: 対応ブラウザやバージョンを確認することが大切。多くの現代ブラウザで requestAnimationFrame はサポートされています。