2025年現在、フロントエンド開発にもAIを使うことが当たり前になってきました。
そこで疑問が生まれました。
「CopilotにCoTを出させるかどうかで、UIの品質は変わるのか？」
結論：たった1文変えるだけで UI の質はかなり変わりました。
CoTとは？
AIが回答に至るまでの 思考過程 のこと。
| 設定 | AIの振る舞い |
|---|---|
| CoTなし | 結果だけ返す → 最小限の実装 |
| CoTあり | 考えを文章化しながら実装 → UIに設計意図が反映される |
つまり、設計が乗るか、最低限動くか に影響します。
実験条件
| 項目 | 内容 |
|---|---|
| タスク | ログイン画面を実装 |
| 技術 | React + TypeScript |
| モデル | Claude Sonnet 4.5 |
| 入力差分 | CoTの説明指示 1文のみ変更 |
| 仕様 | バリデーション、アクセシビリティあり |
共通仕様
- 画面タイトル
- メールアドレス入力欄
- パスワード入力欄
- Loginボタン
- 未入力でエラー表示
- Label or aria でアクセシビリティ配慮
プロンプト：差分は 1 文だけ
CoTなし版
React + TypeScriptプロジェクトの src/App.tsx に
ログイン画面の UI を実装したいです。
必須仕様は以下のとおりです。
画面タイトル
メールアドレス入力欄
パスワード入力欄
Login ボタン
未入力で Login ボタンを押したときにエラーメッセージ表示
Label または aria 属性によるアクセシビリティ配慮
理由や手順の説明は不要です。
上記の仕様を満たすように、src/App.tsx のみコードを実装してください。
CoTあり版
React + TypeScriptプロジェクトの src/App.tsx に
ログイン画面の UI を実装したいです。
必須仕様は以下のとおりです。
画面タイトル
メールアドレス入力欄
パスワード入力欄
Login ボタン
未入力で Login ボタンを押したときにエラーメッセージ表示
Label または aria 属性によるアクセシビリティ配慮
理由や手順の説明も含めて出力してください。
上記の仕様を満たすように、src/App.tsx のみコードを実装してください。
「理由や手順の説明は不要です。」
「理由や手順の説明も含めて出力してください。」
この部分以外は完全に同じです。
チャット出力結果
CoTなし
CoTあり
完成UI比較
| 条件 | 初期状態 | エラー時 |
|---|---|---|
| CoTなし |  |
 |
| CoTあり |  |
 |
上記以外の違い
今回の実験ではUI以外にも以下の差異がありました。
| 観点 | CoTなし | CoTあり |
|---|---|---|
| 既存コードへのアプローチ | 上書き編集が中心 | 一度全削除 → 0から再構築 |
| 思考の丁寧さ | 必要最低限 | 設計を伴いながら実装 |
| 実行時間 | 39秒 | 45秒 |
思考過程が提示されるため、コードの意図を理解しやすく、初学者の学習にも役立つことが期待できます。
考察：なぜ差が出た？
- CoTなし → 思考を抑制する → 最短で動くUI
- CoTあり → 思考を可視化 → 設計がUIへ反映
結論
| ポイント | 評価 |
|---|---|
| UI品質 | CoTありの方が高い |
| 初心者に優しい？ | CoTありの方が優しい |
| プロンプトの重要性 | たった1文の違いが大きな差に |
最後まで読んでいただきありがとうございました！
Discussion