📓

全く同じプロンプトを使って日報要約ツールを生成してみたらどんな違いがあったか(Claude,Codex,Gemini,Devin)

に公開
プロンプトエンジニアリング
Devin
Claude Code
Codex CLI
Gemini CLI
tech

概要

身内で実施している勉強会の小ネタとして、「AIでパッとツールを作ってみよう」というお題で、各社のCLIとDevinを使って日報要約ツールを作成してみました。

最初のお題

新規事業のネタをなんでもいいから考えて欲しい

すぐ作成できそうな簡易なツール何がいいかをGeminiに聞いたら、「日報要約ツール」がいいそう。

日報の自動要約のSaaSいいね

実際に動くデモのWebアプリのコードが欲しい。すぐ動くデモが欲しい。TypeScriptで。
Geminiにどんなプロンプトを投げればいい？

とお願いして、そこでもらったプロンプトを下記のツールに入力してみて、出てきた生成物を比較してみました。

  • Codex(gpt-5-codex)
  • Gemini(gemini-2.5-pro)
  • Claude Code(Sonnet 4.5)
  • (CLIではないですが)Devin

(事前にGeminiのAPIキーは準備しておきました)

あなたは優秀なフルスタックエンジニアです。
日報の自動要約SaaSの、最小構成のデモWebアプリケーションをNext.js（Pages Router）とTypeScriptで作成してください。

# 目的
GoogleのGemini API（`@google/generative-ai`）を使用して、入力された日報テキストを要約するWebアプリのデモを作成します。

# 要件
- **技術スタック**: Next.js (Pages Router), React, TypeScript
- **使用ライブラリ**: `@google/generative-ai`
- **UI (pages/index.tsx)**:
    - 日報の原文を入力するための`<textarea>`
    - 「要約する」ボタン
    - ローディング中（処理中）であることがわかる表示
    - 要約結果を表示するエリア（エラー発生時もメッセージを表示）
- **API (pages/api/summarize.ts)**:
    - リクエストボディから日報テキスト (`reportText`) を受け取る。
    - APIキーは環境変数 (`process.env.GEMINI_API_KEY`) から読み込む。
    - **重要**: Geminiに投げるプロンプトは、「以下の日報を、ビジネス上の重要事項3点に絞って箇条書きで要約してください：\n\n[日報テキスト]」という形式にしてください。
    - Geminiからの応答テキストをJSON形式でフロントに返却する。

# ファイル構成とコード
以下の2つのファイルのコードを、すぐに動作する形で提示してください。

1.  `pages/index.tsx` (フロントエンドUIとAPI呼び出しロジック)
2.  `pages/api/summarize.ts` (Gemini APIを呼び出すバックエンドロジック)

# 補足
- 実行に必要な `npm install` コマンドを教えてください。
- `GEMINI_API_KEY` を `.env.local` ファイルに設定する必要があることを明記してください。

Codex

初期設定

  • 1回目の成果物: package.json がない😇 (.env.local も)
  • 2回目の成果物: Geminiのモデル名の指定が間違っていた(gemini-pro → gemini-flash-2.5)
  • 3回目の成果物: 動作した🎉
入力前 要約中 要約後
ボタンは活性化状態 ボタンは活性化状態 結果のマークダウンがそのまま表示

Gemini

初期設定

  • 1回目の成果物: Geminiのモデル名の指定が間違っていた(gemini-pro → gemini-flash-2.5)
  • 2回目の成果物: 動作した🎉
入力前 要約中 要約後
ボタンは活性 要約中は非活性 codex と遜色なし (ただ、実はダークモードに対応していた) favicon も設定あった

Claude (Sonnet 4)

初期設定

  • 1回目の成果物: Geminiのモデル名の指定が間違っていた(gemini-pro → gemini-flash-2.5)
  • 2回目の成果物: 動作した🎉
入力前 要約中 要約後
ボタンが非活性 ローディング中も綺麗 結果の欄も綺麗、なぜか結果も賢い(同じモデル指定したのになぜ...)

Devin

初期設定

  • 1回目の成果物: tailwindのCSSが機能していなかった
  • 2回目の成果物: 環境変数がセットできていなかったので、対話で設定※
  • 3回目の成果物: 動作した🎉

⚠️ ※環境変数の設定は、本来は .envrc の活用が推奨されているようです
https://docs.devin.ai/onboard-devin/repo-setup#configuring-environment-variables

入力前 要約中 要約後
ボタン非活性 ローディング表示あり 結果欄も綺麗、結果も賢い(なぜ...)

まとめ

  • 所感: Claude = Devin > Gemini > Codex
  • 全く同じプロンプトでツールを作っても、全く同じものはできない
  • 1発で生成できたモデルはなかった（このくらいの規模感が、1発生成できるか出来ないかくらいの境界なのかもしれない）
  • 開発者目線ではClaudeがやはり一番丁寧、Devinも劣らず。非開発者にはDevinが一番扱いやすそう
  • ツールを作らせるためのプロンプトはGeminiに作らせたので、これを各モデルで作らせた方が、モデルが本来の力を発揮できた？
  • 各種設定ファイル(CLAUDE.md)などは整備せず検証したので、その辺りも合わせて整理すると品質は向上しそう

Discussion