JavaScript ではじめる動画制作

Webナイト宮崎 Vol.22 〜てげ推し技術を語りたい〜

2026-07-03 タスク(くすたん)

JavaScript ではじめる動画制作

タスク・くすたん(@qst_exe)

  • 1991年 鹿屋市出身
  • 鹿屋・鹿児島でアプリ開発やってます
  • ヘッジホッグ.exe（同）代表社員 CEO
  • （一社）鹿屋青年会議所 運営幹事
  • 鹿児島.mk オーナー
  • ゴルフ, サウナ, 和太鼓(叩く方)
タスク(くすたん) | @qst_exe
JavaScript ではじめる動画制作

動画作っていますか？

タスク(くすたん) | @qst_exe
JavaScript ではじめる動画制作

デモ

タスク(くすたん) | @qst_exe
JavaScript ではじめる動画制作

Remotion

  • React で動画を作るフレームワーク
  • JSX と CSS がそのまま映像になる
  • 最終的に .mp4 へレンダリング
タスク(くすたん) | @qst_exe
JavaScript ではじめる動画制作

エンジニアと相性がいい

<Title text="鹿屋大好き" />
  • コードなので Git で差分管理できる
  • コンポーネント分割・再利用ができる
  • props を変えるだけで映像を量産できる
タスク(くすたん) | @qst_exe
JavaScript ではじめる動画制作

用途

  • 個人開発のプロモーション動画
  • AI 開発のアウトプット
  • アニメーションが少なめの解説動画
タスク(くすたん) | @qst_exe
JavaScript ではじめる動画制作

所感

  • React が書ければすぐ始められる
  • 量産・再現性が要る場面では便利
  • Claude Code での動画制作は Remotion が最適解になることもある
  • 凝った演出は After Effects に分がある
タスク(くすたん) | @qst_exe
JavaScript ではじめる動画制作

始め方

npm create video@latest
タスク(くすたん) | @qst_exe

お知らせ

VR・メタバース体験会

8/7(金) 鹿児島.mk 7周年LT大大会
GMOペパボ鹿児島

8/9(日) VR体験会
よかど鹿児島

ここでは話さず、まずRemotion製のオープニング映像を流す。 映像が終わってから一言: 「今のこの映像、実はPremiereでもAfter Effectsでもありません。 全部、Reactのコードで作りました。」 → これで会場の「は？」を奪う。