はじめに

この記事では、Todoアプリを例にしながら、AI駆動開発をどう進めるのかを整理します。

ポイントは、AIに丸投げする話ではないということです。
AIは「全部やってくれる魔法の箱」ではなく、考えを整理したり、下書きを作ったり、理解を助けたりしてくれる相棒として使うのが現実的です。GitHubはCopilotを開発ライフサイクル全体を支援する存在として説明しており、GoogleもGemini Code Assistを構築・デプロイ・運用まで支援するものとして紹介しています。GitHub Google Developers

先に結論

AI駆動開発をひとことで言うと、人が方向を決めて、AIに作業を手伝ってもらいながら開発するやり方です。

大事なのは、次の2つです。

AIにコードを書かせるだけで終わらない
AIに「説明させる」「計画させる」「確認させる」ところまで使う

この視点を持つだけで、AIはかなり使いやすくなります。

AI駆動開発ってなに？

AI駆動開発は、AIをコード補完ツールとして使うだけではなく、要件整理、設計、実装、テスト、デバッグ、ドキュメント作成まで含めて活用する開発スタイルです。GitHub Google Developers

たとえば、これまでは次のような作業を人が全部やっていました。

何を作るか考える
画面や機能を整理する
コードを書く
バグを直す
テストする
READMEを書く

AI駆動開発では、このうちの一部をAIに手伝ってもらいます。

たとえば、こんな使い方ができます。

仕様の整理を手伝ってもらう
コードのたたき台を作ってもらう
コードを説明してもらう
バグの原因候補を出してもらう
テスト観点を洗い出してもらう
記事やREADMEの下書きを作ってもらう

つまり、AI駆動開発は**「コード生成」だけではなく、「開発全体の補助」**と考えると分かりやすいです。

今回作るもの: 最小構成のTodoアプリ

今回は、題材としてTodoアプリを使います。

Todoアプリを選ぶ理由はシンプルで、開発の基本がひと通り入っているからです。

入力フォームがある
一覧表示がある
状態の切り替えがある
削除がある
保存処理を追加しやすい

最初から高機能にしなくて大丈夫です。
まずは次の機能だけを目標にします。

Todoを追加できる
Todo一覧を表示できる
完了 / 未完了を切り替えられる
Todoを削除できる
ページを再読み込みしても保持される

ここで大事なのは、最初から盛り込みすぎないことです。
Googleも、AIを効果的に使うには、作業を分解して計画的に進めることが大切だと述べています。cloud.google.com

全体の流れを先に見る

まず、AI駆動開発でTodoアプリを作る流れをざっくり見ると、こんな感じです。

作りたいものを言葉で整理する
AIに要件をまとめてもらう
AIに実装の順番を考えてもらう
最小構成のコードを作ってもらう
AIにコードを説明してもらう
機能を1つずつ追加する
バグが出たら原因候補を出してもらう
テスト観点を整理してもらう
READMEや記事の下書きも手伝ってもらう

この順番で進めると、初学者でも「何から始めればいいか」がかなり分かりやすくなります。

1. まずは「何を作るか」をAIと整理する

いきなり「Todoアプリを作って」と頼んでも、たしかにコードは返ってきます。
でも、それだと自分が何を作っているのか分からないまま進みやすいです。

なので、最初はコード生成ではなく、要件整理から始めるのがおすすめです。

たとえば、こんなふうにAIへ頼めます。

初心者向けのTodoアプリを作りたいです。
ブラウザで動く最小構成にしてください。
必要な機能、画面、データ項目を整理してください。
今回はMVPとして最小限の範囲だけに絞ってください。

すると、AIからはこんな整理が返ってくるはずです。

画面

入力欄
追加ボタン
Todo一覧

データ

id
title
completed
createdAt

機能

追加
完了切り替え
削除
保存

この段階でAIにやってもらうのは、実装ではなく整理です。
ここを飛ばさないだけで、後の開発がかなりラクになります。

2. 次に「どの順番で作るか」をAIに考えてもらう

初学者がつまずきやすいのは、「何を作るか」よりも、どの順番で作るかです。

ここでもAIが役立ちます。

このTodoアプリを、初心者向けに小さなステップへ分けてください。
各ステップで確認すべきことも書いてください。

たとえば、こんな流れが出てくると良いです。

HTMLで画面の骨組みを作る
CSSで最低限見やすくする
JavaScriptでTodo追加を実装する
完了切り替えを実装する
削除を実装する
LocalStorage保存を実装する
テスト観点を整理する

この工程分解はかなり大事です。
**「全部作って」より「次の1ステップだけ進めて」**の方が、AIの出力も安定しやすいです。cloud.google.com

3. 技術スタックはできるだけシンプルにする

今回は初学者向けなので、技術構成はできるだけ小さくします。

HTML
CSS
JavaScript
LocalStorage

ReactやNext.jsを使ってもよいですが、AI駆動開発の考え方をつかむ段階では、まずはシンプルな構成の方が理解しやすいです。

AI支援ツールは、コード補完、関数生成、テスト生成、デバッグ支援、コード理解、ドキュメント作成補助など、かなり幅広い支援を提供します。なので、フレームワークの有無よりも、まずは自分が追える構成にすることの方が大切です。Google Developers

4. 最小構成のコードをAIに作ってもらう

ここで、はじめてコード生成を頼みます。

HTML/CSS/JavaScriptだけで動くTodoアプリの最小構成を作ってください。
ファイルは index.html, style.css, app.js の3つに分けてください。
まずは Todo の追加と一覧表示だけ実装してください。
コードには初心者向けコメントを入れてください。

この依頼で大事なのは、次をはっきり伝えることです。

使う技術
ファイル構成
今回の実装範囲
コメントの分かりやすさ

AIをうまく使うコツは、雑に頼まないことです。
Googleも、AIへの指示は新しいチームメンバーへ仕事を依頼するように、背景や期待結果を具体的に伝えるのがよいと説明しています。cloud.google.com

5. コードを作って終わりにせず、「説明させる」

ここが初学者にとってすごく大事です。

AIにコードを書いてもらったあと、そのままコピペして終わると、動くけど分からないコードが手元に残ります。
それだと学習効果がかなり下がります。

なので、次のように聞きます。

この app.js の処理を、JavaScript 初学者向けに上から順番に説明してください。
特に、イベント処理と配列の更新がどう動くか詳しく教えてください。

GitHubも、Copilotにはコード説明やチャット支援の機能があると紹介しています。つまりAIは、コードを書く相手であるだけでなく、コードを教えてくれる相手にもなれます。GitHub

この使い方をすると、ただアプリが完成するだけでなく、なぜ動くのかも一緒に学べるようになります。

6. 機能追加は1つずつやる

最小機能ができたら、機能を少しずつ増やしていきます。

追加候補はこんな感じです。

完了 / 未完了の切り替え
削除ボタン
LocalStorage 保存
フィルタ機能
期限
優先度

ここでやってはいけないのが、
**「高機能なTodoアプリを全部作って」**と頼むことです。

代わりに、こんなふうに小さく頼みます。

今あるTodoアプリに、完了・未完了の切り替え機能だけを追加してください。
既存構造は大きく変えず、どこを変更したかも説明してください。

この「差分で頼む」やり方はかなりおすすめです。
毎回フルコードを書き直させるより、変更点を追いやすくなります。

7. バグが出たら「症状」と「期待動作」をセットで渡す

AIはデバッグでも役立ちます。
ただし、「動かない」だけでは情報が足りません。

たとえば、再読み込みでTodoが消えるときは、こんなふうに渡します。

症状:
- Todoを追加した直後は表示される
- ページを再読み込みすると一覧が空になる

期待動作:
- 再読み込み後も LocalStorage からTodoが復元される

対象コード:
- saveTodos 関数
- loadTodos 関数
- 初期表示処理

原因候補を3つ挙げて、確認する順番も教えてください。

Googleも、AI支援ツールがデバッグやコード理解を支援すると説明しています。Google Developers

ポイントは、答えを当ててもらうより、原因候補を整理してもらうことです。
その候補を自分で1つずつ確かめると、理解が深まります。

8. テスト観点もAIに考えてもらう

初学者だと、実装までは進めても、テストの観点が抜けがちです。
でも、AIはここでもかなり役立ちます。

このTodoアプリに必要なテスト観点を、正常系・異常系・境界値に分けて整理してください。

たとえば、次のような観点が出てきます。

正常系

1件追加できる
複数件追加できる
完了状態を切り替えられる
削除できる
再読み込み後も保持される

異常系

空文字のTodoを追加しようとしたとき
壊れたLocalStorageデータが入っていたとき

境界値

1文字だけのTodo
とても長いTodo
同名のTodoを複数追加したとき

Googleは、テスト生成や、要件を満たしているかを確認するためのテスト作成もAI活用の一部として紹介しています。Google Developers cloud.google.com

テスト観点を考えることは、仕様をもう一度確認することでもあります。
なので、実装の勉強にもなります。

9. コードが長くなってきたら、リファクタリングもAIに手伝ってもらう

Todoアプリでも、機能を増やすと app.js はすぐ長くなります。
そうしたら、リファクタリング案を出してもらいます。

このTodoアプリの app.js を、初心者にも読みやすい形へ整理したいです。
責務ごとに関数を分け、命名も改善してください。
ただし、挙動は変えないでください。

GitHubは、Copilotがボイラープレートや単純作業を減らし、開発者がより重要な問題解決に集中できるよう支援すると説明しています。リファクタリング支援はその考え方にかなり近いです。GitHub

ただし、ここも注意です。
AIの提案をそのまま信じず、動作確認は必ずするようにしましょう。

10. READMEや記事化までAIに手伝ってもらう

AI駆動開発は、アプリを作って終わりではありません。
READMEや記事の下書きにも使えます。

たとえば、次のようなものをAIに頼めます。

アプリ概要
機能一覧
使用技術
工夫した点
今後の改善案
学んだこと

Googleは、ドキュメント整備がその後のAI活用にも良い影響を与えると述べています。cloud.google.com

つまりAIは、実装支援だけでなく、アウトプット支援にも使えるということです。
Qiita記事との相性もかなり良いです。

初学者がハマりやすいポイント

最後に、初学者がハマりやすいポイントも整理しておきます。

1. 生成されたコードを理解しないまま使う

これは一番危険です。
動いても説明できないコードは、あとで直せなくなります。

2. 一度に大きく頼みすぎる

AIは便利ですが、依頼が大きすぎると出力もブレやすくなります。
小さく分けた方が安定します。

3. プロンプトがあいまい

「いい感じに作って」だと、期待したものになりにくいです。
技術、範囲、条件を具体的に書くのが大切です。cloud.google.com

4. テストを飛ばす

AIがコードを書いても、品質確認は別です。
最後に動作確認するのは人の役割です。

5. AIの答えを正解だと思い込む

AIはそれっぽく間違えることがあります。
だからこそ、AIに任せるのは作業、人が持つのは理解と判断です。

まとめ

Todoアプリのような小さな題材でも、AI駆動開発の流れはしっかり体験できます。

今回のポイントをまとめると、次の通りです。

最初に要件整理をする
実装の順番をAIに考えてもらう
最小構成から始める
コード生成後は必ず説明させる
機能追加は1つずつ進める
バグ修正では症状と期待動作を渡す
テスト観点もAIに整理してもらう
最後はREADMEや記事化にも活用する

AI駆動開発は、AIに全部任せる開発ではありません。
人が方向を決めて、AIに下支えしてもらう開発です。

この感覚をつかめると、Todoアプリ以外でも、メモアプリ、家計簿アプリ、簡単な管理画面など、いろいろなものに応用しやすくなります。

まずは小さく作って、小さくAIを使ってみるのがおすすめです。

参考リンク

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！