🎬
Remotion — Reactでビデオを作るフレームワーク
JSXコンポーネントがそのままビデオフレームになるプログラマティックビデオ生成
Remotionは2021年にJonny Burgerが作ったオープンソースプロジェクトで、Reactエコシステムのコンポーネントベースの考え方をそのままビデオ制作に適用します。
コアアイデアはシンプルです：時間（frame）をpropsとして受け取るReactコンポーネントがそのままビデオです。30fpsビデオではフレーム0〜29が最初の1秒、30〜59が2秒目…各フレームをReactでレンダリングした後FFmpegでエンコードします。
従来のビデオ編集ツール（Premiere、After Effects）との決定的な違いはプログラマティック制御です。データベースから1000件の商品情報を読み取り1000本のプロモーションビデオを自動生成したり、APIレスポンスに応じてビデオ内容を動的に変えることが自然にできます。
TypeScript/React開発者なら新しいツールを学ぶ必要なく、既存のスキルセットですぐにビデオを作れる点が最大の利点です。
動作フロー
1
Reactコンポーネントを作成しuseCurrentFrame()で現在のフレーム番号を取得
2
フレーム番号に応じて位置・透明度・サイズなどスタイルを計算 → アニメーション表現
3
Remotion Studio（localhost:3000）でリアルタイムプレビュー + タイムラインスクラブ
4
npx remotion renderで各フレームをHeadless Chromeでスクリーンショット → FFmpegでMP4エンコード
メリット
- ✓ Reactエコシステムをそのまま活用: npmパッケージ、コンポーネントライブラリ、TypeScript型安全性
- ✓ Gitバージョン管理: ビデオプロジェクトをコードで管理するためdiff、PRレビュー、ロールバック可能
- ✓ 無限スケーリング: Lambdaで数千本のビデオを並列レンダリング可能
- ✓ リアルタイムプレビュー: Remotion StudioでHMRによる即座の変更確認
デメリット
- ✗ 学習コスト: Reactを知らないと参入障壁が高い
- ✗ レンダリング速度: フレームごとにHeadless Chromeスクリーンショット → 1分のビデオに数分かかる
- ✗ ライセンス: 企業向け機能（Lambda等）は有料ライセンスが必要
- ✗ 実写映像編集には不向き: プログラマティックグラフィック/モーションに特化
ユースケース
SaaS製品にビデオ生成機能を内蔵（ユーザーがテンプレート選択 → ビデオ自動生成）
データ駆動の大量ビデオ: 商品カタログ → 商品別プロモーションビデオ1000本自動生成
GitHub Actions/CIでリリースノートビデオ自動生成
SNSコンテンツ: 毎日の株価サマリー、天気レポートなど反復ビデオの自動化
教育コンテンツ: 数学公式の可視化、アルゴリズム説明アニメーション