🔧
Remotionトラブルシューティング — よく発生するエラーと解決法
レンダリング速度低下、delayRenderタイムアウト、useState無限ループなど実践エラー集
Remotion開発でよく遭遇するエラーと解決法をまとめました。
1. レンダリングが遅い: --concurrencyを増やすかRemotion Lambdaを使用。
2. delayRenderタイムアウト: 必ずcontinueRender(handle)を呼び出す — catchブロック内でも。
3. useState無限ループ: Remotionは毎フレーム再レンダリングするため、useStateが無限ループを誘発。useCurrentFrame() + interpolate()を代わりに使用。
4. CSSアニメーションが動かない: Remotionは各フレームを独立してレンダリングするため、CSSトランジションと同期しない。spring()とinterpolate()を使用。
5. Lambdaでチラつき: concurrencyを下げる、ローカルで先に確認、Remotionバージョンを最新に更新。
動作フロー
1
エラーメッセージを確認: delayRender、too many renderings、timeoutなどキーワードで原因特定
2
useState使用有無を確認: フレームベースの値は必ずuseCurrentFrame() + interpolate()で代替
3
delayRender呼び出し確認: すべての分岐（成功/失敗）でcontinueRender()が呼ばれるか検証
4
CSSアニメーション/transition使用有無を確認: Remotion APIに置換
5
レンダリング速度問題時は--concurrencyオプションまたはLambda導入を検討
メリット
- ✓ ほとんどのエラーがパターン化されているため解決が速い
- ✓ Remotion Studioで問題フレームを特定してデバッグ可能
デメリット
- ✗ Lambda関連の問題はAWSインフラ知識が必要で解決が難しい場合がある
ユースケース
Remotion入門者が経験するよくある間違いの解決
プロダクション環境でのレンダリング安定性確保