Lecture 02: Building Applications via AI Conversation & Practicing Vibe Coding
← AI駆動趣味開発講座：まとめページに戻る | ← 第一講へ
はじめに：いよいよ「自分だけのアプリ作り」が本格スタート！
第一講では、Node.js や VS Code のインストール、そして「パソコンがサーバーになる仕組み」をスマホ実機から体感しました。環境の準備、本当にお疲れ様でした！
第二講からはいよいよ、あなたの相棒（生成AI）と一緒に、本格的なアプリの土台を立ち上げ、オリジナルのスマホWebアプリを完成させる実践フェーズに入ります。
今回は、以下のステップで「今日の占いアプリ」の完成から機能の追加アップデートまで一気に進めていきましょう！
- VS Code を起動する（まっさらな状態からスタート）
- 作業用フォルダーを開く（アプリの置き場所を決める）
- 「フォルダーの作成者を信頼しますか？」をクリアする（セキュリティ警告への対処）
-
Vue.js プロジェクトを作成し、相棒AIをスタンバイさせる（
npm init vue@latestと AI パネルの起動） - AIに最初の要望を伝える（自然な日本語でアイデアをオーダー）
- Planモードで計画を立ててもらい、要望を返す（Vuetifyを活用してデザイン崩れを防ぐコツ）
- AIが全自動でコードを書き上げる（ファイル作成・データ定義・状態管理まで全自動）
- ブラウザで完成した「今日の占い」を動かしてみる（スマホ表示で動作確認）
- AIにさらなる機能追加を要望する（「日付が変わらなくても引き直したい！」）
- AIが自律的にロジックを拡張・改修する（シード計算・状態管理・ボタン配置）
- 改修した動作を確認する（即時アジャイル開発の体感）
コードを1行も書かずに、AIとの対話だけでどのようにアプリが組み上がり、進化していくのか、その全手順を見ていきましょう！
【本講座の大前提：趣味開発ルール】
本連載の「コードを読まずにAIに指示を出す」スタイルは、個人の趣味開発・プロトタイプ作成限定です。業務・実務の開発現場では、セキュリティや仕様の検証責任が生じるため、必ずコードの挙動を理解した上で活用してください。
ステップ1：VS Code を起動する
まずは、第一講でインストールした VS Code を起動します。
まだ作業フォルダーを開いていない状態の初期画面が表示されます。ここから今回のアプリ開発をスタートしていきましょう！
ステップ2：作業フォルダーを選択して開く
アプリを開発する際は、そのアプリ専用のフォルダーを1つ用意して開きます。
手順
- 左側メニューの「フォルダーを開く」（または上部メニュー
ファイル→フォルダーを開く）をクリックします。 - 好きな場所（ドキュメントやデスクトップなど）に、新しいフォルダー（例では
test）を作成して選択し、「フォルダーの選択」を押します。
※フォルダー名は半角英数字にしておきましょう。
ステップ3：「フォルダーの作成者を信頼しますか？」のダイアログ
フォルダーを開くと、画面中央にセキュリティ確認ダイアログが表示されることがあります。
「悪意のあるファイル！？」と驚くかもしれませんが、VS Codeの安全確認機能（Workspace Trust）です。自分で作成した安全なフォルダーですので、青いボタンの 「フォルダーを信頼して続行」 をクリックして進めてOKです。
ステップ4：Vue.js プロジェクトの作成と AI のスタンバイ
フォルダーが開けたら、ターミナルから Vue.js 公式のセットアップコマンドを実行し、右側で相棒AI（Cline）をスタンバイさせます。
① ターミナルで Vue プロジェクトを作成
上部メニュー ターミナル → 新しいターミナル を開き、以下のコマンドを実行します：
# 1. Vue プロジェクトの作成
npm init vue@latest
コマンドを実行すると対話形式で質問が表示されます。選択肢（TypeScript、Router、Piniaなどのチェック）の詳しい指定方法は、第一講の手順B（Vue公式ツールでプロジェクトを生成） を参照して選択してください。
# 2. 作成された frontend フォルダーに移動
cd frontend
ターミナルの末尾が test\frontend> になれば移動完了です！
② 右サイドバーで相棒AI（Cline）をスタンバイ
右サイドバーの AI アイコンをクリックしてチャットパネルを開きます。
モデル（例: DeepSeek）を確認し、「What can I do for you?」 と表示されていれば準備完了です！
ステップ5：AIに最初の要望を伝える
準備が整ったら、いよいよ右サイドバーの AI（Cline）に最初のメッセージを送ってみましょう！
■ どんなメッセージを送ればいいの？
難しいプログラミング用語を使う必要はまったくありません。「友達にアプリのアイデアを話すような自然な日本語」 で十分です。
実際の画面では、以下のように入力しています：
携帯用のアプリを作って。とてもシンプルなものがいいな。今日の占いにしよう
たったこれだけです！
「スマホで動かしたいこと」「シンプルなものがいいこと」「題材は今日の占いであること」という核となる要素がしっかり伝わっています。
ステップ6：Planモードで計画を立ててもらい、要望を返す
プロンプトを送ると、Cline は 「Planモード」 でアプリの作り方の計画を一緒に立ててくれます。
■ Planモードなら、AIが一緒に計画を立ててくれる！
Planモードにしておくと、いきなり勝手にコードを書き始めるのではなく、「どういう方針で作るのがベストか」をAIが質問や選択肢を出して相談に乗ってくれます。
今回の例でも、AIが「携帯用アプリの実現形態はどうしますか？（スマホ最適化Webアプリ、PWA、Capacitorなど）」といくつかの候補を提案してくれました。
■ 要望を返す：「Vuetifyを使ってCSSは使わずにシンプルに」
専門的な選択肢に悩んだら、自分の希望を素直に伝えるだけで大丈夫です。今回は以下のように返信しました：
vuetifyは使ってCSSは使わずにシンプルに
【プロの知恵袋】なぜ「Vuetifyを使ってCSSは使わない」と伝えたの？
-
Vuetify（ビューティファイ）とは？:
ボタン、カード、アイコン、レイアウトなどの「見た目が美しい既成パーツ」が最初から大量に揃っている、Vue.js 向けの人気デザイン部品集（UIライブラリ）です。 -
「自作CSSを使わない」メリット:
AIにゼロからCSS（装飾コード）を書かせると、余白のズレやスマホ画面での崩れが起きやすくなります。最初からデザインが完成されている Vuetify のパーツを組み合わせてもらうことで、コード量が激減し、誰が作っても一発で洗練されたマテリアルデザインのアプリに仕上がるのです！
■ 方針が決まったら「Plan」から「Act」へ手動で切り替えよう！
計画と方針が決まったら、いよいよ実際にコードを書いてもらう段階です。ここで絶対に知っておくべきポイントがあります。
前後の画面（質問時と実装完了時）の右下をよーく見比べてみてください。
- 質問や相談のやり取りをしている時（上の画像）: 右下のボタンが
Plan（黄色） - 実際にファイルを作成して実装が完了した時（次のステップの画像）: 右下のボタンが
Act（黄色）
さらっと切り替わっているように見えますが、実は Cline は自動では切り替えてくれません！自分で手動で「Act」に切り替える必要があります。
【要注意】Planモードのままだと、AIは1行もコードを書いてくれません！
Cline には2つの動作モードがあります：
-
Plan（計画・相談モード）:
AIが質問したり、設計方針を文章で相談してくるだけのモード。ファイル作成やコマンド実行は一切行われません（安全のための見守りモード）。 -
Act（実行・実装モード）:
AIがあなたのパソコン上で実際にファイルを新規作成・編集し、コマンドを実行してアプリを作り上げるモード。
方針が決まったら、チャット欄右下のトグルをクリックして「Act」に切り替えてから指示を送るようにしましょう！
ステップ7：AIが全自動でコードを書き上げる！
Act モードに手動で切り替えて返信を送ると、AIが必要なファイルの作成やライブラリの導入を猛スピードで進めてくれます。
■ コマンド（ターミナル）の実行は自分で承認・実行しよう！
コードの生成やファイル書き込みは AI がやってくれますが、ターミナル（cmd / PowerShell）でのコマンド実行は、勝手に動かないよう安全のために自分で「Approve（承認）」ボタンを押すか、自分で実行する必要があります。
AIから「このコマンドを実行してもいいですか？」と確認が出たら、承認ボタンをクリックして進めてあげましょう。
コマンドの実行が進むと、ターミナルにファイル生成のログが次々と流れ、左サイドバーのエクスプローラーにも新しいファイルが自動的に追加されていきます。
AIが作成してくれた主なファイル構成：
-
frontend/src/views/TodayFortuneView.vue: 占いのメイン画面（Vuetifyのカードやボタンで構成） -
frontend/src/data/fortunes.ts: 大吉・中吉・小吉などの運勢データやメッセージ -
frontend/src/stores/fortune.ts: 占い結果を保存する仕組み（1日1回だけ引けるように管理） -
frontend/src/plugins/vuetify.ts: Vuetifyの設定ファイル
■ 「COMPLETED（完了）」の合図
処理が終わると、チャット画面に緑色で COMPLETED と表示されます。
作ったもの:
「今日の占い」— 1画面だけのスマホ向けアプリ (Vue 3 + Vuetify 4 / 自作 CSS ゼロ)
実装完了しました。全工程の検証も通っています。
コードを1行も書くことなく、AIが数分でアプリをまるごと組み上げてくれました！
ステップ8：ブラウザで完成した「今日の占い」を動かしてみよう！
それでは、AIが作ってくれたアプリをブラウザで開いて確認してみましょう！
■ 起動方法
ターミナル（frontend フォルダの中）で以下のコマンドを実行します：
npm run dev
ブラウザで http://localhost:5173/ を開き、第一講で紹介した 「開発者ツールのスマホ表示（F12 → スマホアイコン）」 に切り替えます。
■ 完成した画面を見てみよう！
縦長のスマートフォン画面の中に、とても完成度の高い「今日の占い」アプリが表示されました！
日付が変わるまでは同じ運勢（小吉）がキープされる仕様になっており、Vuetify のカードデザインのおかげで、自作CSSゼロでも市販アプリのような清潔感と美しさに仕上がっています。
ステップ9：AIにさらなる機能追加を要望する
動くアプリができると、実際に触りながら「ここをこう変えたいな」「もっとこうなったら便利かも！」というアイデアが次々と湧いてきます。
■ 実際に触って感じた素直なワガママを伝える
今の仕様では「1日1回だけ」しか引けないため、開発中のテストや、何度も楽しみたいときには少し不便です。
そこで、右サイドバーのチャット欄に以下のように入力してみます：
日付が変わらなくても引き直せるようにしてほしい
たったこれだけです！
「どんなロジックで再抽選するか」や「どこにボタンを置くか」といった細かいプログラムの設計は、すべてAIに任せてしまいましょう。
ステップ10：AIが自律的にロジックを拡張・改修する
メッセージを送信すると、AIが即座に関連ファイルを分析し、全自動で機能の改修と動作検証を行ってくれます。
■ AIが自動で改修してくれたこと
AI（Cline）は、画面にボタンを置くだけでなく、
- 「引き直すたびに結果が変わる抽選ロジック」
- 「日が変われば自動リセットされる保存の仕組み」
- 「スマホで押しやすい『もう一度引く』ボタンの追加と演出」
まで、関連する複数ファイルを全自動で一瞬にしてアップデートしてくれました。
■ 驚きの開発スピードとコスト感
画面右上の消費コストに注目してください。今回の改修にかかった費用はわずか $0.15（日本円で約20〜25円程度） です！
専属プログラマーを雇ったかのように、数秒〜数十秒・数十円で自分の要望通りの機能追加が完了してしまいました。
ステップ11：「もう一度引く」ボタンの動作を確認する
それでは、新機能が追加されたアプリをブラウザで確かめてみましょう！
■ アプリを触ってみよう！
ブラウザを再読み込みすると、画面の一番下に新しく薄青色の 「もう一度引く」 ボタンが出現しています！
ボタンをタップしてみると、画面がサッと切り替わり、今度は 「凶」 😰 の結果にリアルタイムで引き直すことができました！
日付が変わっていなくても、ボタンひとつで何度でもワクワクしながら占いを楽しめるようになりました！
（ちなみに筆者は動作確認中、「凶」ばっかり出るので「ぶっ壊れてるんか？」と思って5回くらい引き直したら最後にやっと「吉」が出ました。ぶっ壊れてたのはアプリじゃなくて俺だった）
【ちょっとした発展のヒント】ローカルストレージ（localStorage）で設定を保存してみても面白い！
今回の占いアプリでは、ブラウザの保存機能である ローカルストレージ（localStorage） を使って「今日引いたかどうか」や「引き直しの回数」を記憶させています。
わざわざデータベースやサーバーを用意しなくても、ダークモードのON/OFFやちょっとしたお気に入り登録などの「軽い設定」であれば、ローカルストレージに保存してみるのも手軽で有効です。「設定をローカルストレージに保存して」とAIにお願いするだけで簡単に実装してくれるので、ぜひ試してみてください！
この開発スタイルこそが「バイブコーディング（Vibe Coding）」
今回みなさんが体験した、「プログラミング言語のコードを一切読まず、AIに自然言語で要望を伝えて形にしていく開発スタイル」 は、今世界中で大きな注目を集めており、「バイブコーディング（Vibe Coding）」 と呼ばれています。
（元テスラAI責任者のアンドレイ・カルパシー氏が提唱したことで一気にトレンドになった言葉です。）
難しいコードの文法やルールを覚える必要はありません。「こんなアプリがほしい」「このボタンを置いて」というあなたのフィーリングやアイデア（ノリ＝Vibe）をAIにぶつけるだけで、専属プログラマーであるAIが即座にコードを書いて動かしてくれる。これこそが、AI時代の新しいプログラミングの形です。
AIとの対話による「反復活動」でアプリを少しずつ良くしていく
バイブコーディングでアプリを作るとき、最も大切なのが「最初から完璧を目指さず、対話の反復で少しずつ育てていく」という姿勢です。
アプリ作りは、上図のように以下のサイクルをぐるぐる回す「反復活動」で進んでいきます：
-
① 作って！（あなたの指示）:
まずはシンプルに「今日の占いアプリを作って」とざっくり伝える。 -
② 生成（AIの作業）:
AIが土台を組み、一気にアプリの形を作ってくれる。 -
③ 確認（あなたの体験）:
ブラウザで実際に触ってみて、「動いた！」「でもここが惜しいな」と確かめる。 -
④ 修正して！（あなたの要望）:
「日付が変わらなくても引き直せるようにして！」と気になった点を素直に伝える。 -
⑤ 再生成（AIの改善）:
AIが即座にロジックを書き換え、アプリがアップデートされる。
この「作って → 触って → 直して」という反復のループを繰り返すことこそが、趣味開発を最高に楽しく、挫折せずに理想のアプリへと仕上げる一番の近道です！
第二講のまとめ
第二講では、まっさらな状態から AI と対話してアプリを立ち上げ、さらに「機能の追加改善」までを体験しました。
| ステップ | 内容 |
|---|---|
| 環境構築 | VS Code でフォルダーを開き、ワークスペースの信頼を許可 |
| プロジェクト作成 |
npm init vue@latest で Vue.js の土台を生成 |
| AIへの指示 | 「携帯用のアプリを作って。今日の占いにしよう」と自然な日本語でオーダー |
| 対話での調整 | 「Vuetifyを使ってシンプルに」と指定し、デザイン崩れのないパーツ構成を採用 |
| モード切り替え | Cline を「Plan」から「Act」に手動で切り替えて実装をスタート |
| 全自動実装 | AIがファイル作成・データ定義・状態管理まで全自動で構築 |
| 動作確認① | ブラウザのスマホエミュレーションで美しい占いアプリが即座に動作！ |
| 機能追加の指示 | 「日付が変わらなくても引き直せるようにしてほしい」とワガママをオーダー |
| 全自動改修 | AIがロジック計算・データ保存・ボタン追加まで一瞬で書き換え（数十円で完了） |
| 動作確認② | 「もう一度引く」ボタンをタップしてリアルタイムに結果が切り替わることを確認！ |
従来のプログラミングであれば、「ボタンの配置」「クリックイベント」「乱数の再計算」「状態の保持」など、何十行ものコードと何時間もの学習が必要でした。
しかし、AI駆動趣味開発なら、「思いついたアイデアを日本語でつぶやくだけ」で、まるで魔法のようにアプリが形になり、どんどん賢く進化していきます。
これこそが、AI時代における最高にクリエイティブで楽しい「趣味開発」の真骨頂です！
次回予告
次回はいよいよ第二部スタート！ 【第三講】Git・GitHubの基礎理解とWindows・SSH環境セットアップ に進みます。
「せっかく作ったアプリのコードが消えてしまったらどうしよう…」
「AIに修正をお願いしたら動かなくなって、元に戻せなくなった！」
そんなトラブルを防ぎ、いつでも安全に過去の状態に戻せるように、エンジニア必須のツール「Git / GitHub」を使ってアプリのコードをクラウドへ安全に保存・管理する方法 を学んでいきましょう！