🙆
AIエディタCursorと共に進化する開発スタイル：理想のUIを短時間で実現する

2025/04/03に公開
 はじめに最近の個人開発で、AIエディタ「Cursor」を使ってメッセージUIにファイルアップロード機能を実装しました。この過程で、AIと対話しながら段階的に理想のUIに近づけていく新しい開発スタイルを体験し、その可能性に感動しました。従来の開発方法とは異なり、コードを書くよりもAIへの「指示」や「フィードバック」がより重要になる時代が来ていることを実感しました。

 従来の開発フローとAI支援開発の違い
 従来の開発フロー要件定義・設計
コーディング
テスト・デバッグ
修正の繰り返し

 AI支援開発フロー要件を自然言語で説明
AIが初期実装を提案
結果を確認し、自然言語でフィードバック
AIが修正案を提示
理想形に近づくまで繰り返し
この違いは単なる作業効率化ではなく、開発の「思考プロセス」自体を変革するものです。

 実際の開発事例：AIとの対話で進化するUI設計開発におけるUI設計は、通常、仕様書作成、デザインモックアップ、実装の順で進みます。しかし、AIとの協働開発では、この流れが大きく変わります。本章では、メッセージUIにファイルアップロード機能を実装する過程を通じて、AIとの対話がどのようにUIを進化させるかを実例で見ていきましょう。

 1. 開発の出発点：シンプルなファイルアップロード機能メッセージUI機能に対して、ファイルのアップロード機能を追加したい。これが最初の要件でした。
Cursorに、次のような依頼を出しました。
メッセージの送信機能にファイルのアップロード機能を追加したい。他の箇所ではドラッグ&ドロップ対応しているが、メッセージ送信機能部分ではどこまでそこまで頻繁に使うことはないと思うので、ドラッグ&ドロップは対応せず通常の感じでいいです。
しかし、Cursorは既存のコンポーネントを活用して実装を提案してくれたので、不要なドラッグ&ドロップ機能が含まれていました。

 2. 対話型改善プロセス：フィードバックの繰り返し
 課題1：ドラッグ&ドロップの簡略化最初の実装では要件と異なる点があったため、もう少し具体的に指示をしました。
ドラッグ＆ドロップには対応しなくていいですし、今回のメッセージに特化したいい感じのUIがいいです
Cursorはこの指示を理解し、シンプルなファイル選択UIに修正してくれました。

 課題2：ファイルの累積アップロード比較的良い感じのUIになりましたが、動作確認中に新たな問題を発見しました。ファイルを追加でアップロードすると、前回選択したファイルが上書きされてしまいます。

そこで以下のように問題を指摘しました。
何回かに分けてアップロードするケースもあると思います。今だと前回アップロード分を上書きしてしまいますよね？
Cursorは以下のようなコード修正を提案してくれました。
const newFiles = Array.from(event.target.files);
// 既存のファイルに新しいファイルを追加
const updatedFiles = [...selectedFiles, ...newFiles];
setSelectedFiles(updatedFiles);
form.setValue("attachments", updatedFiles);

// ファイル選択後にinput要素をリセット (同じファイルを再選択できるように)
if (fileInputRef.current) {
  fileInputRef.current.value = '';
}
これにより、複数回に分けてファイルをアップロードできるようになりました。さらに、ファイルを選択した後に同じファイルを再選択できるようinput要素をリセットする工夫も施されています。

 課題3：レイアウトの最適化次に、高さを固定でデザインしているため、ファイルの有無でデザインが崩れてしまう問題に気づきました。そこで新しいレイアウトを提案しました。
メッセージの入力部分の右側にアップロードしたファイルが表示される感じにするのはどうだろう？
Cursorは以下のようなFlexboxを活用したレイアウト変更を実装してくれました。
<div className="flex gap-4">
  <div className="flex-1">
    <FormField
      control={form.control}
      name="message"
      render={({ field }) => (
        <FormItem>
          <FormControl>
            <Textarea
              className="p-4 h-40"
              placeholder="メッセージを入力してください"
            />
          </FormControl>
        </FormItem>
      )}
    />
  </div>
  {/* ファイル表示エリア */}
</div>
これにより、メッセージ入力エリアとファイル表示エリアが横並びになり、視覚的に整理されたUIに改善されました。
添付ファイルがない場合

添付ファイルがある場合


 3. 最終段階：細部の洗練最後に、ファイルの有無による表示の最適化を提案しました。
ファイルがアップロードされてなかったらその分メッセージボックスが横まで伸びてる感じはどうだろう？ファイルのアップロードボタンは常に表示されているようにしたい
この指示により、最終的に以下のような理想的なUIが完成しました：
添付ファイルがない場合：メッセージ入力欄が広く、右側にシンプルなファイル添付ボタンのみ表示

添付ファイルがある場合：右側にファイル一覧が表示され、カウンター（例：2/5）も表示


 4. この開発事例から得た具体的な学びこの事例を通じて得られた具体的な開発上の気づきをまとめます。
初期要件の曖昧さを許容する: 従来の開発では要件を明確にすることが重視されますが、AI協働開発では、まず大まかな方向性を示し、そこから対話的に要件を明確化していくアプローチが効果的でした。
視覚的イメージの言語化: 「右側に表示」「横に伸びる」などの視覚的なイメージを言語化することで、AIはレイアウト意図を理解しやすくなりました。
ユーザー視点からの問題提起: 「何回かに分けてアップロードするケース」など、ユーザーの使用シナリオを想定した問題提起がAIの解決策を導き出す鍵となりました。
コード修正より意図の伝達: 直接コードを修正するよりも、「なぜそうしたいのか」という意図を伝えることで、より良い解決策が生まれました。

 AIと共に開発する上で重要なこと
 1. 明確なフィードバックを提供する能力AIは曖昧な指示よりも具体的な問題点や改善案に対して効果的に応答します。「なんかイマイチ」ではなく「ファイルが上書きされてしまう」のように具体的に指摘することで、的確な解決策が得られます。

 2. 段階的な改善を許容する姿勢完璧な結果を一度で求めるのではなく、対話を通じて段階的に改善していく姿勢が重要です。これは従来の「仕様書を完璧に書いてから実装」というウォーターフォール的アプローチからの転換を意味します。

 3. デザイン意図を言語化する能力AIに効果的な指示を出すには、自分の求めるデザインや機能を言語化できる能力が必要です。「右側に表示」「常に表示されているように」など、意図を明確に伝える表現力が求められます。

 これからの開発スタイルとエンジニアリングスキル今後のソフトウェア開発において、AIとの協働は避けられない流れです。フロントエンドでもバックエンドでも、AIとの効果的な対話を通じた開発が主流になっていくでしょう。エンジニアに求められるスキルも変化していきます：
プロンプトエンジニアリングスキル：AIに適切な指示を出す能力
システム設計と意図の言語化：求める実装を明確に伝える能力
品質評価と改善提案：AIが生成したコードを評価・改善する能力
創造的問題解決：AIでは対応できない独自の課題を解決する能力

 まとめAIエディタCursorとの開発体験を通じて、コードを書く労力を大幅に削減しながらも、高品質なUIを短時間で実現できることがわかりました。この事例はUI開発に焦点を当てていますが、同様のアプローチはソフトウェア開発全般に適用できます。
将来的には、エンジニアの役割は「コードを書く人」から「AIと協力してシステムを設計・評価する人」へと変化していくでしょう。AIに抗うのではなく、この新しい開発スタイルに早く適応することで、より高品質なプロダクトを効率的に作り出せるようになります。
この記事がAI時代のエンジニアリングについて考えるきっかけになれば幸いです。皆さんも自分の開発プロセスにAIを取り入れ、その可能性を探ってみてはいかがでしょうか。