締切が迫る中：Bolt-New vs Windsurf 実戦比較
先週の木曜日、月曜日までにクライアント用の在庫ダッシュボードの機能プロトタイプを構築する必要がありました。クライアントの要望は：検索機能付きリアルタイム在庫テーブル、過去7日間の変動を示すチャート、新しいアイテムを追加するシンプルなフォーム。私の武器は2つ：Bolt-New と Windsurf。同じタスクで両方を連続して使用しました。結果は以下の通りです。
セットアップ
各ツールに同じプロンプトを与えました：
「在庫アイテム（名前、SKU、数量、最終更新日）を表示するテーブルを持つReactダッシュボードを作成してください。テーブルをフィルタリングする検索バーを追加してください。過去7日間の数量変化を示す折れ線グラフを追加してください。名前、SKU、数量フィールドを持つ新しいアイテムを追加するフォームを追加してください。Tailwind CSSを使用してください。」
両方ともデフォルト設定を使用。カスタムプロンプトなし、微調整なし。生の出力のみ。
Bolt-New：最初の試み
Bolt-New はブラウザベースのAIコーディングツールで、自然言語からフルスタックアプリを生成します。クラウドVM上で動作し、アプリが構築される様子をライブで確認できます。
第一印象： Bolt-New はすぐにコード生成を開始しました。Vite を使用したReactアプリを作成し、依存関係をインストールし、約45秒でUIを構築しました。ダッシュボードにはテーブル、検索バー、プレースホルダーチャート領域が表示されました。
うまくいった点：
- テーブルはダミーデータでレンダリングされました。検索で行が即座にフィルタリングされました。
- フォームは下部に3つのフィールドで表示されました。送信するとテーブルに新しい行が追加されました。
- チャートはRechartsを使用して生成されました。ランダムな値を持つ7つのデータポイントが表示されました。
壊れた点：
- 新しいアイテムを追加してもチャートは更新されませんでした。静的で、ロード時に一度だけ生成されました。
- フォームはSKU形式を検証しませんでした。「abc-123」と入力しても受け入れられました。クライアントは厳密な8文字の英数字を要求していました。
- 検索バーは大文字小文字を区別しました。「widget」を検索しても「Widget」が見つかりませんでした。
- 「最終更新日」列はISO形式のタイムスタンプを表示し、「2時間前」のような相対時間ではありませんでした。
修正： 「新しいアイテムが追加されたときにチャートを更新する」と「検索を大文字小文字を区別しないようにする」と入力しました。Bolt-New は関連コンポーネントを再生成しました。チャートは更新されるようになりましたが、検索の修正でバグが発生しました。検索をクリアした後にテーブルに重複行が表示されるようになりました。再び動作させるために「検索クリア後の重複行を修正」と入力する必要がありました。
動作プロトタイプまでの時間： 8分（修正含む）
コード品質： プロトタイプとしては許容範囲。コンポーネントは1つのファイル（App.jsx）にありました。状態管理はuseStateを使用し、コンテキストやリデューサーはありませんでした。チャートコンポーネントは親と密結合でした。
Windsurf：2回目の試み
Windsurf はIDEプラグイン（VS Code / JetBrains）で、「AIペアプログラマー」として機能します。プロジェクト全体を読み取るコンテキスト認識モデルを使用します。
第一印象： Windsurf は完全なアプリを生成しませんでした。代わりにチャットパネルを開き、「どのようなプロジェクト構造にしますか？単一ファイルかマルチコンポーネントか？」と尋ねました。マルチコンポーネントを選択しました。その後、フォルダ構造を生成しました：src/components/Table.jsx、src/components/Chart.jsx、src/components/Form.jsx、src/hooks/useInventory.js、src/App.jsx。
うまくいった点：
- 検索はデフォルトで大文字小文字を区別しませんでした。
- チャートは
useEffectを使用して、在庫リストが変更されたときにデータを再フェッチしました。リアルタイムで更新されました。 - フォームには検証がありました：SKUは正確に8文字、英数字のみ。インラインエラーメッセージが表示されました。
- 「最終更新日」列は
date-fns（formatDistanceToNow）を使用して相対時間を表示しました。 - コードはモジュール化されていました。各コンポーネントは独自のファイルを持ち、状態管理は
useReducerを使用したカスタムフックを使用していました。
壊れた点：
- 初期チャートがレンダリングされませんでした。
useEffectに依存関係が欠けていました。依存配列に[inventory]を追加する必要がありました。 - フォーム送信後、フィールドがクリアされませんでした。ユーザーが手動でクリアする必要がありました。
- テーブルにページネーションがありませんでした。生成された20のダミーアイテムでは問題ありませんでしたが、実際の使用では使えませんでした。
修正： 「チャートの依存関係配列を修正」と「送信後にフォームをクリア」と入力しました。Windsurf はファイル全体を再生成せずにインラインで変更を行いました。また、ページネーションの追加を提案し、受け入れました。ページサイズ10のシンプルな「前へ/次へ」ボタンが追加されました。
動作プロトタイプまでの時間： 12分（修正とページネーション含む）
コード品質： はるかに良好。カスタムフックはクリーンで、コンポーネントは単一責任でした。チャートは別のデータ変換関数を使用していました。
比較表
| 機能 | Bolt-New | Windsurf |
|---|---|---|
| 価格 | 無料版：月5プロジェクト、各ランタイム10分。Pro版：$20/月（無制限プロジェクト、60分ランタイム）。 | 無料版：月50リクエスト。Pro版：$15/月（月500リクエスト）。チーム版：$25/月（無制限リクエスト）。 |
| セットアップ時間 | 0分（ブラウザベース） | 5分（プラグインインストール、プロジェクトを開く） |
| 初回生成 | 45秒 | 2分（構造+ファイル生成） |
