バイブコーディングの始め方｜無料で1本作る手順と、やってはいけない4つのこと

ふつうのプログラミングとの違い

バイブコーディングでは、コードを書くのはAIで、人は「何を作りたいか」を言葉で伝え、動きを確かめる役になります。表「バイブコーディングとふつうのプログラミング」で、違いを確かめておきます。

いちばん大きな違いは、自分でコードの中身を確かめられないことです。そのため、作る物の範囲を小さく決めることが、安全を守るいちばんの方法になります。

よく出てくる言葉

バイブコーディングを始めると、見慣れない言葉が出てきます。最初は、表「最初に知っておく言葉」の意味だけ分かれば十分です。

ほかに分からない言葉が出てきたら、その場でAIに「初心者向けに2行で説明して」と聞いて構いません。

無料で1本作る手順：メモ帳とブラウザだけでできる

最初は、インストールも登録もいらない「1ファイルで動く道具」を作ります。次の順番で進めます。

1. 作る物を1文で決める：例「今日の作業を追加・削除できる、1日分のToDoリスト」。
2. ブラウザ版AIに頼む：依頼文のひな形「最初の1本を頼む依頼文」をそのまま貼る。
3. メモ帳に貼って保存する：出てきたコードをすべて貼り、ファイル名を「todo.html」にして保存する。
4. ダブルクリックで開く：ブラウザで動けば完成。動かなければ、画面の様子をそのままAIに伝えて直してもらう。

Windows のメモ帳で保存するときは、「ファイルの種類」を「すべてのファイル」にしてください。そうしないと「todo.html.txt」になり、ブラウザで開けません。

• 作る物を1文で決めた
• ファイル名を「〇〇.html」にして保存した（.txt になっていない）
• ブラウザで開いて、追加・削除・再読み込みを試した
• 動かないときは、エラーや画面の様子をそのままAIに伝えた

最初に作る物の例

最初の1本は、1つのファイルで完結し、壊れても困らない物を選びます。表「最初に作る物の例」から、自分がふだん使いそうな物を選ぶと、完成したときの手応えが大きくなります。

どれも、個人情報やお金を扱わない物です。慣れてきたら、同じ物に機能を1つずつ足していきます。

かかる時間の目安

最初の1本は、作る物を決めてから動くまで、30分から1時間ほどを見ておくと安心です。AIがコードを出すのは数十秒ですが、保存の仕方や、動かないときのやり取りに時間がかかります。

2本目からは、保存や開き方に迷わなくなるため、同じくらいの物なら短い時間で作れるようになります。時間がない日は、依頼文を送って動きを見るところまでにして、続きは翌日に回しても構いません。

動かないときの頼み方

ブラウザで開いても動かないときは、何をしたら何が起きたかを、そのままAIに伝えます。例文「動かないときの頼み方」のように書くと、AIが原因を見つけやすくなります。

画面に何も出ないときは、ブラウザで F12 キーを押すと、エラーの文が表示される画面（開発者ツール）が開きます。「Console（コンソール）」の欄に赤い文字があれば、それをそのまま貼ります。

動いた物を確かめる3つのこと

ボタンを1回押して動いただけで、完成と決めるのは早すぎます。次の3つを試して、思わぬ動きがないかを確かめます。

1. いろいろな入力を試す：空のまま追加する、長い文字を入れる、数字だけを入れる。
2. 再読み込みする：ブラウザを再読み込みしても、データが残っているか。
3. 別のブラウザで開く：Edge と Chrome など、別のブラウザでも同じように動くか。

おかしな動きを見つけたら、それも「動かないときの頼み方」と同じ形で、AIに伝えて直してもらいます。

続けるなら：有料ツールは月20ドル前後から

何本か作って続けたくなったら、ファイルを作る・直す・動かすまで任せられるツールに移ります。代表的な2つを表「続けるときの道具」にまとめました。

どちらも料金や無料の範囲がよく変わるため、申し込む前に公式の料金ページを確かめてください。

• 出典：Claude Code Docs：Advanced setup（インストール・必要なプラン）（新しいタブ）
• 出典：Cursor：Pricing（新しいタブ）

Windows で Claude Code を入れるときの注意

Claude Code は Windows 10（1809以降）と Windows 11 に対応しています。公式の手順では、PowerShell で「Windows で入れる1行」を実行します（管理者として開く必要はありません）。

入ったかどうかは、「claude --version」で番号が出るかで確かめます。調子が悪いときは「claude doctor」が設定の問題を一覧にしてくれます。

黒い画面が苦手なら、Claude のデスクトップアプリからも同じように使えます。Cursor の操作はCursorの使い方で説明しています。

• 出典：Claude Code Docs：Advanced setup（インストール・必要なプラン）（新しいタブ）

やってはいけない4つのこと：中身を読めなくても事故を防げる

バイブコーディングで作ったコードは、自分では中身を確かめられません。そのため、作る物の範囲で安全を守ります。次の4つは、慣れるまで避けてください。

1. 作った物を人に配る・公開する：まずは自分のPCの中だけで使う。
2. 本番のデータを渡す：試すときはコピーしたデータを使い、元のファイルは別の場所に置く。
3. パスワードやAPIキーをコードに書く：コードやAIへの依頼文に、そのまま貼らない。
4. お金や個人情報を扱う：集計・整形・変換など、壊れても作り直せる物から始める。

判断に迷ったら、「壊れても誰も困らないか」を基準にします。困る人がいる物は、分かる人にコードを見てもらってから使いましょう。

• 作った物を、自分のPCの中だけで使っている
• 元のデータは別の場所に保管してある
• パスワード・APIキー・個人情報をAIに渡していない

2本目からは「小さく足す」：一度に頼むのは1つの変更だけ

動いた道具に機能を足すときは、1回の依頼で1つだけ頼みます。「期限を付けて、並べ替えて、色も変えて」とまとめると、どこで壊れたか分からなくなります。

動いた状態のファイルは、名前に日付を付けて残しておきます。直しに失敗しても、1つ前に戻せば作り直す必要がありません。

作りたい物が決まらないときは、毎週くり返している作業（集計・名前の付け替え・形式の変換）から探すと見つかりやすくなります。

機能を1つ足すときの頼み方

機能を足すときは、変えてほしくないことも一緒に書きます。例文「機能を1つ足すときの頼み方」のように、今のファイルを貼ってから頼むと、AIが元の動きを壊しにくくなります。

足した後は、「動いた物を確かめる3つのこと」をもう一度試します。前に動いていた機能が壊れていないかも、忘れずに確かめましょう。

外から読み込む物と、通信に注意する

AIが出すコードには、インターネット上の別のファイルを読み込んだり、どこかにデータを送ったりする処理が入ることがあります。最初の1本の依頼文で「外部のライブラリや通信は使わない」と書いたのは、このためです。

外から読み込む物は、後から中身が変わることもあり、自分では確かめられません。慣れるまでは、1つのファイルの中だけで動く物にとどめると、思わぬ通信を防げます。

ブラウザで作って公開まで進むサービスの注意

ブラウザの中で作った物を、そのまま公開まで進められるサービスもあります。手軽な反面、作った物がすぐに人に見える場所に出るため、「やってはいけない4つのこと」の1つ目に当たりやすい点に注意します。

こうしたサービスを使うときも、最初は公開しない設定のまま、自分だけで試します。料金や無料の範囲、作った物の扱いは、申し込む前に公式のページで確かめてください。

人に使ってもらいたくなったら

便利な道具ができると、家族や同僚にも使ってもらいたくなります。その前に、コードを読める人に中身を見てもらい、個人情報を扱っていないか、外に通信していないかを確かめてもらいます。

会社で使う道具にする場合は、会社の決まりで、自分で作った道具を使ってよいかも確認しましょう。確かめる人が見つからないうちは、自分のPCの中だけで使い続けるのが安全です。

慣れてきたら、少しずつ段階を上げる

1ファイルの道具を何本か作れたら、次の段階に進めます。いきなり大きな物に挑戦せず、次の順番で少しずつ広げていきます。

1. 複数のファイルに分ける：画面と処理を別のファイルにしてもらい、ファイルが増えても動くかを確かめる。
2. ファイルを読み込む：自分のPCの表計算のファイル（CSV）を読んで、集計する道具を作る。
3. 道具に任せる：Claude Code や Cursor で、ファイルの作成と修正までAIに任せる。