🔍

【実験1：実装力】Claude Code/Gemini/Codex/Cursor/Amp/Droidに同じアプリを実装させてみた

2025/10/28に公開

 はじめに：期待と現実「複数のAIを協業させれば、単一AIより良いものができるだろう」——そう信じて、7つのAIでポモドーロTODOアプリを実装させる実験を行いました。
しかし、蓋を開けてみると、予想外の結果が待っていました。
※ 本記事は筆者のアイデアを元に生成AI（Claude）が自動作成したものです。必要に応じて追加の確認や調査を推奨します。

 この記事で分かること7つのAI実装の品質差（最高86.7点 vs 最低41.7点／100点満点）
2つのAIが作ったアプリに重大なXSS脆弱性
Multi-AI協業は2位止まり（改善の余地あり）
パフォーマンス最適化の有無で体感速度が3倍変わる

 実験設計：7つのAIに同じ要件を渡す
 参加AI

AI
説明


Multi-AI
Claude + Gemini + Qwen + Droid + Codex + Cursor + Amp の7AI協調

**Claude **
Anthropic Claude Sonnet 4.5 単独

**Gemini **
Google Gemini Pro 単独

**Codex **
OpenAI Codex 単独

**Qwen **
Alibaba Qwen Code 単独（※）

**Droid **
Factory AI Droid 単独

**Cursor **
Cursor AI 単独

**Amp **
Amp Code 単独

※ Qwen はMulti-AI協業の一部として実装したため、今回の分析対象から除外

 実験で使用した文書1. 要件定義書（1,196行）
7つのAIすべてに共通で渡した詳細な仕様書：
必須機能（Todoリスト、ポモドーロタイマー、統合機能）
追加機能（優先度順）
技術要件（HTML5 + CSS3 + Vanilla JavaScript）
非機能要件（パフォーマンス、アクセシビリティ）
UI/UXデザイン要件（レイアウト、カラースキーム）
データ構造（Task、Timer、Settings）
評価基準（100点満点）
制約事項（総行数700行以内、外部ライブラリ禁止）
2. 実装計画書（764行）
これが重要なポイントですが、この実装計画書はMulti-AIが作成したものです：
Phase 0: プロジェクト設定とアーキテクチャ設計
Phase 1: 技術設計とベストプラクティス調査
Phase 2: 並列実装（HTML、CSS、JavaScript）
Phase 3: コードレビュー
Phase 4: テストと最適化
⚠️ 実験のバイアスについて
正直に言うと、この実験設計には潜在的なバイアスがあります：
Multi-AIが実装計画書を作成
その計画書を元に7つのAI全員が実装
つまり、Multi-AIの「設計思想」が計画に反映されている可能性
このバイアスが結果にどう影響したかは不明ですが、完全に公平な比較とは言えない点は認識しています。より公平な実験のためには、各AIが独自に計画を作成する必要があるでしょう。

 共通要件タスク管理（追加・編集・削除・完了）
25分作業タイマーと5分休憩
ポモドーロ見積と実績記録
LocalStorageによるデータ永続化
シングルファイルHTML（外部ライブラリなし）
制約：総行数700行以内

 評価基準（100点満点）

評価軸
配点


セキュリティ
16.7点

パフォーマンス
16.7点

保守性
16.7点

アクセシビリティ
16.7点

エンタープライズ適合性
16.7点

ユーザー体験
16.7点


 結果：予想外のランキング
 総合スコア（100点満点）

順位
実装
スコア
状態


🥇
**Droid **
86.7/100
✅ 本番推奨

🥈
Multi-AI
81.7/100
✅ 協調開発推奨

🥉
**Codex **
78.3/100
✅ 中規模推奨

4位
Amp
71.7/100
⚠️ 改善推奨

5位
Cursor
60.0/100
⚠️ プロトタイプのみ

6位
Claude
50.0/100
❌ XSS脆弱性

7位
Gemini
41.7/100
❌ Critical XSS


正直な感想: Multi-AI協業が1位になると思っていましたが、Droid に5点差で2位でした。複数AIを使えば自動的に良くなるわけではない、という現実を突きつけられた結果です。

 カテゴリ別詳細スコア

実装
セキュリティ
パフォーマンス
保守性
アクセシビリティ
エンタープライズ
UX
合計


Droid
15.0
15.0
15.0
16.7
15.0
10.0
86.7

Multi-AI
13.3
13.3
13.3
15.0
13.3
13.3
81.7

Codex
13.3
15.0
13.3
10.0
13.3
13.3
78.3

Amp
11.7
11.7
11.7
11.7
10.0
15.0
71.7

Cursor
11.7
10.0
8.3
8.3
8.3
13.3
60.0

Claude
5.0
6.7
8.3
6.7
6.7
16.7
50.0

Gemini
3.3
5.0
6.7
5.0
5.0
16.7
41.7


 最大の発見：2つのAIに重大なセキュリティ脆弱性実験で最も衝撃的だったのは、Claude とGemini にStored XSS脆弱性が見つかったことです。

 Gemini ：Critical XSS（CVSSスコア 8.1）脆弱なコード:
// 4-gemini-/output/app.js:230-236
const title = document.createElement("span");
title.className = "task-title-text";
title.innerHTML = task.title;  // ❌ 危険：ユーザー入力をそのまま挿入
攻撃シナリオ:
// 攻撃者がタスク名に以下を入力
<img src=x onerror=alert(document.cookie)>

// 結果: 全ユーザーのセッションCookieが盗まれる
これは初歩的なミスです。innerHTMLにユーザー入力を渡すと、HTMLタグがそのまま実行されてしまいます。
正しい実装:
// ✅ 安全：textContentを使う
title.textContent = task.title;

 Claude ：Stored XSS（CVSSスコア 7.5）Claude も同様の脆弱性がありました。これには正直ショックを受けました。AIによるコード生成を過信してはいけない、という教訓です。

 安全な実装（5つ）逆に、以下の5つの実装はセキュアでした：
**Droid **: 完璧なセキュリティ実装

Multi-AI: Geminiのセキュリティレビューが効いた
**Codex **: 適切なtextContent使用
**Amp **: 安全なDOM操作
**Cursor **: セキュアなパターン
Multi-AI協業の効果:
Geminiが単独で実装するとXSS脆弱性を作るのに、Multi-AI協業ではGeminiのセキュリティレビューが機能して脆弱性を防げた
DocumentFragmentの実装も正しく行われ、パフォーマンス最適化も達成
複数AIの相互レビュー効果が明確に表れた結果です

 パフォーマンス：3倍の差
 DocumentFragmentの有無実装している実装（高速）:
Droid 、Codex 、Multi-AI
実装していない実装（低速）:
Amp 、Claude 、Gemini 、Cursor

 高速な実装（Droid 、Codex 、Multi-AI）// ✅ 高速：DocumentFragmentを使う
const fragment = document.createDocumentFragment();
tasks.forEach(task => {
    const li = buildTaskItem(task);
    fragment.appendChild(li);
});
taskList.appendChild(fragment);  // 1回のDOM操作
効果: 100個のタスクを表示する場合、リフロー回数を1回に削減（通常は100回）
Multi-AIの実装例（Line 236-258）:
function renderTasks(withAnimation = false) {
  // Use DocumentFragment to batch DOM operations for better performance
  const fragment = document.createDocumentFragment();  // ✅ 実装済み
  elements.taskList.textContent = '';

  getTasksByFilter().forEach((task) => {
    const item = createTaskItem(task);
    if (withAnimation) {
      item.classList.add("entering");
      item.addEventListener("animationend", 
        () => item.classList.remove("entering"), 
        { once: true }
      );
    }
    fragment.appendChild(item);  // ✅ Fragment使用
  });

  elements.taskList.appendChild(fragment);  // ✅ 1回のDOM操作
}
Multi-AIの特徴:
✅ DocumentFragmentを正しく使用
✅ コメントで意図を明確化
⚠️ アニメーション処理は改善余地あり（各アイテムに個別リスナー）

 低速な実装（Amp 、その他）// ❌ 低速：ループ内でDOM操作
tasks.forEach(task => {
    const li = buildTaskItem(task);
    taskList.appendChild(li);  // 毎回リフローが発生
});
体感速度: DocumentFragment使用で約3倍高速化

 タイマーの精度タイムスタンプベース（正確）:
// ✅ 正確：システム時刻を基準にする
const elapsed = Math.floor((Date.now() - startedAt) / 1000);
remainingTime = duration - elapsed;
setInterval単独（不正確）:
// ❌ 不正確：タブを切り替えると時刻がずれる
setInterval(() => remainingTime--, 1000);
タブを切り替えるとsetIntervalは遅延するため、タイムスタンプベースが推奨されます。

 Multi-AI協業の効果と限界
 効果があった部分1. セキュリティ向上
Gemini単独: XSS脆弱性（3.3/16.7点）
Multi-AI協業: セキュア（13.3/16.7点）
Geminiのセキュリティレビューが機能し、他のAIが作った脆弱性を検出できました。
2. アクセシビリティ向上
単独AI平均: 8.3/16.7点
Multi-AI: 15.0/16.7点
+81%の改善
Droidの専門性が活かされ、ARIA属性やセマンティックHTMLが適切に実装されました。
3. ドキュメント充実
単独AI平均: 8.3/16.7点
Multi-AI: 11.7/16.7点
+41%の改善
Ampがドキュメント作成を担当し、コメントやREADMEが充実しました。

 限界があった部分1. パフォーマンス最適化
Codex : 15.0/16.7点（DocumentFragment + アニメーション最適化）
Multi-AI: 13.3/16.7点（DocumentFragment実装済み、アニメーション改善余地）
単独AIに僅差

 各実装の特徴
 🥇 Droid ：エンタープライズの完成形（86.7/100点）強み:
WCAG 2.1 AA完全準拠（16.7/16.7点）
DocumentFragment使用（高速）

<dialog>要素の適切な使用
30日履歴データ管理
弱み:
UIデザインがやや質素（10.0/16.7点）
推奨ユースケース: 金融、医療、行政など、コンプライアンスが重要な環境
実装例:
// ARIA対応の例
checkbox.setAttribute("aria-label", `${task.title} を完了にする`);

// dialog要素の使用
const dialog = document.getElementById("confirm-dialog");
dialog.showModal();  // モダンAPIの活用

 🥈 Multi-AI：協業の可能性と課題（48点）強み:
セキュリティ向上（Geminiレビュー）
アクセシビリティ充実（Droidの専門性）
ドキュメント充実（Ampの貢献）
弱み:
パフォーマンス最適化漏れ
開発時間+80%
意思決定のオーバーヘッド
推奨ユースケース: 品質を最優先し、開発時間に余裕がある場合
開発プロセス:
1. Claude: アーキテクチャ設計
2. Gemini: セキュリティレビュー
3. Qwen: 高速実装
4. Droid: エンタープライズ機能追加
5. Codex: コードレビュー
6. Cursor: IDE統合
7. Amp: ドキュメント作成

 🥉 Codex ：バランスの良さ（78.3/100点）強み:
DocumentFragment使用（高速）
セキュアな実装（13.3/16.7点）
バランスの良い品質
弱み:
アクセシビリティ不完全（10.0/16.7点）
推奨ユースケース: スタートアップ、中小企業など、バランス重視の環境

 Amp ：UXの追求（71.7/100点）強み:
最高のUXデザイン（15.0/16.7点）
優れたドキュメント（13.3/16.7点）
弱み:
パフォーマンス最適化不足（11.7/16.7点）
アクセシビリティ改善余地（11.7/16.7点）
推奨ユースケース: デザイン重視のプロトタイプ

 Cursor ：モダンデザイン（60.0/100点）強み:
モダンなUIデザイン（13.3/16.7点）
軽量な実装
弱み:
機能不足
アクセシビリティ欠如（8.3/16.7点）
推奨ユースケース: 簡易的なプロトタイプ

 Claude ：UXは良いが脆弱（50.0/100点）強み:
優れたUIデザイン（16.7/16.7点）
弱み:

Stored XSS脆弱性（5.0/16.7点）
パフォーマンス低い（6.7/16.7点）
状態: ❌ 本番使用禁止（パッチ適用必須）

 Gemini ：Critical脆弱性（41.7/100点）強み:
モダンなUIデザイン（16.7/16.7点）
弱み:

Critical XSS脆弱性（3.3/16.7点）
パフォーマンス最低（5.0/16.7点）
アクセシビリティ欠如（5.0/16.7点）
状態: ❌ 本番使用絶対禁止

 推奨シナリオ
 🏢 エンタープライズ本番環境 → Droid理由:
WCAG 2.1 AA完全準拠
セキュリティ最高レベル
即座本番投入可能
適合組織: 金融、医療、行政、大企業

 🤝 継続的改善環境 → Multi-AI理由:
多角的な品質向上
30日履歴によるデータ分析
拡張性の高さ
適合組織: テック企業、アジャイル開発チーム
注意: 開発時間+80%、意思決定コスト高

 ⚡ 中規模プロジェクト → Codex理由:
バランスの良い品質
DocumentFragmentで高速
実装コストが低い
適合組織: スタートアップ、中小企業

 🎨 UX重視プロトタイプ → Amp理由:
優れたUIデザイン
充実したドキュメント
適合組織: デザイン重視の初期プロトタイプ

 学んだ教訓：正直な振り返り
 1. AIによるコード生成を過信してはいけないClaude とGemini にXSS脆弱性があったことは、大きな教訓です。AIが生成したコードでも、必ずセキュリティレビューが必要です。

 2. Multi-AI協業は万能ではない協業すれば自動的に良くなるわけではありません：
✅ セキュリティ：向上
✅ アクセシビリティ：向上
❌ パフォーマンス：単独AIに劣る
❌ 効率：開発時間+80%
使いどころを見極める必要があります。

 3. 実験設計のバイアスを認識するこの実験には、正直に言って設計上の問題があります：
問題点:
Multi-AIが実装計画書を作成
その計画を元に全AIが実装
Multi-AIの設計思想が計画に反映されている可能性
影響:
Multi-AIに有利なバイアスがかかった可能性
各AIの独自の設計思想が評価されていない
公平な比較とは言えない
改善案:
各AIが独自に計画を作成する実験が必要
計画力と実装力を分けて評価すべき
より公平な比較のために実験2を実施予定
この反省から、次の実験では各AIが独自に計画を作成する方式を採用します。

 4. パフォーマンス最適化は意識しないと漏れるDocumentFragmentのような最適化は、意識的に実装しないと漏れます。Droid とCodex が実装できたのは、パフォーマンスを明示的に重視したからです。

 5. アクセシビリティは専門性が必要WCAG準拠には専門知識が必要です。Droid とMulti-AI（Droidの専門性）が高得点だったのは、この専門性があったからです。

 6. 単独AIにも優れた実装があるDroid が1位だったことは、単独AIでも優れた成果を出せることを示しています。協業が常に優れているわけではありません。

 改善の方向性
 Critical（即座対応）Gemini 、Claude のXSS脆弱性修正
// 修正前
title.innerHTML = task.title;  // ❌

// 修正後
title.textContent = task.title;  // ✅
工数: 各1時間

 High（1週間以内）全実装にストレージクォータ対応を追加
try {
  localStorage.setItem(key, JSON.stringify(data));
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    alert('ストレージ容量が不足しています');
  }
}
工数: 各2時間

 Medium（1ヶ月以内）Multi-AIのアニメーション最適化
イベントリスナーの最適化（個別リスナー → 一括処理）
タイマー機能の拡張（短期/長期休憩）
工数: 8-12時間

 Low（3ヶ月以内）全実装の機能拡張
ダークモード改善
履歴分析機能（チャート・統計）
工数: 各16時間

 まとめ：謙虚な振り返り
 主要な発見
AIのコード生成を過信してはいけない: 2つのAIにXSS脆弱性

Multi-AI協業は2位止まり: 86.7点 vs 81.7点でDroid に敗北

パフォーマンス最適化の有無で3倍の差: DocumentFragmentの効果

単独AIでも優れた成果: Droid の完成度

実験設計のバイアス: Multi-AIが計画書を作成したことによる潜在的バイアス

 正直な感想Multi-AI協業が1位になると期待していましたが、現実は2位でした。協業のオーバーヘッド（開発時間+80%、意思決定コスト高）を考えると、常に協業が最善とは限らないという結論です。
さらに、この実験には設計上の問題がありました。Multi-AIが作成した実装計画書を元にすべてのAIが実装したため、Multi-AIに有利なバイアスがかかった可能性があります。
ただし、セキュリティやアクセシビリティでは明確な効果がありました。Gemini単独ではXSS脆弱性を作ったのに、Multi-AI協業ではGeminiのレビューが機能して脆弱性を防げた、というのは協業の価値を示しています。また、DocumentFragmentの正しい実装も、協業による品質向上の一例です。

 実験の限界と次のステップこの実験の限界を認識し、より公平な実験を計画しています：
実験1の問題点:
Multi-AIが実装計画書を作成 → バイアス
計画力が評価されていない
各AIの設計思想が十分に評価されていない
実験2の改善点（予定）:
各AIが独自に計画を作成
計画力（設計思想）と実装力を分けて評価
より公平な比較
実験2では、8つのAIが独自に計画を作成し、自分の設計思想で実装します。その結果、Droidのエンタープライズ設計、Geminiのミニマリズム、Codexのリスク管理など、各AIの個性が明確になると期待しています。

 今後の展望
パフォーマンス最適化の強化: DocumentFragmentを標準実装

セキュリティレビューの徹底: すべてのAI生成コードに適用

協業プロセスの効率化: 開発時間のオーバーヘッドを削減

単独AIの強みを活かす: 適材適所で使い分け

公平な実験設計: 実験2で各AIの真の実力を評価
完璧な答えはまだ見つかっていませんが、少しずつ改善していきたいと思います。

 リポジトリ!本ツールは個人ユース向けの試験的実装です。各サービスの利用規約を遵守し、自己責任でご利用ください。
https://github.com/CaCC-Lab/pomodoro-todo
https://github.com/CaCC-Lab/multi-ai-orchestrium

AI	説明
Multi-AI	Claude + Gemini + Qwen + Droid + Codex + Cursor + Amp の7AI協調
Claude	Anthropic Claude Sonnet 4.5 単独
Gemini	Google Gemini Pro 単独
Codex	OpenAI Codex 単独
Qwen	Alibaba Qwen Code 単独（※）
Droid	Factory AI Droid 単独
Cursor	Cursor AI 単独
Amp	Amp Code 単独

評価軸	配点
セキュリティ	16.7点
パフォーマンス	16.7点
保守性	16.7点
アクセシビリティ	16.7点
エンタープライズ適合性	16.7点
ユーザー体験	16.7点

順位	実装	スコア	状態
🥇	Droid	86.7/100	✅ 本番推奨
🥈	Multi-AI	81.7/100	✅ 協調開発推奨
🥉	Codex	78.3/100	✅ 中規模推奨
4位	Amp	71.7/100	⚠️ 改善推奨
5位	Cursor	60.0/100	⚠️ プロトタイプのみ
6位	Claude	50.0/100	❌ XSS脆弱性
7位	Gemini	41.7/100	❌ Critical XSS

実装	セキュリティ	パフォーマンス	保守性	アクセシビリティ	エンタープライズ	UX	合計
Droid	15.0	15.0	15.0	16.7	15.0	10.0	86.7
Multi-AI	13.3	13.3	13.3	15.0	13.3	13.3	81.7
Codex	13.3	15.0	13.3	10.0	13.3	13.3	78.3
Amp	11.7	11.7	11.7	11.7	10.0	15.0	71.7
Cursor	11.7	10.0	8.3	8.3	8.3	13.3	60.0
Claude	5.0	6.7	8.3	6.7	6.7	16.7	50.0
Gemini	3.3	5.0	6.7	5.0	5.0	16.7	41.7

はじめに：期待と現実

この記事で分かること

実験設計：7つのAIに同じ要件を渡す

参加AI

実験で使用した文書

共通要件

評価基準（100点満点）

結果：予想外のランキング

総合スコア（100点満点）

カテゴリ別詳細スコア

最大の発見：2つのAIに重大なセキュリティ脆弱性

Gemini ：Critical XSS（CVSSスコア 8.1）

Claude ：Stored XSS（CVSSスコア 7.5）

安全な実装（5つ）

パフォーマンス：3倍の差

DocumentFragmentの有無

高速な実装（Droid 、Codex 、Multi-AI）

低速な実装（Amp 、その他）

タイマーの精度

Multi-AI協業の効果と限界

効果があった部分

限界があった部分

各実装の特徴

🥇 Droid ：エンタープライズの完成形（86.7/100点）

🥈 Multi-AI：協業の可能性と課題（48点）

🥉 Codex ：バランスの良さ（78.3/100点）

Amp ：UXの追求（71.7/100点）

Cursor ：モダンデザイン（60.0/100点）

Claude ：UXは良いが脆弱（50.0/100点）

Gemini ：Critical脆弱性（41.7/100点）

推奨シナリオ

🏢 エンタープライズ本番環境 → Droid

🤝 継続的改善環境 → Multi-AI

⚡ 中規模プロジェクト → Codex

🎨 UX重視プロトタイプ → Amp

学んだ教訓：正直な振り返り

1. AIによるコード生成を過信してはいけない

2. Multi-AI協業は万能ではない

3. 実験設計のバイアスを認識する

4. パフォーマンス最適化は意識しないと漏れる

5. アクセシビリティは専門性が必要

6. 単独AIにも優れた実装がある

改善の方向性

Critical（即座対応）

High（1週間以内）

Medium（1ヶ月以内）

Low（3ヶ月以内）

まとめ：謙虚な振り返り

主要な発見

正直な感想

実験の限界と次のステップ

今後の展望

リポジトリ

Discussion