プログラミング不要！Vibe Coding実践編：完成Promptであなたのアプリを公開しよう | Louis Yang

前回の記事では、Vibe Codingの概念と流れを紹介しました。
しかし実際に操作してみると、さまざまな問題に直面します。

今回は、実際の事例を使って解説します。
妻は中国語の先生で、生徒向けに「漢字とピンインのマッチングゲーム」を作成しました。音声読み上げやスコア表示も含まれ、インタラクティブ性を高めています。

この記事では、「起動」「デバッグ」「理解」の3つのシーンに分けて、ChatGPTへの質問内容、返答、そしてPromptをどう調整したかを具体的に紹介します。

🔗 完成作品：https://afangchinese.github.io/wordmatch/

＊ Vibe Codingの使える範囲や注意点については、前回の記事を参照ください：
Vibe Codingとは？誰に向いていて、何ができる？

シーン①：起動編「ゲームを作りたいけど、どう始めればいい？」

初心者が最もつまずくポイントは、「どこから聞けばいいのか分からない」ことです。

妻が最初に入力したPromptは次の通りです：

ピンインマッチングゲームを作りたいです。HTMLとJSを使ってシンプルなウェブページを作ってください。ユーザーが「漢字ピンイン」を複数行入力して、「スタート」を押すとカードが表示される機能をつけてください。

ChatGPTの返答は以下の機能を備えた動作デモでした：

漢字とピンインのペアを複数入力可能
スタートボタンでカード表示
漢字カードをクリックすると音声が再生（SpeechSynthesis API使用）
正解するとカードが消える

📝ポイント：

自分のスキルレベル、使いたい技術、利用環境などを伝えると、AIの回答がより的確に
最初の出力が完璧でなくてもOK。何度かやり取りしながら調整しましょう
HTML、JS、サーバー、localStorage、ReactJSといったキーワードが分からなくても大丈夫。以下の補足をPromptに加えると安心です：

プログラミング経験はまったくありません。ウェブブラウザで直接動かしたいです。サーバーやReactなどのフレームワークは使わず、HTMLと純粋なJSで作ってください。データ保存が必要な場合はlocalStorageを使ってください。

また、私が調整したPromptは以下のようになります：

漢字とピンインのマッチングゲームを作りたいです。入力欄で複数の「漢字ピンイン」ペアを入力でき、前回の内容も保存されていて、ページをリロードしても消えないようにしてください。「スタート」ボタンで入力内容を使ってカードが表示され、生徒がマッチングするゲームが始まります。正解すればカードが消え、間違えた場合はそのペアが再度表示されます。全問正解で終了し、正解数・不正解数を表示してください。プログラミング経験はありません。サーバーやReactは使わず、HTMLとJSのみで、保存にはlocalStorageを使ってください。

シーン②：デバッグ編「機能が壊れた！どうする？」

この段階は誰でも通ります。以下に実際に出た問題とPromptによる修正例をまとめました：

1. 正解後にカードの数が減ってしまう

正解した後、未マッチの単語からカードを補充して常に4組表示されるようにしてください。

2. 不正解時に赤くならない

不正解のときは、2枚のカードを赤くして、少し待ってからリセットしてください。

3. ピンインカードも音声が出る

中国語の漢字カードだけ音声が出るように修正してください。

📝ポイント：

画面が真っ白になったり、特定の機能が動かなくなったときは、以下のPromptを試してみてください：

コードを貼り付けた後、画面が何も表示されません。ブラウザの開発者ツールを開いて、エラーを調べる手順を教えてください。

シーン③：理解編「このコード、どういう意味？」

AIが提示したコードが何をしているのか分からない、あるいは期待する動作にならないこともあります。そんな時は逐行で説明を求めましょう：

さっきのspeechSynthesisって何？なぜ必要なんですか？

element.classList.add("error")って何のため？ちゃんと動いていないけど、1行ずつ説明してもらえますか？

ChatGPTは以下のように丁寧に解説してくれます：

コード全体の目的
各行の意味
書き換えの可否や代替案

より良くするための補助ツール

(A) ChatGPT + ブラウザだけでも十分！

.htmlファイルにコードを書いてブラウザで開くだけ
開発環境の構築は不要

⚠️制限：

自分のパソコンでしか動かない
　→ 後述の(D) GitHub Pagesで公開可
コードが複雑になるとAIが壊してしまう可能性あり
　→ (B) Cursorで一部だけ修正可能、変更点も分かりやすい
　→ (C) GitHubでバージョン管理、壊れても元に戻せる

(B) Cursor（AIコーディングエディタ）

コーディングとAIチャットが一体化
どこを修正したかが一目瞭然
ファイル分割も可能で管理しやすい

制限：

有料（無料トライアルあり）
安定性を保つには(C)のGitHubと併用推奨

(C) GitHub（バージョン管理）※やや上級者向け

GitHubはエンジニア向けのコード保管・共有ツールです。学習コストはありますが、慣れると非常に便利です。

始めたい場合は以下のステップで：

GitHubアカウントを作成
新しいリポジトリを作成
認証を設定
自分のパソコンのフォルダをGitHubに接続

以下のPromptでChatGPTに一緒に進めてもらえます：

プログラムをGitHubにアップロードしたいです。アカウント作成、リポジトリ作成、認証設定、フォルダ接続まで一つずつ教えてください。

設定完了後は、ターミナル（Terminal）を開き、以下のコマンドでアップロード：

cd [あなたのフォルダのパス]
git add .
git commit -m "Update"
git push -u origin main:main

[あなたのフォルダのパス] を自分のものに置き換え、貼り付けてEnterキーを押せばOKです。安定した状態になったら、この手順でクラウドに保存しておきましょう。

(D) 無料でオンライン公開する方法：GitHub Pagesなど

完成した作品を誰でも使えるように無料で公開可能
(C)の設定が済んでいれば、以下のPromptを使ってChatGPTに公開方法を聞きましょう：

GitHubにアップしたコードを、GitHub Pagesで一般公開するにはどうしたらいいですか？

GitHubを使わない場合も、無料のホスティングサービスをAIに尋ねることができます。

まとめ：アイデアを形にする、その一歩は自分でも踏み出せる

プログラミングで一番難しいのは「書くこと」ではなく、「どう聞けばいいか」と「ツールに慣れること」でした。

今回のプロジェクトは、2晩で完成しました。時間の大半はPromptの試行錯誤と公開方法の学習で、「コードを書く」こと自体は少なかったです。

改めて感じたのは：

AIでのコーディングはすでに実用的。けれど、それを使える形に仕上げる「最後のひと押し」がまだ必要。

この記事が、あなたの「はじめの一歩」を後押しできたら嬉しいです。