Claude Code + TDD で Electron 製の GIF 編集アプリを作った話
はじめに
macOS で画面録画した GIF を編集したい場面がありました。個人情報にモザイクをかけたり、不要なフレームを削ったりする用途です。既存のツールでも対応できなくはないのですが、自分の用途に特化したシンプルなものがほしくなり、作ることにしました。
GIF ファイルに対してクロップ、モザイク、フレーム削減、フレーム削除を行い、GIF として書き出せるデスクトップアプリを作りました。
Claude Code にテスト駆動開発 (TDD) で実装を進めてもらいました。途中で大きな仕様変更がありましたが、テストが通ることを確認しながら安心して対応できました。 この記事ではその開発体験について書きます。
Claude Code + TDD でどう作ったか
開発は全て Claude Code と対話しながら進めました。
要件定義と計画
まず「こういうアプリが欲しい」という要件を伝え、Claude Code に不明点を質問してもらいました。入力フォーマットは何か、モザイクの適用方法はどうするか、Undo は必要かなど、仕様の曖昧な部分を洗い出してから計画を作成しました。
計画では「懸念はあるか」も確認しました。Undo 時のディスク負荷や、sharp (画像処理ライブラリ) と Electron のネイティブモジュール互換性など、実装前に気づきにくい問題点を事前に検討できた点が良かったです。
TDD サイクル
実装はフェーズごとに TDD で進めました。各フェーズで以下のサイクルを回しています。
- Red: テストを先に書く。当然テストは失敗する
- Green: テストが通る最小限の実装を書く
- Refactor: テストを維持したまま整理する
モザイク処理のフェーズでは、「指定矩形内のピクセルがブロック状に均一化されていること」「矩形外のピクセルが変化していないこと」といったテストを先に定義し、それに合わせて実装しました。
仕様変更への対応
開発途中で「入力を MP4 ではなく GIF にしたい」という仕様変更がありました。通常であれば影響範囲の把握に時間がかかりますが、TDD で進めていたおかげで対応がスムーズでした。
手順は以下の通りです。
- テストフィクスチャをサンプル MP4 からサンプル GIF に変更
- テストの期待値を GIF 前提に書き換え (この時点で全テストが失敗)
- 実装を修正してテストを通す
テストが「何が壊れたか」を正確に教えてくれるため、変更漏れの心配がありませんでした。
途中フレーム削減後に GIF の再生速度が変わってしまうバグが起きましたが、これもテストを追加しスムーズに修正できました。「削減後の GIF の duration が元と同じであること」というテストを書き、FFmpeg のオプション指定を修正して通しています。
技術スタック
| 分類 | 技術 |
|---|---|
| アプリシェル | Electron |
| 言語 | TypeScript (strict) |
| GIF 処理 | FFmpeg (ffmpeg-static) |
| モザイク/クロップ | sharp |
| テスト | Vitest |
Electron の標準的な 3 層構成 (メインプロセス / preload / レンダラ) です。GIF をフレーム単位の PNG に展開し、各フレームに対して編集を直接適用する破壊的編集モデルを採用しています。Undo/Redo はファイルシステム上のスタックで差分バックアップを管理しています。
詳細な実装はリポジトリを参照してください。
まとめ
Claude Code に TDD で実装を任せることで、仕様変更やバグ修正のたびにテストが安全網として機能しました。AI に「先にテストを書いて」と伝えるだけで Red → Green → Refactor のサイクルが回るのは、開発体験として新鮮です。GIF 編集に限らず、Claude Code と TDD を組み合わせる手法は他のプロジェクトにも応用できると感じました。
GitHub リポジトリ: https://github.com/takumi-koshii/simple-gif-editor
