PR（記事内にアフィリエイト広告が含まれています）
スポンサーリンク
PC

サルでもできるバイブコーディング教室

PC

バイブコーディングについて

バイブコーディング（Vibe Coding）とは、AIに対して作りたい「雰囲気（Vibe）」などを会話形式で伝え、実際のコード生成や修正（場合によってはテストも）をAIに任せる開発手法です。

従来のプログラミングでは開発者がコードを1行ずつ書き、設計やデバッグも自ら行ってましたが、もはやそういう時代ではなくなりつつあります。

今の時代だとClaudeといったAIサービスをつかってツールを依頼して作ってもらえます。

何らかの作業を行っている時、それぞれの工程を分析して、これは人間じゃないとできない、というもの以外は極力ボタン一個で自動に済ませるツールを作る、というのを徹底していくと作業の時間を軽減して、本当に人間が考えていかないといけない部分の時間の確保につながると思います。

Claudeのススメ

一昔前の無料のChatGPTだと、低品質なモデルで変数名なども勝手に変えて構成管理が致命的にできない、というひどい代物でした。

Claudeの場合だと無料でもモデル品質に違いはなく、純粋に使える回数が違うだけなので、まずは無料版で試して構成管理がしっかりしてるのを納得したうえで使うといいでしょう。

Claudeだとプロジェクトという機能を使うことで、同じプロジェクト内の別チャットを参照できます。プロジェクトのチャットを別プロジェクトにも移動できます。よって開発系のチャットは基本的にプロジェクトにて使ってくのがいいでしょう。

ファイルもアップロードしてそこから基準に改修していけますし、手順というところにプロジェクトでのルールを書くと守ってくれやすいです。

自分の場合、下記のようなルールを書いてます。

以下のルールを守って作業してください。
・作業開始時は必ず /mnt/project/ の対象ファイルをgrepまたはsedで確認し、前回の修正が反映済みかを検証してから作業すること。
・未反映の修正がある場合は、それを適用してから新しい修正を加えること。また、反映済みの修正を再適用しないこと。
・必要なファイルが足りない場合は作業せずにまず要求すること
・不明点は先走らず確認を取ること
・選択肢を提示した後は、ユーザーの回答が来るまで自分で答えを出したり話を進めたりしないこと。
・Eagle が関連する部分は https://developer.eagle.cool/plugin-api のAPI仕様書を参照し、存在確認できたメソッドのみ使用すること

あまりたくさん指示せず、少しずつ着実にすすめてくのが重要だと思います。

Claudeが迷走しててなかなか解決しない場合、一度ネットで手法がないか調査させることで正気に戻させるテクニックが重要だと思います。煮詰まってると思ったら、まずは落ち着かせましょう。割と思いつきだったり、他言語での仕様をなぜか使うこともあるので。

言語について

なんでもかんでもC#で作ればいいというわけでもなく、目的によってはHTMLの方が実はやりやすいってことは結構あります。

実際に作る前にClaudeに全体像をまずは説明して、どういう言語・環境で作るのがよいか候補を挙げてもらうといいでしょう。思いつきで次々に命令していくと後から破綻しやすいので、言語選定というだけでなく、土台をしっかりした家を建てるという意味でも、最初に全体像を説明するのは有用かと思います。

C#について

ちなみに手動モザイクツールのMMRですが、VisualStudio2022[A]今どきなら2026でいいかと思います、C#で開発してます。

webp画像については.Netframework4.8ではうまく扱うのが難しいのですが、フリーDLLを使って処理することで動くようにしてます。

.NetCore系が最新環境ではあるんですが、Windows11標準搭載されている.Netframework4.8を使うと、余計なDLL類の配布などが格段に減ります。

自分自身しか使わないツールなら自由でいいと思いますが、他の人に配布する場合はその辺りも意識しておくといいでしょう。

Visual Studioについては下記記事が分かりやすいと思います。バイブコーディングしかしないということであれば、実際にコーディングする手法とかは読み飛ばしてもいいと思いますが、それぞれのファイルがどういう時に使われるものなのか、ビルドして実行ファイルを作るにはどうすればよいか、等を大まかに知っておくと、後から困らないと思います。

C#入門編 Visual Studio 2022 初心者向けガイド ～基本から応用まで～｜C#/.NETプログラミング入門 ～初心者向けガイドから最新AI活用まで～

かなりざっくり書くとこんな感じです。

・Claudeからファイル一式をダウンロード
・.slnファイルをダブルクリック
・VisualStudioが開く
・Releaseモードでビルド
・bin\Releaseフォルダ内に.exeができるのでダブルクリックして実行

このあたりの流れだけ知ってれば、あとは動作確認して何かあったらClaudeに質問して改善してもらいましょう。

極論いうと、自分でコードを修正する必要はないです。

大事なのは仕様の説明、動作確認、などといった人とやり取りする時と同じような点ですね。海外のプログラマーに口頭で依頼するようなイメージです。

C#関連のファイル

.sln
全体的な管理ファイル。これをダブルクリックするとVisualStudioが立ち上がって、関連するファイルが表示されます。

.cs
C#のプログラムソースファイル。中身はあまり気にしなくていいです。

.xml
テキストエディタで開けるファイル。設定とかをこの形式で記載してもらうことが多いです。

.md
リードミーといった説明文を書いてもらう時に使う、マークダウン形式のファイルの総称。テキストエディタで開けます。何かとよく使う形式。

.Designer.cs
画面フォームのデザインファイル。Claudeとブラウザでやりとりすると、Form1.Designer.cs➔Form1_Designer.csと勝手にアンダーバーつきのファイル名でダウンロードすることになります。手動で修正して使うか、めんどくさいならClaudeに説明してドット付きにファイル名を変えて提出するように頼みましょう。中身はあまり気にしなくていいです。

.exe
bin\Releaseフォルダ内に作られる実行ファイル。ダブルクリックするとアプリ起動します。他の人に配布する場合、同じフォルダにある.dllは.exeに連動して動く拡張機能みたいなものなので必要です。.pdbファイルは配布する時はなくてもいいです。配布対象がどれなのか気になるなら、Claudeに質問しましょう。

ファイルの構成管理

ファイルの変更があったときに、どこが変更になったのかを知りたかったり、過去の内容に戻したいこともあると思います。

TortoiseGitを導入すると、GUIでファイルの履歴保存などができるので管理が楽です。

TortoiseGitのインストール方法(日本語化まで)@Windows #Windows10 – Qiita

レポジトリというファイルに履歴が積み上がっていくので、このファイルをOneDriveなどにおいて自動バックアップしておくと安心でしょう。

【TortoiseGit】新規リポジトリの作成とコミットから同期までの手順 Output48

大事な心得

わかりみがありすぎる投稿。超大事。

最後に

この記事では敢えてClaude Codeについては触れておらず、ブラウザ経由でClaudeとファイルをやり取りする流れについて解説しました。

なぜかというと安全だからです。

あくまでプログラミング未経験者がバイブコーディングする手助けのために書いた記事だからです。

また、最近からClaudeを課金して始めようとするとMAXコースしかCodeは対応してないということもあるため、無料または安価なPROコースでも使える手法ということで入門用に説明した次第です。

物足りないと思ったり、危険性と利便性をわかったうえであれば、MAXコースに課金してClaude Codeを使いたおしてくのも良いでしょう。

脚注

脚注
↑A 今どきなら2026でいいかと思います
スポンサーリンク

コメント

タイトルとURLをコピーしました