はじめに
この記事では、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では、新たなメンバーを募集しています。日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！