入門：バイブコーディングの世界（チャットのAIとコーディングエージェントの違い）

こんにちは。

「業務改善の始め方③：AIと試作する（小さなアプリの作り方・確かめ方・残し方）」では、Windowsに入っているCopilotに指示を出し、動くアプリを作りました。

この結果、誰でもとりあえず、データを入力する簡単なアプリなら作れることがわかりました。入力して一覧と集計を出すくらいのアプリなら、どの対話型AIを使っても、大きな差はなくなってきていると私は考えます。

なので今回は、試作の記事ではきっちり触れられなかったバイブコーディングバイブコーディングとは何かバイブコーディングとは作りたいものを、ふつうの文章でAIに頼み、アプリを作ってもらうこと。テーマパークと同じで、行きはよいよい、帰りはこわい。について、実際にどうやって進めていくのか、実例を踏まえながら分かりやすくお見せしたいと思います。

あわせて、Copilotのようなチャットで答えるツールと、Claude CodeのようなAIコーディングエージェント（以下、コーディングエージェント）とで、バイブコーディングでできるものの精度にどれだけ差が出るかも、実際に見てもらいます。

バイブコーディングの進め方：頼む → 動かす → 確かめる → 直す

バイブコーディングは、次の6つをくり返して進めます。どのAIを使っても、流れは同じです。違いが出るのは、3の「保存して動かす」と、5の「直す」です。

手順	チャットで答えるAI（Copilot）	コーディングエージェント（Claude Code）
1 作るものを指示書にする	目的・入力・処理・出力・制約を書く	同じ
2 AIに頼む	新しい会話に指示書を貼る	アプリを置くフォルダで頼む
3 保存して動かす	返ってきたコードを人が保存し、ブラウザで開く	AIがファイルに書く。人がブラウザで開く
4 確かめる	登録・一覧・集計・CSVを、人が実際に触る	同じ（AIは、頼まないとブラウザでは確かめない）
5 直す	指示書を直して、全体を出し直す	直したい点だけを伝える
6 残す	渡した指示書と、版ごとのファイルを人が取っておく	指示は会話の記録に残る。決めたことはAIが説明のファイルに書く

1の指示書の書き方は、試作の記事のステップ1で紹介しています。

ここから先は、5の「直す」で何が起きるかを、実際に試した結果でお見せします。

無料の限界：直すたびに全体を出し直すしかない

Copilotの「直す」は、プロンプトを直して全体を出し直すこと

表の5のとおり、Copilotで直すときは、直したい点をプロンプト（指示書）に書き足し、Copilotがコード全体を書き直して返します。

Copilotは、あなたのパソコンにある前の版のファイルを開いて、一部だけを書き換えることはしません。毎回、プロンプトも、返ってくるコードも、まるごと扱うことになります。

では、同じプロンプトで出し直すと、毎回同じものが返ってくるのでしょうか。試作の記事の最後に使った指示書（その記事の補足資料で配っているもの）を、そのまま新しい会話に貼って、3回試しました。

先に結論を書いておきます。

• 1回目は、コードが出てこなかった。新しい会話で出し直すと出た
• 3回とも、指示書に書いた機能は入っていた
• 指示書に書かなかったところ（日付の初期値、一覧の並び、入力欄の順番）は、毎回変わった

1回目は、コードが出てこなかった

1回目は、コードが返ってきませんでした。

指示書の「コードの途中省略禁止」「最後まで出力」を守れないので、出力できない、という返事です。念を押すつもりで書いた一文が、断る理由に使われました。

マジかよ。お前その程度なのかよ！　・・・、正直こんな感想でした。

続けて頼むと、Copilotは「完成版HTMLを分割して出力」「HTMLファイルを生成して添付」などの選択肢を出してきました。「HTMLファイルを生成して添付」を選ぶと、届いたファイルの中身はこれだけでした。

指示書には「ダミー処理は禁止」と書いてあります。それでも、中身のないファイルが届きました。

試作の記事でも、最後は新しい会話に指示書を貼って作り直しました。今回も、新しい会話で同じ指示書を貼ると、動くHTMLが返ってきました。2回目・3回目も新しい会話で同じ指示書を貼り、どちらも最初の返答で出てきました。

書いたことはそろい、書かなかったことは毎回変わった

3つのHTMLには、指示書に書いた機能がどれも入っていました。必須チェック、作業時間の計算、月の選択、CSVの書き出しと読み込みなどです。

違いが出たのは、指示書に書かなかったところでした。

	1回目	2回目	3回目
日付の初期値	朝9時前は前日になる	朝9時前は前日になる	今日
一覧の並び	日付の新しい順	日付の新しい順	登録した順
入力欄の順番	作業内容が時刻の前	作業内容が時刻の前	時刻が作業内容の前

たとえば一覧の並びです。11月2日と10月30日の記録を、この順に登録しました。1回目は、日付の新しい11月2日が上に来ます。

3回目は、あとから登録した10月30日が上に来ます。

指示書には「新しいデータが上に表示されること」としか書いていません。「新しい」を日付と読むか、登録の順と読むかを、AIが回ごとに決めたわけです。昨日の分を今朝つける現場では、3回目の版だと、一覧の一番上が最新の日付とは限りません。

入力欄の順番も変わりました。指示書では、作業内容、開始時刻、終了時刻の順に番号を振っています。1回目はその順ですが、3回目は時刻が作業内容より前に来ました。

日付の初期値は、3回で安定しませんでした。3回目が正しかったのは、直ったからではありません。たまたまです。

実は、試作の記事で配ったサンプルのアプリも、載せる前に、日付の初期値がずれる不具合を直していました。同じ不具合が、出し直すたびに出たり消えたりしているのです。

指示書に書いたことはそろい、書かなかったことは毎回変わる。3回の出し直しで分かったのは、このことです。

無料のCopilotで進めるときの要点

ここまでの結果から、無料のCopilotで進めるときの要点をまとめておきます。

• 直すときは、プロンプトを直して、そのつど出し直させる
• プロンプトに細かく書き込んで、出力の精度を上げる。書かなかったところは、出し直すたびに変わるからです
• ただし、言語モデル（LLM）に入力できる量には限度があります。その文字数の限度をよく見極めながら、プロンプトを作る必要があります

要するに、プロンプトを残して、それを改良し続けるしか手がなさそうです。プロンプトは、使い捨てにせず、ファイルに保存して育てていきましょう。

プロンプトの例として、試作の記事で使った指示書を置いておきます。

• 試作の記事で使った指示書（テキストファイル）

なぜそうなる？チャットで答えるAIとコーディングエージェントの違い

チャットで答えるAIは、コードを「文章」として返す

Copilotのようなチャットの中心にあるのは、言語モデル生成AIとは何か会話、ストーリー、画像、動画、音楽などの新しいコンテンツやアイデアを作成できる AI のこと。（LLM）です。言語モデルは、頼まれたことに文章で答えます。アプリのコードも、文章の一種として返します。

返ってきたコードを保存するのも、ブラウザで開いて確かめるのも、人の仕事です。前の版と比べるのも、人がファイルを取っておかなければできません。

なお、試作の記事では「対話型AI」と呼んでいましたが、この記事では「チャットで答えるAI」と呼びます。次に出てくるコーディングエージェントも、対話しながら使うからです。

コーディングエージェントは、ファイルを読み書きして動かすAI

コーディングエージェントは、言語モデルに、ファイルを読む・書き換える・コマンドを動かす機能を持たせたものです。

この記事で使ったClaude Codeの公式の説明にも、こうした機能がなければ文章で答えることしかできず、機能があればコードを読み、ファイルを書き換え、コマンドを動かせる、と書かれています（出典：How Claude Code works）。

並べると、次のようになります。

	チャットで答えるAI（無料のCopilot）	コーディングエージェント（Claude Code）
すること	コードを文章で返す	パソコンのファイルを読み、書き換える
保存と確かめ	人がする	保存はAIがする。確かめは頼めばする
直し方	全体を出し直す	関係する箇所だけを書き換える
前の版との関係	前の版を見ていない	今あるファイルを読んでから直す

違いは、会社や製品の違いではありません。チャットか、エージェントかの違いです。

Claude Codeで直すと、変わること・変わらないこと

変わること：今あるファイルの、関係する箇所だけを書き換える

試作の記事でCopilotが作ったアプリを、Claude Codeで直してみました。現場で出そうな要望を、1つずつ9回伝えています。

• 開始時刻・終了時刻を、8:00〜22:00の10分刻みでしか選べないようにする
• 作業内容に、過去に入れた内容を候補として出す
• 備考欄を足す
• 終了時刻は、あとから入れられるようにする
• 一覧に「編集」ボタンを足して、登録した記録を直せるようにする

などです。

Claude Codeは、毎回ファイルの関係する箇所だけを書き換えました。全体を出し直すことは一度もなく、新しい会話でやり直すこともありませんでした。返事はどれも2分以内です。

直す前の作業入力です。

直したあとの作業入力です。直したところは次のとおりです。

• 必須の項目に、赤い「*」を付けた
• 開始時刻・終了時刻を、時と分のプルダウンにした（8:00〜22:00、10分刻み）
• 作業内容を1行にして、過去の入力を候補に出すようにした
• 補足を書く備考欄を足した
• 登録の隣に、クリアのボタンを足した

一覧の「編集」を押したときの画面です。

• 登録した記録の内容が、入力欄に読み込まれる
• 上に「修正モード」の案内が出る
• 登録を押すと、その記録が上書きされる

ほかにも、チャットでは起きなかったことがありました。

• 指示から起きることを、先に言った。候補を出すと作業内容が1行になる、と先に教えてくれたので、私は備考欄を足す指示を出せました。10分刻みにしたときは、CSVの読み込みでは時刻をチェックしていない、と注意してくれたので、CSVもチェックする指示を出しました
• 決めたことを、自分で書き残した。変更のたびに、利用者向けの入力ルールのメモと、AI向けの説明のファイルを書き直しました。渡した指示を自分でメモに写して残す手間が、ずいぶん減ります

3回くり返すと、作りは違っても、違うと言ってくれる

Copilotと同じように、Claude Codeでも3回くり返してみました。毎回新しい会話で、Copilotに渡したのと同じ指示書からアプリを作らせ、そのあと上の手直しを同じ順に渡しています。このときは、指示を順に流す使い方で試したので、途中で質問が来ても答えていません。

3回とも、最後の手直しまで12〜14分で終わりました。1回の返事は長くて2分半です。毎回、ファイルの関係する箇所だけを書き換え、全体を出し直すことはありませんでした。

ただし、3回とも同じものができたわけではありません。指示書に書かなかったところは、Claude Codeでも回ごとに違いました。

	1回目	2回目	3回目
作った直後の一覧の並び	日付の新しい順	登録した順	日付の新しい順
入力欄の順番	時刻が作業内容の前	時刻が作業内容の前	作業内容が時刻の前
10分刻みにしたとき、CSVの時刻も止めたか	止めた	止めた	止めずに「止めることもできます」と聞いてきた

Copilotとの違いは、自分で決めたことを、毎回言葉にして返してきたことです。最初の返事には3回とも、「要件書に書かれていなかったため、こちらで決めたこと」が並んでいました。CSVの読み込みは今のデータとの置き換えにして、確認の画面を出す。一覧は日付の新しい順にする（2回目は登録した順と書いていました）。違いがあっても、どこが違うかが読めば分かります。

Copilotで出た日付の初期値のずれは、3回とも出ませんでした。最後には、3回とも同じ機能がそろいました。前の手直しを残したまま、次の手直しを重ねていけたからです。

Claude Codeは、コードを1つずつ見たうえで、指示にピンポイントで答えてくれます。精度がいいのは当然だと思います。

一方で、AIは前提を与えないと、プロンプトに書いていないことを自分で補って、それっぽく対応してしまいます。人から見ると「AIが余計な振る舞いをする」部分です。チャットで答えるAIでは、これを防ぐためにプロンプトを完璧にしていく直し方になり、そこがしんどいと感じています。

変わらないこと：確かめるのは、やはり人

Claude Codeで直しても、次のことは変わりませんでした。

• 現場の決まりは、人が言わないと入らない（10分刻みの例を書いても、0:00〜23:50で作った。8:00〜22:00は、言ってはじめて入った）
• ブラウザで動かして確かめるのは、頼まないとしない
• 頼んでいない処理を足すことがある（3回とも、修正中にCSVを読み込むと新規の状態に戻す処理を、自分の判断で足した）

アプリが動いたあとの悩みも、AIを替えても残ります。置き場所（サーバー）、セキュリティ、使いにくいと言われたときの直し方、AIが余計なことをしていないかの確かめ方です。

テーマパークにたとえるなら、バイブコーディングは、行きはよいよい、帰りはこわい。パークの中では、チームでも一人でも、「あっちも、こっちも」に振り回されないよう、自分で選んで計画する力が要ります。AIへの問いの立て方も同じです。コーディングエージェントは、アトラクションの待ち時間や、自分の計画に対して最適な順序を出してくれるナビゲーション機能に当たると私は考えます。ただし、どこへ行くかを決めるのは自分です。

まとめ

バイブコーディングの進め方と、チャットで答えるAIとコーディングエージェントで、直し方がどう違うかを見てきました。

1. 試作までは、無料のCopilotで形になる（試作の記事では、登録・集計・CSVまで動いた）
2. ただし、直すたびに全体を出し直すしかない（同じ指示書でも、書かなかったところは毎回変わる）
3. 違いは、チャットかエージェントか（エージェントは、今あるファイルの関係する箇所だけを書き換える）
4. エージェントでも、確かめるのは人（現場の決まりを伝えるのも、ブラウザで確かめるのも人）

Copilotしか使えない現場でも、作れるものはある

自分で作ったアプリを、さらに使いやすく、多機能にしていくには、Claude Codeのようなコーディングエージェントが、ほぼ必須になってきます。

ですが、Copilotしか使えない現場であっても、これまでの記事で示してきたように、業務の無駄をなくすツールは十分に作れます。必要なのは、無駄を見つける視点と、どう改善してあげるかの知恵です。現場の数だけ、とれる対応は様々です。

• Excelの表が中心の現場なら、入力に時間がかかっている部分を自動化するツールや仕組みを組み込む
• 業務用のシステムを使っている現場なら、システムから出るCSVを集計して、グラフにするアプリを自作してみる

その一助として、今回はバイブコーディングについて紹介しました。ぜひ、この技術から現場の改善に役立つものを生み出して、日々に＋＋してあげてください。

補足：費用とインストール、現場での選び方

Claude Codeは有料で、インストールが要る

Claude Codeは、無料のプランでは使えません。Pro以上のプランが要ります。Proは月払いで20ドル、年払いなら月17ドル相当（200ドルを一括）で、税は別です（2026年11月時点。出典：Claudeの料金プラン、Set up Claude Code）。

インストールは、Windows 10以降のパソコンで、管理者の権限がなくてもできます。ターミナル（黒い画面）を使わない、デスクトップアプリもあります（出典：Set up Claude Code）。

一方、無料のCopilotには、何回まで使えるかの数字が公式には出ていません。Microsoftは、機能と使用量が限られた無料版を提供していて、上限に達したら、有料プランにするか、しばらく待つと使える、と案内しています（出典：個人向けの料金ページ）。

試作はチャット、使い続けるならエージェント

ここまでをまとめると、使い分けは次のようになります。

場面	向いているもの
画面の形を決める、試作して動きを確かめる	無料のチャット（Copilotなど）
現場の要望を受けて、何度も直しながら使い続ける	コーディングエージェント（Claude Codeなど）

インストールできない現場では、既存のツールの穴を埋める程度に

では、ソフトをインストールできない現場では、どうすればよいでしょうか。

やっぱり、作ったものを効率的に改善できない以上、簡単な入力ツールくらいしか作れないと思います。

なので、基本的には、既存のツールでできないことを補うようなツールを、自分たちで作っていく程度にとどまるはずです。コーディングツールがないと、なかなかバイブコーディングを進めていくのは難しい、というのが私の結論です。

コーディングエージェントも、前提を与えて育てる

私も、仕事でコーディングエージェントを使っています。

ただ、コーディングエージェントも最初のうちは、今回チャットで答えるAIを使ったときと同じように、前提を与えていないと余計なことをしてしまいます。そのため、そのつどドキュメントやコンテキスト、前提を与えて、育てていく必要があります。

今回の手直しでも、Claude Codeは変更のたびに、AI向けの説明のファイル（CLAUDE.md）を自分で書き足していました。これが、前提を与えて育てる入口です。

補足：MicrosoftのCopilot Code

Microsoftも、Copilotアプリの新しいタブとして「Copilot Code」を出してきました。パソコンのフォルダの中のファイルを読み書きし、アプリを動かして画面を確かめ、前の版に戻すこともできます。つまり、コーディングエージェントです（出典：Copilot Code overview）。ただし2026年11月時点ではプレビューで、先行プログラム（Frontier）への参加と、個人なら対応するCopilotの個人向けプランが必要です（出典：Copilot Code requirements）。この記事で使った無料のCopilotは、チャットのタブで答えるものです。