📝

AI駆動開発（Vibe Coding）で作ったテキスト差分ツールSnipDiff

に公開
ChatGPT
Claude
Claude Code
Vibe Coding
idea

はじめに

SnipDiffは、ファイルに保存せずに未保存のテキスト同士を比較できるmacOS向けのデスクトップアプリケーションです。スニペット（コードや文章の断片）を手軽に比較したいという思いから生まれました。

この記事では、SnipDiffを作った背景、機能紹介、そしてClaude Codeを使った「Vibe Coding」での開発プロセスについてご紹介します。

なぜSnipDiffを作ったのか

既存ツールの課題

開発やドキュメント作成をしていると、ちょっとしたテキストの差分を確認したい場面が頻繁にあります。しかし、既存のツールには以下のような課題がありました：

  • 未保存テキストの比較が面倒

    • FileMergeなどの既存ツールは、保存済みファイルを前提としている
    • VSCodeでも比較はできるが、差分比較するのに手間がかかる
    • クリップボードやメモの内容をサッと比較したい

  • オンラインツールのプライバシー懸念

    • オンラインのテキスト比較ツールは多数存在
    • 機密情報ではないとはいえ、サーバーに送信されることに抵抗感
    • ローカルで完結するデスクトップアプリが欲しい

Windows版を作らない理由

WindowsにはWinMergeという素晴らしい差分ツールがあります。そのため、macOS向けに特化して開発することにしました。

Vibe Codingの練習として

「Vibe Coding」（主にClaude Codeを使った対話的な開発）で実際にアプリを作れそうだったので、練習を兼ねてチャレンジしてみることにしました。

以前「conreq」というCLIツールを作りましたが、Goで知見もあったのであまりVibe Coding感がありませんでした。
https://zenn.dev/shiroemons/articles/1f5370b3bd1f9d

今回はElectronのデスクトップアプリなので、知見ほぼなしで挑戦しました。

SnipDiffとは

SnipDiffは、スニペット（断片）だけでも比較できるツールというコンセプトから命名しました。アプリ名はChatGPT5 Thinkingに複数の候補を出してもらい、その中から選定しています。

主な機能

  • 未保存テキストの比較

    • ファイルを保存せずに、左右のエディタに直接テキストを貼り付けて比較
    • クリップボードからの入力にも対応

  • 3つの表示モード

    • Side-by-side: 左右並べて表示（従来の2ペイン形式）
    • Unified: 統合差分表示（GitHubのPR画面のような形式）
    • Compact: コンパクトな差分表示

  • シンタックスハイライト

    • コードの差分を見やすく表示

  • カスタマイズ機能

    • 文字サイズの変更
    • テーマの切り替え（Light/Dark/Auto）

主な用途

メモやドキュメントの変更確認、LLMの出力結果の比較など、さまざまな場面で活用できます。
ファイルを開く機能やエクスポート機能はありません。

インストール方法

Homebrewを使って簡単にインストールできます：

brew install shiroemons/tap/snip-diff

アップデート方法

brew update && brew upgrade shiroemons/tap/snip-diff

動作環境：macOS

初回起動時の注意

初回起動時に警告が表示されます。以下の手順で解除してください：

  1. アプリを起動すると「開発元を確認できないため開けません」という警告が表示されます
  2. システム設定 > プライバシーとセキュリティ を開きます
  3. 「"SnipDiff"は開発元を確認できないため、使用がブロックされました」の横にある 「このまま開く」 ボタンをクリック
  4. 確認ダイアログで 「開く」 をクリック
  5. 以降は通常通り起動できます

使い方

  1. SnipDiffを起動
  2. 左右のエディタに比較したいテキストを貼り付け
    • 直接入力、またはクリップボードから貼り付け
  3. リアルタイムで差分が表示されます

ファイルを開く機能はあえて実装していません。あくまで「未保存テキストの比較」に特化したツールです。

Vibe Codingでの開発プロセス

ここからは、Claude Codeを使った実際の開発プロセスをご紹介します。

開発思想：完璧を目指さず、まず動くものを

Vibe Codingで重要なのは、spec.mdに書かれていることをすべて実装してもらうわけではないという点です。

  • 仕様書の5割くらいの機能ができればOK
  • 中身の詳細なレビューはしない
  • spec.mdはあくまでも足がかり
  • とりあえず目に見えて動くものをまず作ってもらうことが最重要

その後、自分が思い描く機能やUIを指示して修正してもらい、イテレーティブに完成を目指します。

実際の開発フロー

1. 仕様策定フェーズ（ChatGPT5 Thinking）

まず、ChatGPT5 Thinkingに以下を依頼しました：

  • ざっくりとした「作りたい内容」を伝える
  • 簡単な仕様書（spec.md）を生成してもらう
  • アプリ名の候補を複数出してもらう

ここで「SnipDiff」という名前が決まりました。スニペット（断片）だけでも比較できるツールというコンセプトがうまく表現できています。

2. 初期実装フェーズ（Claude Code）

生成されたspec.mdをプロジェクトに保存し、Claude Codeに以下の指示を出しました：

  • spec.mdを確認して、ひたすら機能を作ってもらう
  • 完璧を求めず、まず動くものを優先

結果：欲しかった機能の5割が約2時間で完成しました。

3. イテレーション・改善フェーズ

ここからが本番です：

  • spec.mdに記載されていない機能やUI配置を指示
  • 「この表示をもう少しコンパクトに」「テーマ切り替えを追加」など、具体的な改善を依頼
  • 細かく複雑な実装は、Codex にも任せた
  • Claude Codeのプロンプトを工夫して、望む実装を引き出す

合計約12時間で、満足できるレベルまで完成しました。

開発中の気づき

ツールごとの得意不得意

興味深かったのは、Claude Codeで実装できなかった機能をCodexで実装できたことです。「すごい！」と思いましたが、他の似た機能では逆にCodexが実装できないこともありました。

各AIツールには得意不得意があり、使い分けが重要だと実感しました。

コンテキスト制限との戦い

開発中、Claude Codeはすぐコンテキストがいっぱいになって圧縮処理に入ることが多かったです。

対策として：

  • 指示を簡潔にする
  • 必要な情報だけをspec.mdに書く
  • 大きな機能は小さく分割して依頼

これらの工夫で、なんとか乗り切りました。

アイコン作成

アプリの顔となるアイコンも、AIを活用して作成しました：

  1. Geminiの画像生成機能でアイコン画像を作成
  2. icon.kitchen(Webサービス)でmacOS用のアプリアイコン形式に変換
  3. Claude Codeに指示して、プロジェクトにアイコンを設定

すべてのステップでAIやツールを活用し、デザインスキルがなくてもそれなりのアイコンを作ることができました。

  • Claude Codeが提示してきたアイコン画像作成のプロンプト
    • 英語版を使用してGeminiのNanobananaでアイコン画像生成ガチャをしました
Create an app icon for a macOS application called "SnipDiff".
The app is a text diff viewer with a GitHub-style interface.

Design requirements:
- Modern, minimalist style
- 1024x1024 pixels
- Suitable for macOS app icon (rounded square)
- Color scheme: Use blues and greens (like GitHub's diff colors)
- Include visual elements suggesting comparison or difference
- Flat design or slight gradient
- Professional and clean look

Avoid: too much detail, text, complex illustrations

日本語版：
「SnipDiff」というmacOSアプリのアイコンを作成してください。
このアプリはGitHub風のUIを持つテキスト差分ビューアです。

要件：
- モダンでミニマルなスタイル
- 1024x1024ピクセル
- macOSアプリアイコンに適した形（角丸の正方形）
- 配色：GitHubの差分表示の青と緑を使用
- 比較や差分を連想させる視覚要素
- フラットデザインまたは軽いグラデーション
- プロフェッショナルで洗練された外観

避けるもの：細かすぎる詳細、テキスト、複雑なイラスト

開発を通じて学んだこと

spec.mdは「たたき台」である

最初から完璧な仕様書を作ろうとしない方が、むしろうまくいきます。

  • まず大雑把な仕様を作る
  • 動くものを見ながら改善点を見つける
  • 対話的に機能を追加・修正していく

この柔軟なアプローチが、Vibe Codingの真骨頂だと感じました。

「動くもの」を早く作る

5割の機能でもいいので、まず動くものを作ってもらうことが重要です。

実際に動くものがあれば：

  • 足りない機能が明確になる
  • UIの改善点が見える
  • モチベーションが維持できる

完璧主義を捨てて、小さく始めることが成功のカギでした。

AIツールの使い分け

  • ChatGPT Thinking: 仕様策定、アイデア出し
  • Claude Code: 実装、リファクタリング
  • Codex: 細かい実装の補完
  • Gemini: 画像生成

それぞれのツールの強みを活かすことで、効率的に開発を進められました。

まとめ

SnipDiffは、「未保存テキストを手軽に比較したい」というシンプルなニーズから生まれたツールです。

Vibe Codingを使うことで：

  • 約12時間で実用的なアプリが完成
  • 仕様書は足がかり程度でOK
  • イテレーティブに改善していくスタイルが効果的

完璧を求めず、「まず動くものを作る」という思想が、Vibe Codingの成功につながりました。

もし未保存のテキスト比較に困っている方がいれば、ぜひSnipDiffを試してみてください！

リンク

https://github.com/shiroemons/snip_diff

https://icon.kitchen/

Discussion