技術ブログやREADMEを書く際、もはやAIを使わない日はありません。しかし、「どのモデルを使っても結局同じような結果になる」と思っていませんか?
実は、全く同じプロンプトを投げても、ChatGPT(GPT-4o)、Claude 3.5 Sonnet、Gemini 1.5 Proでは、出力される文章の「質感」「構成」「エンジニアへの配慮」が驚くほど違います。
今回は、Reactの useEffect を題材に、実際にどのような差が出るのかを実測比較してみました。
1. 検証のセットアップ
以下の、意図的に少し「幅」を持たせたプロンプトを使用しました。
プロンプト:
「ReactのuseEffectで、依存配列にオブジェクトを渡した時に発生する無限ループ問題について解説記事を書いてください。
ターゲット:React初学者〜中級者
制約:原因、解決策(useMemo/useCallback/useRef)、具体的なコード例を含めること。」
2. 各モデルの出力結果と分析
それぞれのモデルが出してきた内容を、3つの観点(構成・コード・文章のクセ)で分析します。
① ChatGPT (GPT-4o) : 「王道の教科書」スタイル
ChatGPTは、非常にバランスが良く、**「抜け漏れのない安心感」**があります。
- 構成: 「1. 導入 → 2. 原因 → 3. 解決策 → 4. まとめ」という鉄板の構成。
- 文章のクセ: 「〜といえます」「〜が重要です」といった、少し丁寧すぎる、いわゆる「AI特有の丁寧さ」が出る傾向。
-
コード例: インラインコメントを多用し、どこを見ればいいか明示してくれる。
useEffect(() => { console.log("Effect実行"); }, [options]); // optionsがレンダリングごとに新しく生成されるのが原因 - 分析: 網羅性は一番。ただし、文章が長くなりがちで、熟練エンジニアが読むと「前置きが長いな」と感じることもあります。
② Claude 3.5 Sonnet : 「熟練テクニカルライター」スタイル
エンジニアの間で評価が高いClaudeですが、文章の**「文脈のつなぎ目」**が非常に自然です。
- 構成: 「なぜこれが問題なのか?」という背景(共感)から入り、ストーリー性がある。
- 文章のクセ: 箇条書きを多用しすぎず、文章の「流れ」で理解させる。AIっぽさが最も薄い。
-
コード例: 型定義(TypeScript)を自然に混ぜてきたり、実務に近いコードを出してくる。
const memoizedOptions = useMemo(() => ({ id: props.id }), [props.id]); - 分析: 「読み物」としてのクオリティが最も高い。そのままブログとして公開するならClaudeが最短距離です。
③ Gemini 1.5 Pro : 「リファレンス」スタイル
GoogleのGeminiは、**「簡潔さと情報密度」**に特化している印象です。
- 構成: 結論から入り、コード例を提示。解説は最小限で機能的。
- 文章のクセ: 余計な装飾が削ぎ落とされている。ややドライだがスピーディー。
- コード例: 差分がわかりやすいように、修正前と修正後を端的に出力する。
- 分析: 「理屈はいいから解決策だけ知りたい」という時に、最速で答えに辿り着ける。READMEのトラブルシューティング欄を書かせるのに向いています。
3. 【実測比較】同じコード解説の「表現」の違い
「依存配列による無限ループ」の解説文を一行抽出して比較すると、その「思想」の違いが浮き彫りになります。
| モデル | 実際の解説文のニュアンス | 印象 |
|---|---|---|
| ChatGPT | 「JavaScriptではオブジェクトは参照で比較されるため、毎回新しく生成されると異なるものと判断されます。」 | 論理的・教育的 |
| Claude | 「たとえ中身が同じでも、レンダリングごとに生成されたオブジェクトは『別物』として扱われます。これが罠です。」 | 文脈的・共感的 |
| Gemini | 「原因:オブジェクトのリファレンスが毎回変わるため。対策:useMemoでメモ化する。」 | 効率的・直感的 |
4. 実務での「使い分け」メソッド
今回の比較から、私は以下のようなワークフローを組んでいます。
-
構成案と網羅性の確認(ChatGPT)
「書くべき項目」を漏らさないために、まずはChatGPTに目次を作らせる。 -
本文の執筆(Claude)
ChatGPTの構成を渡し、「Claudeらしい自然なトーンで肉付けして」と依頼する。 -
要約とREADME化(Gemini)
書いた記事をGeminiに渡し、「これを3行で要約してREADMEに載せて」と依頼する。
5. 複数のモデルをスムーズに切り替えるには?
各AIのサイトを往復するのは非効率です。私は最近、複数のモデルを一箇所で切り替えられる ChatArt などのツールを併用しています。
モデルをワンクリックで切り替えて、出力の「書き味」をその場で比較できる環境を作っておくと、自分の意図に最も近い文章を爆速で生成できるようになります。
まとめ:AIにも「筆致」がある
「AIが書いた文章」と一括りにされがちですが、実際にはモデルごとに明確なエンジニアリングへの向き合い方の違いがあります。
- ChatGPT = 親切な家庭教師
- Claude = 腕の良いシニアエンジニア
- Gemini = 無駄のない公式ドキュメント
自分の書きたい記事のトーンに合わせてモデルを選べるようになると、執筆のストレスはさらに減るはずです。皆さんの「推しモデル」はどれですか?ぜひコメントで教えてください。
次にやってみてほしいこと
お手元の「書きかけの技術メモ」を、ChatGPTとClaudeの両方に投げ、「これ、どっちの書き方が自分の好みか?」を比較してみてください。それだけで、AIとの付き合い方が一段階深まります。
[参考ツール]
本記事の検証では、モデルの切り替えに ChatArt を使用しました。複数のプロンプトを同時に試す際に重宝しています。