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

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

PC

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

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

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

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

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

Claudeのススメ

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

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

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

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

Claudeの中では下記のような管理になっています。

/mnt/project/ = プロジェクトに登録された古いファイル
/mnt/user-data/uploads/ = 会話で送った最新ファイル

そこを踏まえたうえで、自分の場合は下記のようなルールを書いてます。

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

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

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

うまくいかないからと怒り始めると、途端に効率悪くなるのは人間と同じなので、冷静に状況を把握しつつ、前向きな提案をしていくのがいいでしょう。大抵はこちらの伝え方が悪かったり、認識違いがあったり、一度に大量の指示をしてしまってる、といった事が原因ですから。

あと忘れがちな点としては、プロジェクトでチャットが長くなってきたら、プロジェクト内に他のチャットを作って続きを仕切り直したほうがいいです。その時にファイルをプロジェクトのファイルとしてアップロードしなおすか、チャットで渡したものを最新にするかは明確にClaudeに伝えておきましょう。ファイルのデグレード(先祖返り)は避けたいですしね。

言語について

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

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

C#について

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

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

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

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

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

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

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

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

あと個人的には実際の操作感・デザインへこだわるべきでしょう。たとえばフォームを移動しようとした瞬間、妙に再描画が走って遅くなったりだとか、TABキーを押すとでたらめな順番でフォーカスが移動するだとか、UIが直感的に分かりづらいとか、このあたりはAIでは絶対に分からないから、自分自身で使い倒して少しでも扱いやすくするのがいいでしょう。

まぁ自分しか使わないツールならその辺り割と適当でもいいと思いますが(自分さえ使いやすければいいですし)、一般公開して他のユーザにも使ってもらうなら、ここはじっくり時間をかけてこだわるべきではないでしょうか。モンキーテスト[C]適当にボタンを叩いたりしても問題が発生しないか確認するテストや網羅テストもできればやっておいた方が無難と思いますが、このあたりはClaudeに相談して提案してもらって実施する、とかでも良い気がします。

最近バイブコーディングが浸透してきていろいろな人のソフトを触る機会が増えてきましたが、UIに関して構築の仕方が微妙に感じることも少なからずありますね。たとえばですが「レスポンシブで単純拡大縮小するのではなく、基準解像度固定+アスペクト比維持+アンカー基準でUI配置してください」的な事を伝えると安定したUIが構築できるのではないでしょうか。

AIって何も指示しないと、明らかにメモリ食いすぎたり処理が重すぎるUIを作ったりしがちなので、アプリを少し大きさ変えたり移動してみて違和感がないか、というところは常に意識したほうがいいと思います。速度が遅いと思う場合、非効率な事をしていることが多いですので、煮詰まってるなと思ったら「WEBで実装方法を調査してください」と一言いうだけで劇的に改善することも割とありがちですね。

C#関連のファイル

.sln

全体的な管理ファイル。

これをダブルクリックするとVisualStudioが立ち上がって、関連するファイルが表示されます。

.cs

C#のプログラムソースファイル。

中身はあまり気にしなくていいです。

.xml

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

最初はブラウザに関連づいてることが多く、そのままだとブラウザで表示して中身を編集することができないので、テキストエディタに関連付けておいたほうがいいです。

.md

リードミーといった説明文を書いてもらう時に使う、マークダウン形式のファイルの総称。

テキストエディタで開けます。AI関連でも何かとよく使う形式。

.Designer.cs

画面フォームのデザインファイル。

Claudeとブラウザでやりとりすると、

Form1.Designer.cs

Form1_Designer.cs

と勝手にアンダーバーつきのファイル名でダウンロードすることになります。

手動で修正して使うか、めんどくさいならClaudeに説明してドット付きにファイル名を変えて提出するように頼みましょう。

中身はあまり気にしなくていいですが、画面デザインが固定なら(可変する要素があまり無ければ)自分でボタン類を配置して部品名だけ決めた状態でClaudeに渡すと、デザイン面でのズレが無くなるかと思います。イベント処理とかはClaudeが適切にやってくれます。

.exe

bin\Releaseフォルダ内に作られる実行ファイル。

ダブルクリックするとアプリ起動します。

他の人に配布する場合、同じフォルダにある.dllは.exeに連動して動く拡張機能みたいなものなので必要です。

.pdbファイルは配布する時はなくてもいいです。

必要な配布対象がどれなのか気になるなら、Claudeに質問しましょう。

ファイルの構成管理

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

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

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

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

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

参考記事

こちらも合わせて読むと、より分かりやすいかと思います。

とほほのClaude入門 – とほほのWWW入門
とほほのClaude Code入門 – とほほのWWW入門

フォームアプリではなくWebアプリを作ろうと思う場合、こちらも参考になると思います。

AIでモノづくりしたいエンジニア未経験者が押さえておきたいWebアプリの基本知識 |柳川慶太

大事な心得

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

最後に

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

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

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

最近話題になってるエンジニア歴20年の私が、素人バイブコーディング勢に物申す #AI – Qiitaという記事ですが、会社で使うというわけでなければ敢えて読まないのも手です。

良いことがかなり書いてますが、個人用のアプリ作成などであれば無関係な内容も多く、最初は意味がよく分かんなくて不安になるだけだと思いますし、慣れてきてから読んでもいいでしょう。それでも読みたいということであれば「おわりに」のところだけ読むのがいいかもしれません。

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

脚注

脚注
A 今どきなら2026でいいかと思います
B webp画像については.Netframework4.8ではうまく扱うのが難しいのですが、フリーDLLを使って処理することで動くようにしてます。.NetCore系が最新環境ではあるんですが、Windows11標準搭載されている.Netframework4.8を使うと、余計なDLL類の配布などが格段に減ります。他の人に配布する場合はこの辺りも意識しておくといいでしょう。
C 適当にボタンを叩いたりしても問題が発生しないか確認するテスト

コメント

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