Reactのコンポーネントで動画を作る「Remotion」の基本概念と使い所のメモ
Webフロントエンドの資産、特にReactとTypeScriptの強力なエコシステムをそのまま動画制作に持ち込める点が、非常に面白いアプローチだと感じたので要点をメモしておきます。
Reactで動画を作るというパラダイム
動画制作といえば、Adobe After EffectsのようなGUIツールを操作するのが一般的ですが、「UIをコンポーネントで定義できるなら、動画のタイムラインもコードで定義できるはず」という思想で作られたのが「Remotion」です。
Webフロントエンドの資産、特にReactとTypeScriptの強力なエコシステムをそのまま動画制作に持ち込める点が、非常に面白いアプローチだと感じたので要点をメモしておきます。
核心となる3つの基本概念
Remotionを理解する上で、コアとなる概念は以下の3つに集約されます。
1. Composition（動画の定義）
動画の解像度（縦横のピクセル数）、フレームレート（fps）、総フレーム数（デュレーション）といったメタデータを定義する最小単位です。Reactでいう「画面全体の枠組み」に相当します。
2. Sequence（タイムラインの制御）
動画内の特定の要素が「何フレーム目から何フレーム目まで表示されるか」を制御するコンポーネントです。これにより、動画編集ソフトの「レイヤー」や「タイムライン」の操作を、Reactのコンポーネントの親子関係（ネスト）として宣言的に記述できます。
3. Hooksによる「現在フレーム」の取得
Remotionの最も強力なパーツが useCurrentFrame と useVideoConfig というHooksです。
現在再生されているフレーム番号をリアルタイムに取得できるため、以下のような「時間経過に応じたスタイルの動的変化（アニメーション）」を純粋なJavaScriptのロジックとして記述できます。
// フレーム数に応じて透明度や位置を計算するイメージ
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// 1秒（fps分）かけて徐々にフェードインさせる
const opacity = Math.min(frame / fps, 1);
なぜCSSアニメーションではなくRemotionなのか？
一見すると「通常のWebサイトでCSSアニメーションを動かすのと何が違うのか」と思いがちですが、決定的な違いは「1フレームの決定論的な制御」にあります。
Webブラウザ上のアニメーションは、マシンのスペックや描画負荷によってフレーム落ち（ラグ）が発生します。しかしRemotionは、指定されたフレームごとの状態を厳密にシミュレートし、最終的にサーバーサイド（Puppeteerなどのヘッドレスブラウザ）で1フレームずつ正確に画像としてレンダリングし、それをFFmpegで1本のMP4動画へと結合します。
この仕組みにより、どれだけ複雑なJavaScriptの計算や外部APIからのデータ取得を行っても、最終的に出力される動画は「絶対に音ズレやコマ落ちが起きない」という堅牢性が担保されます。
個人的な使い所の考察
どんな場面でこのツールが武器になるかを考えると、以下のような「動的な動画生成」の領域に強みがあると感じます。
- データドリブンな動画の自動生成: ユーザーごとの年間利用レポート（「あなたの今年のまとめ」のような動画）を、DBのデータをPropsとして流し込んで自動レンダリングする。
- 運用コストの自動化: 技術ブログのアイキャッチ動画や、決まったフォーマットのSNS用ショート動画を、MarkdownやJSONをトリガーにしてバックエンドで量産する。
使い慣れたHTML/CSS、Tailwind、TypeScriptのスキルがそのまま動画制作の自動化パイプラインへと直結する点において、LLM Opsや各種自動化ロジックとの相性も非常に良さそうです。機会を見つけて、自作の自動化ワークフローの中に組み込んで実験してみたいと思います。
