remotion typescript セットアップ 入門 チュートリアル

Remotion TypeScript セットアップ完全ガイド（2026年版）

Read in English →

Remotion TypeScript セットアップ完全ガイド（2026年版）

ReactとTypeScriptを使って動画をコードで生成したい開発者にとって、Remotionは2026年現在で最も実績のあるフレームワークです。このガイドでは、Remotion TypeScriptプロジェクトのセットアップを最初から最後まで丁寧に解説します。インストールから始まり、プロジェクト構成、tsconfig設定、最初のコンポジション作成、そして動画レンダリングまで、一通り動くところまで連れて行きます。

RemotionにTypeScriptを使う理由

RemotionはReactベースのフレームワークです。そしてReact + TypeScriptの組み合わせは、今やフロントエンド開発の標準とも言える選択肢になっています。Remotionの文脈でも、TypeScriptを採用することで具体的なメリットが得られます。

propsの型安全性。 Remotionのコンポジションはコンポーネントのpropsを通じてデータを受け取ります。TypeScriptのインターフェースを定義しておけば、titleに数値を渡したり、必須のプロパティを抜かしたりしたときに、コンパイル段階でエラーが出ます。レンダリングを走らせて初めて気づく——というシチュエーションを避けられます。

RemotionのAPIに対するオートコンプリート。 useCurrentFrame、interpolate、springなどのコア関数はすべて型定義が付属しています。エディタ上で引数の型や戻り値が表示されるため、ドキュメントと行き来する時間が大幅に減ります。

リファクタリングの安心感。 propsの名前を変えたりデータ構造を変更したりしたとき、TypeScriptは影響を受けるすべての箇所を洗い出してくれます。アニメーションロジックが複雑なRemotionプロジェクトほど、この恩恵は大きくなります。

チーム開発での共通言語。 コンポーネントのpropsインターフェースは、そのコンポジションの「仕様書」として機能します。新しくプロジェクトに参加したメンバーも、型を見るだけで各コンポジションが何を期待しているかを把握できます。

事前準備

セットアップを始める前に、以下を確認してください。

  • Node.js 18以上（Node 20 LTSが安定していて推奨）。node -vでバージョンを確認できます。
  • npm 7以上、またはyarn/pnpm。Remotionの公式CLIはいずれのパッケージマネージャーでも動作します。
  • TypeScript対応のエディタ。VS CodeはTypeScript言語サービスが組み込まれているため、追加の設定なしにオートコンプリートや型チェックが使えます。
  • ffmpeg。動画ファイルをローカルでレンダリングするために必要です。macOSならbrew install ffmpeg、Ubuntu系Linuxならsudo apt install ffmpegでインストールできます。ffmpegが見つからない場合、Remotion CLIは警告を出してくれます。

Remotion本体のグローバルインストールは不要です。CLIはnpx経由で動くため、すべてはプロジェクトのローカル依存として管理されます。

プロジェクトの作成

Remotionには公式のプロジェクト雛形生成コマンドが用意されています。ターミナルでプロジェクトを作りたいディレクトリに移動し、以下を実行します。

npx create-video@latest

対話型のプロンプトが起動し、以下を聞かれます。

  1. プロジェクト名（例：my-video）
  2. テンプレートの選択——まっさらな状態から始めるなら「Blank TypeScript」を選ぶのが最もシンプルです

CIやスクリプトなど、対話なしで実行したい場合は次のように引数を渡せます。

npx create-video@latest --yes --blank my-video

雛形の生成が完了したら、依存パッケージをインストールします。

cd my-video
npm install

これだけで、TypeScriptが設定済みのRemotionプロジェクトが手元に用意されます。

プロジェクト構成の解説

雛形が生成されると、次のようなフォルダ・ファイル構成が作られます。

my-video/
├── src/
│   ├── index.ts          # エントリーポイント（コンポジション登録）
│   ├── Root.tsx          # ルートコンポーネント
│   └── MyComposition.tsx # 最初のコンポジション
├── remotion.config.ts    # Remotion設定ファイル
├── tsconfig.json         # TypeScript設定
├── package.json
└── package-lock.json

src/index.ts — エントリーポイント。 RemotionのCLIはこのファイルを最初に読み込みます。役割は一つだけ：registerRootにルートコンポーネントを渡してRemotionに登録することです。

src/Root.tsx — コンポジションのレジストリ。 <Composition>要素をここに並べます。各<Composition>には、コンポジションのID、解像度、フレームレート、尺、対応するReactコンポーネントを指定します。

remotion.config.ts — Remotion設定。 必須ではありませんが、webpackの設定変更やレンダリング時の並列数の調整など、プロジェクト固有のカスタマイズをここで行います。Remotion CLIが起動時に自動的に読み込みます。

tsconfig.json — TypeScript設定。 RemotionのバンドラーがJSXを正しくコンパイルするために、いくつかの設定が必要です。次のセクションで詳しく見ていきます。

TypeScript設定（tsconfig.json）

tsconfig.jsonを開いてください。Remotionで動作する最小構成は以下のようになります。

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "lib": ["ES2022", "DOM"],
    "skipLibCheck": true
  },
  "include": ["src"]
}

Remotionにとって特に重要なのは以下の設定です。

  • "jsx": "react-jsx" — 最新のJSX変換を使用します。各ファイルにimport React from 'react'を書く必要がなくなります。
  • "strict": true — 全ての厳格チェックを有効にします。これによりpropsの型エラーを確実に検出できます。
  • "moduleResolution": "bundler" — Remotionのwebpackベースのバンドラーがモジュールを解決する方法と一致させます。
  • "isolatedModules": true — ファイル単位のコンパイルを正しく処理するために必要です。

雛形から作ったプロジェクトならこれらはすでに設定されています。既存のTypeScriptプロジェクトにRemotionを追加する場合は、上記の設定と照らし合わせて確認してください。

最初のコンポジション：propsに型をつける

src/MyComposition.tsxを開きます。以下は、型付きpropsを最初から最後まで使った最小構成のサンプルです。

import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";

// 1. コンポジションのpropsをインターフェースで定義する
interface MyCompositionProps {
  title: string;
  backgroundColor: string;
}

// 2. コンポーネントの型パラメータにインターフェースを渡す
export const MyComposition: React.FC<MyCompositionProps> = ({
  title,
  backgroundColor,
}) => {
  const frame = useCurrentFrame();

  // interpolateでフレーム番号を出力値（ここでは透明度）にマッピング
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <h1 style={{ opacity, color: "white", fontSize: 64 }}>{title}</h1>
    </AbsoluteFill>
  );
};

このコンポジションをsrc/Root.tsxに登録します。

import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="MyComposition"
        component={MyComposition}
        durationInFrames={90}
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          title: "こんにちは、Remotion！",
          backgroundColor: "#0f172a",
        }}
      />
    </>
  );
};

defaultPropsはMyCompositionPropsインターフェースを満たしている必要があります。型が合わなければTypeScriptがエラーを出します。これが型付きコンポジションの最大の価値です。

Remotion Studioでプレビューする

Remotion Studioは、ブラウザ上で動作する開発用プレビュー環境です。タイムラインをスクラブしたり、propsをライブ編集したり、特定のフレームを静止画で確認したりできます。

次のコマンドで起動します。

npm run dev

内部的にはnpx remotion studioが実行されます。デフォルトでhttp://localhost:3000が開きます。左パネルにコンポジションが一覧表示され、クリックするとプレビューが開きます。

Studioでできること：

  • プレイヘッドをドラッグしてフレームを手動で確認
  • 右側のPropsエディタでdefaultPropsの値をリアルタイム編集
  • コンポーネントファイルを変更するとホットリロードで即座に反映

Studioは開発・確認用の環境であり、出力ファイルは生成しません。

動画をレンダリングする

プレビューで問題がなければ、CLIで動画ファイルを書き出します。

npx remotion render src/index.ts MyComposition out/video.mp4

コマンドの内訳：

  • src/index.ts — エントリーポイントのファイルパス
  • MyComposition — <Composition id="MyComposition" />で指定したID
  • out/video.mp4 — 出力先のファイルパス（out/ディレクトリは自動的に作成されます）

Remotionはヘッドレスブラウザを起動してフレームごとにスクリーンショットを撮影し、ffmpegを使って指定したフレームレートのMP4に結合します。

よく使う場合はpackage.jsonのスクリプトに登録しておくと便利です。

"scripts": {
  "dev": "remotion studio",
  "render": "remotion render src/index.ts MyComposition out/video.mp4"
}

以降はnpm run renderで実行できます。

MP4以外のフォーマット

GIFに書き出す場合：

npx remotion render src/index.ts MyComposition out/animation.gif

連番PNGに書き出す場合：

npx remotion render src/index.ts MyComposition out/frames/ --sequence

次のステップ

基本的な環境が整ったら、次のような方向性でプロジェクトを発展させていけます。

コンポジションを増やす。 Root.tsxに<Composition>を追加するだけで、複数の動画を一つのプロジェクトで管理できます。各コンポジションに独立したpropsインターフェースとコンポーネントを持たせることができます。

spring()で自然な動きを作る。 spring()ヘルパーは物理ベースのアニメーション値を生成します。interpolateによる線形補間と比べて、より自然な減速感が得られます。

<Sequence>でタイミングを制御する。 <Sequence>コンポーネントを使うと、子コンポーネントが開始するフレームをオフセットして指定できます。複数のアニメーションパーツを時系列で組み合わせるときに便利です。

実データを流し込む。 コンポジションは通常のReactコンポーネントなので、データをpropsとして渡せます。JSONデータをもとにグラフ動画を生成したり、パーソナライズされた動画を量産したりすることも可能です。

既成のTypeScriptテンプレートを活用する。 アニメーションを1から設計するのは時間がかかります。RenderCompでは、ロワーサード、タイトルカード、データビジュアライゼーション、SNS向けテロップなど、即戦力のRemotionテンプレートを提供しています。

よくある質問

Q：RemotionにはReactの知識が必要ですか？ A：はい。Remotionのコンポジションは通常のReact関数コンポーネントです。フックとJSXの基礎が分かれば始めるには十分です。深いReactの専門知識は不要で、ほとんどの作業はアニメーションロジックとスタイリングが中心になります。

Q：TypeScriptを使わずにRemotionを使えますか？ A：使えます。.tsxの代わりに.jsxファイルを使い、tsconfig.jsonを削除すれば動作します。ただし、Remotionチームもコミュニティも、型の恩恵を受けられるTypeScriptを強く推奨しています。

Q：レンダリングにはどれくらい時間がかかりますか？ A：コンポジションの複雑さとマシンのスペックによります。シンプルな30秒・1080pの動画なら、一般的なノートPCで2〜5分程度が目安です。本番スケールのレンダリングには、AWSのLambdaを使って並列処理するRemotion Lambdaの活用を検討してください。

Q：「ffmpeg not found」エラーが出ます。 A：ffmpegがインストールされていないか、PATHが通っていない状態です。macOSならbrew install ffmpeg、Ubuntu/Debianならsudo apt install ffmpegでインストールしてください。Windowsの場合はffmpeg公式サイトからビルドをダウンロードし、bin/フォルダをPATH環境変数に追加してください。

Q：日本語フォントは使えますか？ A：使えます。ローカルのフォントファイルを@font-faceでコンポーネント内のスタイルに定義するか、@remotion/google-fontsパッケージを使う方法があります（このパッケージはフォントをローカルにバンドルするため、レンダリング時に外部へのリクエストは発生しません）。システムフォントをCSSのfont-familyで直接指定することも可能です。

Q：Studio起動中にコードを変更したらすぐ反映されますか？ A：はい。.tsxファイルへの変更はホットリロードにより自動的に反映されます。手動でページを更新する必要はありません。

Q：Remotionのバージョンは何を使えばいいですか？ A：npm create video@latestで作成したプロジェクトは常に最新の安定版が使われます。remotion、@remotion/cli、@remotion/playerなどはすべて同じバージョンである必要があります。雛形生成コマンドはこれを自動的に揃えてくれます。

ボイラープレートを省略するなら RenderComp のテンプレートを

Remotion TypeScriptの環境構築はここまでで完了ですが、実際に「使えるコンポジション」を1から作るとなると、デザイン、アニメーションのパラメータ調整、エッジケースの処理など多くの時間が必要になります。

RenderComp の TypeScript テンプレートは、そのプロセスをショートカットします。各テンプレートにはJSDocコメント付きの型定義済みpropsインターフェース、inputPropsでの上書きに対応したデフォルト設定、1080p・4K両対応のレイアウトが含まれており、プロジェクトにそのままドロップして使えます。

RenderComp の TypeScript テンプレートを見る →

すぐに使える

1,400以上のRemotionテンプレートを一括入手

買い切り永続ライセンス。TypeScript製。今日から動画制作スピードが変わります。

RenderCompを試す →