AIに開発させる時代のプログラミング入門－第5回：AIと一緒にアプリを作ってみよう【生成ＡＩをやさしく解説】

この記事のポイント

・シリーズ最終回。AIと一緒にアプリを作る流れ を実例で紹介
・「作りたいものを伝える → コードを確認 → 修正を頼む」の 3ステップ で進む
・5回シリーズの 振り返り と「これからやるべきこと」のまとめ
・読み終わったあと、今日からAIと開発を始められる

この記事のゴール：実際に動くアプリを作る

これまでの4回で、バイブコーディング・AIエージェント・antigravity・指示の出し方を学んできました。最終回では、それらを 1つにまとめて、実際にAIと一緒に簡単なアプリを作ってみましょう。

今回のお題は 「英単語を入力すると、その語の意味と例文を表示する単語学習ツール」。シンプルで、誰でも作れるレベルです。

ステップ1：作りたいものをAIに伝える

図1：AIによるプログラム作成の手順

AIへの最初の指示の例

HTML/CSS/JavaScriptで、英単語学習ツールを作ってください。
要件：
- テキスト入力欄に英単語を入力し、ボタンを押す
- 入力された単語の意味（日本語）と例文（英語）を表示
- 辞書データは固定で apple/book/cat/dog/egg の5語をJSで持つ
- スマホでも見やすいよう最大幅400px、白基調
- 単語が辞書になければ「データなし」と表示
- 1ファイル（HTML内にCSSとJSを書く）で完結

ポイントは、機能・データ・見た目・制約を1セット で伝えること。これでAIの判断がブレません。

ステップ2：AIが生成したコードを確認する

図2：AI生成コードの確認プロセス

AIから返ってきたコードを、実際に動かして 確かめます。

・テキストエディタに貼り付けて .html で保存
・ブラウザでファイルを開く
・5語の単語で動作テスト（apple/book/cat/dog/egg）
・辞書にない単語（例：sun）でも試す

ここで「動いた／動かなかった」を確認するのが大事です。動かない場合や、想定と違う動きがあれば、次のステップへ。

ステップ3：AIに修正を頼む

たとえば、こんな修正を頼んでみます：

追加の依頼：
- 入力欄の下に「最近検索した単語」を3つまで表示してください
- 検索履歴は localStorage に保存して、ブラウザを閉じても残るように
- 履歴の単語をクリックしたら、その単語が再検索されるようにしてください

このように 段階的に肉付け していくのがバイブコーディングの基本です。一度に大きく変えるより、1つずつ機能を増やす 方が成功率が高くなります。

AI時代の開発の特徴

図3：バイブコーディングの改善サイクル

従来の開発	AI時代の開発
仕様書を書く	「作りたいもの」を 言葉で 伝える
コードを書く（数日〜数週間）	AIに頼む（数分〜数時間）
テストする	実際に動かして 気づく
バグを直す	AIに 状況を伝えて 直してもらう
納品	動くまで 会話で 詰めていく

特徴は 「サイクルが速い」 こと。1日に何回も「作って→試して→直す」を繰り返せます。

ビジネスパーソンにとっての可能性

図4：AI時代の開発スタイル

バイブコーディングが日常になると、ビジネスパーソンの仕事の幅が大きく広がります。

・自分専用のツール を1日で作れる
・エンジニアに頼まずに プロトタイプ を試せる
・「これがあれば便利」を その場で形に できる
・社内DXの たたき台 を非エンジニアが提案できる

Stack Overflow Developer Survey 2025 によれば、開発者の 84%がすでにAIツールを開発プロセスで使うか、近々使う予定 と回答しています。これからは、非エンジニアにもこの波 が広がっていきます。

シリーズのまとめ

全5回を振り返ると、こんな流れでした。

回	テーマ	キーポイント
第1回	バイブコーディング	「コードを書かない開発」の登場
第2回	AIエージェント	「答える」から「進める」AIへ
第3回	Antigravity	複数エージェント並行で動く新世代ツール
第4回	進め方	「指示力」が成果の9割を決める
第5回	実践	3ステップで動くアプリを作る

明日からの3つのアクション

① 今日のお題（単語学習ツール）を実際にAIに頼む
ChatGPT・Claude・Geminiのいずれでも構いません。動くまで試してみる。

② 自分の業務の「あったら便利なツール」を1つ書き出す
書き出したら、要件を5項目に整理してAIに伝える。

③ 1週間に1つ、新しいツールを作る習慣をつける
完成度より 数。慣れるほど指示が上手くなります。

おわりに

バイブコーディングは、エンジニアでなくても 「自分が欲しいもの」を自分で作れる 時代の入口です。難しいプログラミング知識は不要。必要なのは 「何を作りたいか」を言葉にする力 だけ。

このシリーズが、その第一歩のきっかけになれば嬉しいです。次の月曜日、ぜひAIに 「○○を作って」 と頼むところから始めてみてください。

<文/岡崎 凌>