先週の火曜日、私はリアルタイムの共同ドキュメントエディタ（簡易版Google Docsのようなもの）を構築する必要がありました。操作変換、アンドゥ/リドゥ、ライブカーソル機能を備えたものです。v0（Vercel製）とCline（オープンソースのVS Code拡張機能）のどちらを使うか決める必要がありました。各ツールに6時間ずつ費やし、同じ機能セットを構築しました。以下は、苦痛を伴う詳細を含めて学んだことです。
概要：それらは何か？
v0 はVercelの生成UIツールです。プロンプトを与えると、Tailwind CSS、shadcn/ui、そして多くの場合完全なページレイアウトを備えたReactコンポーネントを生成します。クラウドホスト型で、ローカル設定は不要です。フロントエンド向けの「デザインからコードへ」のツールと考えてください。
Cline はオープンソースのVS Code拡張機能で、LLM（Claude、GPT-4など）と統合してコードベースを直接編集します。プロジェクトのコンテキストを読み取り、ファイルを作成/変更し、ターミナルコマンドを実行し、デバッグも可能です。エディタ内に常駐するAIペアプログラマーのようなものです。
| 機能 | v0 | Cline |
|---|---|---|
| 料金 | 無料枠：月200クレジット（1クレジット＝1生成）。Pro：月20ドルで1000クレジット。Enterprise：カスタム。 | 無料かつオープンソース。自身のLLM APIキーの費用を支払います（Claude Sonnet 約3ドル/100万トークン、GPT-4o 約5ドル/100万トークン）。セルフホスト。 |
| 主な用途 | フロントエンドUI生成（React、Next.js、Tailwind） | フルスタックコード編集、デバッグ、ターミナルコマンド、ファイル操作 |
| 出力スタイル | 単一ファイルコンポーネントまたはページ（ワンショット生成） | 複数ファイルの修正、差分ベースの変更、反復編集 |
| コンテキスト認識 | プロンプトのみ（コードベースにアクセス不可） | 完全なプロジェクトコンテキスト（ファイルを読み取り、インポート、型などを認識） |
| 対応フレームワーク | React、Next.js、Tailwind、shadcn/ui | 任意のフレームワーク（Python、Rust、Go、JS/TSなど） |
| リアルタイムコラボレーション | なし | なし（ただしgitのターミナルコマンドは実行可能） |
| エラーハンドリング | プレビュー表示、コードのコピペが可能 | テストの再実行やエラーログの読み取りによる自動修正が可能 |
| レイテンシ | 生成あたり約5～15秒（サーバーサイド） | LLMプロバイダに依存：Claude 約3～8秒、GPT-4o 約5～12秒 |
| ローカルファイルアクセス | なし（ブラウザで実行） | 完全なローカルファイルシステムアクセス（読み取り/書き込み/実行） |
| バージョン管理 | 手動コピペ | 自動gitコミット（オプション） |
| 最適な用途 | 迅速なプロトタイピング、ランディングページ、デザイン探索 | 複雑なリファクタリング、デバッグ、マルチステップワークフロー |
シナリオ：コラボレーションエディタの構築
v0を使用
私は次のように始めました：「操作変換、アンドゥ/リドゥ、ライブカーソルを備えた共同ドキュメントエディタ用のReactコンポーネントを構築してください。Tailwind、shadcn/ui、Next.js App Routerを使用してください。」
v0は単一の CollaborativeEditor.tsx ファイル（約400行）を返しました。ローカル状態に useState、モックWebSocketに useEffect、そして applyOperation と transform 関数を使った基本的なOT実装を使用していました。UIはきれいで、shadcnの Textarea にカーソルオーバーレイが付いていました。
うまくいった点：
- 初期UIは洗練されていました。カーソル位置はテキストエリア上に色付きのdivとしてレンダリングされていました。アンドゥ/リドゥスタックは単純なスナップショット配列として実装されていました。
- Tailwindクラスは構造化されていました。繰り返しパターンに
@applyを使用していました。 - モックWebSocketコードは実際の統合のための良い出発点でした。
失敗した点：
- OT実装は単純でした。単一位置での挿入/削除のみを処理し、範囲は処理しませんでした。同時編集でテストすると、文字が失われました。
- WebSocket再接続のエラーハンドリングがありませんでした。モックは5秒後に閉じました。
- コンポーネントは自己完結型で、関心の分離がありませんでした。OTロジックがUI状態と混在していました。
- 反復できませんでした。v0には「このファイルを編集」モードがありません。新しいプロンプトごとに新しいコンポーネントが生成されます。変更を手動でマージする必要がありました。
- コードはそのままではコンパイルできませんでした。Next.jsサーバーコンポーネントに存在しない
crypto.randomUUID()をインポートしていました。3つのインポートエラーを修正する必要がありました。 - テストがありませんでした。v0はテストファイルを生成しません。
本当の欠点： v0はワンショットツールです。OTのような複雑な機能には反復的な改良が必要です。v0はコピペと手動統合を強制します。生成されるコードは見栄えが良いですが、ロジックが浅いです。
Clineを使用
Clineにも同じタスクを与えましたが、私はすでにNext.jsプロジェクトをセットアップしていました。VS Codeを開き、Cmd+Shift+P を押して「Cline: Start New Task」を選択し、次のように言いました：「共同ドキュメントエディタが必要です。OT、アンドゥ/リドゥ、カーソル追跡用のファイルを含む新しいフォルダ lib/editor/ を作成してください。次に、それらを使用するReactコンポーネントを作成してください。TypeScript、厳密な型を使用し、Vitestで単体テストを追加してください。」
Clineは私の package.json を読み取り、vitest がインストールされていることを確認し、作業を開始しました。
Clineが段階的に行ったこと：
lib/editor/types.tsを作成し、Op、Cursor、Documentインターフェースを定義。lib/editor/ot.tsを作成し、transform、compose、apply関数を実装。標準のOTアルゴリズム（PJ97スタイル）を使用。lib/editor/undo.tsを作成し、逆操作のスタックを実装。lib/editor/cu...
