概要
https://qiita.com/ume_work0831/items/606ae0fe9992604712eb
詳細内容
## ChatGPT・Grok・Geminiに同じコードを渡してみたら、返答が全然違った話
https://qiita.com/ume_work0831/items/606ae0fe9992604712eb
著者は、HTMLコードのFLOCSS命名規則チェックをChatGPT、Grok、Geminiに依頼し、各AIの応答に明確な違いがあることを実証した。
**Content Type**: ⚙️ Tools
**Scores**: Signal:4/5 | Depth:3/5 | Unique:3/5 | Practical:4/5 | Anti-Hype:4/5
**Main Journal**: 71/100 | **Annex Potential**: 70/100 | **Overall**: 72/100
**Topics**: [[LLM比較, コードレビュー支援, FLOCSS, プロンプトエンジニアリング, Web開発ワークフロー]]
著者は、自身が作成したHTMLコードに対して、一般的なCSS命名規則であるFLOCSSへの準拠を確認し、もし間違いがあれば修正例と合わせて表形式で提示するよう、ChatGPT、Grok、そしてGeminiの主要3つのAIモデルに指示しました。この実証的な比較を通じて、それぞれのAIモデルが同じタスクに対し、どれほど異なる応答を返すかが鮮明に示されました。
具体的な結果として、ChatGPTは指摘の理由と正しいコード例を分かりやすく提示し、バランスの取れたフィードバックを提供。Grokは非常に網羅的かつ詳細にコードを一つずつ確認する傾向が見られました。一方で、最も際立っていたのはGeminiで、他の2つが見落とした可能性のある「`section`タグに対して`p-`（ページ固有）ではなく`l-`（レイアウト）プレフィックスを使用すべき」という、FLOCSSのより厳格な規約違反を具体的に指摘しました。これは、Geminiが他のAIよりもFLOCSSの規範を深く、あるいは厳密に解釈している可能性を示唆しています。
この検証がWebアプリケーションエンジニアにとって重要なのは、AIを単なるツールとしてではなく、その特性を理解した上で戦略的に使い分ける必要性を明確にした点です。例えば、柔軟な助言や学習にはChatGPT、徹底的な網羅性にはGrok、そして厳格なコーディング規約への準拠を求める場合にはGeminiといった選択肢が考えられます。特に、フロントエンド開発でFLOCSSやBEMのような厳密なCSS設計パターンを採用しているプロジェクトでは、GeminiのようなAIがコード品質を高いレベルで維持するための強力なサポーターとなり得ます。ただし、AIの出力はあくまで提案であり、誤りを含む可能性も常に存在するため、最終的なコードの正確性は人間が確認する責任があることは変わりません。また、AIに与えるプロンプトの質が回答の精度や有用性を大きく左右するため、効果的なプロンプトエンジニアリングのスキルがAI活用の鍵となることも改めて強調されています。開発者は、これらの知見を日々のワークフローに組み込むことで、AIを最大限に活用し、開発効率とコード品質の両面でメリットを享受できるでしょう。