Reactで作ると、動画はただの『時間軸を持ったDOM』だった。Remotionというフレームワーク

「動画編集」と聞くと、あなたは何を想像しますか？ 重い動画編集ソフトを開き、素材を並べ、エフェクトを当て、マウスで細かい調整を繰り返す……そんな光景でしょうか。
しかし、もしその「素材」のすべてが、HTMLやCSSで制御できる「Webの部品」だとしたら？

私にとって、動画はもう「特別な聖域」ではありません。 Reactエンジニアというフィルターを通して動画を見た時、それはただの『時間軸を持ったDOM』に過ぎなかったのです。
 

「ブラックボックス」の蓋を開ける

まず、この一枚の画像を見てください。

これは、動画を再生している画面……ではありません。ブラウザの「検証」ツールで、動画内の要素を覗き込んでいる様子です。

右側に出ている element.style を見てください。

私たちが普段、Webサイトを作る時に使っている、あの慣れ親しんだコードがそのままそこにあります。

これまで、動画編集ソフトにおいて「書き出し後のMP4」はブラックボックスでした。一度完成してしまえば、中身に直接触れることはできない。
しかしRemotionというフレームワークに触れた瞬間、動画は

私が経験した「3つの決定的体験」

この体験は、開発者として非常にエモーショナルなものでした。
1. 「動画編集」の定義が書き換わる瞬間
Premiere Proのタイムライン上で、マウスをドラッグして微調整する作業。あれは、一種のアナログな身体操作でした。 しかし、

Math.sin(frame / 10) 

と打ち込んだ瞬間にテキストが波打つ様子を見た時、背筋がゾクっとしました。 動画とは「素材の切り貼り」ではなく、「フレーム（時間）を変数とした関数の戻り値」なのだと。数式でピクセルをねじ伏せる、この快感はコードを書く人間にしか分かりません。

2. いつもの「道具（VS Code）」が使える解放感
専用の重い編集ソフトを立ち上げる必要はありません。いつものVS Code、いつものCopilot、いつものGitHub。 手に馴染んだエディタだけで、動画という世界を支配できる。このツール選定の「正当性」は、開発者にとって最強の武器になります。

3. 「1本」ではなく「1万本」の気配
ここが最大の衝撃かもしれません。 コード（props）を1行書き換えるだけで、動画の内容がガラリと変わる。 これまで1本の動画を作るのに費やしていた苦労は、Remotionを使えばそのまま「無限に動画を生み出すための工場」の設計図になります。

「動画にgit commitができる」という美学

エンジニアがこの技術に魅了される最大の理由は、

動画制作の修正履歴が、バイナリファイルの肥大化ではなく、「美しいコードの差分（Diff）」として残る。 マウスの微調整という「曖昧さ」を、コードという「厳密な数学」で置き換える。 Web屋にとって、この環境は新大陸ではなく、慣れ親しんだ庭の拡張なのです。

最後に

もちろん、コードをブラックボックスとして扱う人には、この先にある「API連携」や「n8nとの統合」による無限の自動化の可能性は見えないかもしれません。それは仕方のないことです。

しかし、今回

「Hello World」

をビルドして確信しました。

Remotionは、決して単なる「動画を作るツール」ではありません。 「動画を生成するシステムを構築するためのフレームワーク」なのです。

もしあなたが、画面の向こう側に「ただの動画」ではなく「コードの鼓動」を感じ取れるなら。 ぜひ、この新しい庭に遊びに来てください。

#Remotion #動画生成 #フロントエンド開発 #React #生成AI #道具道