AIコーディング道場：Windsurf先生といっしょ～Vibe Codingに必要なバイブスはJKが教えてくれた

AIコーディング道場勉強会 #1
https://heroz-job.connpass.com/event/349726/

初心者、初学者がAIコーディングをする場合のLTです。

Transcript

1. Windsurf先生といっしょ Vibe Codingに必要なバイブスはJKが教えてくれた @otb_msk ※本スライドの内容は全て2025.5.14現在のものです
2. 自己紹介 乙部　@otb_msk • 福井県在住、フリーランス（主にセクションナイン様） • ライフワークとして、こども向けプログラミング教室の先生 　⇒ PCN（プログラミング クラブ ネットワーク） 　「すべてのこどもたちにプログラミングを」 　IchigoJam Basic • 開発経験は C++、VB.NET、PHP（素組み）、JavaScript （素組み）など2000年代で止まっている • 近年は事業会社で、発注側企業の情シスをやってた人 ◦ コンタクトセンター AmazonConnect × Salesforce マイグレーション 2
3. うちのWindsurf先生 Windsurf の memory（global_rules.md） 3 # 私のスキルセット - わたしはモダン開発の経験がありません - わたしはCI/CDの経験がありません - わたしはGitHubの使い方がわかりません # あなたの役割 - あなたは、わたしがプログラミングやシステム開発を習得するのを助け、指導する - ステップバイステップで説明する - わたしのスキルセットを考慮して、適切な説明を行う
4. AIコーディングのスタイル/目的（感覚） 自分で構築できる人 自分で構築できない人 ルールを与えて自動コーディング × 意図した実装になっているか確認 品質を担保するための補助エージェント 実装の作業効率を上げるための補助エージェント 実装をたすけてくれるコパイロット 自然言語で頼んで作ってもらう ※あくまで乙部が道場参加者＆界隈を見ていて思う感覚 4 今回の使い方 一番必要なのが バイブス
5. これが Vibe Codingの ノリか！ バイブスで開発 ＝ Vibe Coding Vibe Codingとは • LLMと会話しながら　バイブス（ノリ）で開発する ◦ LLMと会話しながらノリで開発する『Vibe Coding (バイブ・コーディング)』 とは？　https://vibe-coding.jp/entry/2025/03/18/100510 ある高校の情報×探求の授業にて出会った生徒 2025.3 （情報の授業で学んだのはPythonだが、それすら得意ではない） • 作りたいサービスのイメージが先にあって • ChatGPTとケンカしながら（本人談） • まだ不満はあるが、なんとか動くものを作った 5
6. バイブスとは ノリと自然言語でシステム構築する場合の「バイブス」とは 作りたいプロダクトのイメージ ＝ こういうのが欲しい • こういうの作りたい！どうしたらいい？から始める • 作りたい方向へ誘導する • ドキュメントに記録してもらう いかに「欲しいもの」を自分で認識して 言語化できるか （システム発注側の人としてやってたなぁ…） 6 プロダクトの4階層
 （書籍『プロダクトマネジメントのすべて』より）
7. 1か月半で作ったもの 1. 既存プロジェクトの脆弱性対応 ・2日 2. かんたんなAI体験Webアプリ作成 ・10日 ・Next.js, Vercel, Dify, OpenAI API 3. かんたんなAI体験Webアプリ作成-2 ・4時間 ・Next.js, Deno(forkしたプロジェクト) 4. プログラミング教室向けWebサービスの作成 ・実施中（2日目） ・Amplify, Cognito, S3, DynamoDB, Lambda 次々に作った方が、手になじむ ＆ 楽しい 7
8. 実感：モデルによる違い • GPT-4.1　※2025年4月に無料開放されていたので利用 ◦ まず褒める、認める ◦ とても丁寧に説明してくれる ◦ 修正案を提示して「自分で修正しますか？」と促してくれるので習得によい ◦ 「作って」、「修正して」と言えばやってくれるのでラク • o4-mini-medium ◦ 余計なこと言わず淡々とコーディングする ◦ 1プロンプトで進めてくれるので、コスパいい ◦ 勝手に実装して試して、失敗して、修正して試して、失敗して…　のループにハマる ▪ JESTで自動テスト作っていた時 好みもあるが、先生にするなら GPT-4.1 （はじめに触れたモデルを使いやすく感じるバイアスもあるかも） 8
9. 実感：苦手な実装がある 【体験】外部サービスのAPI呼出しは、基本、失敗する • Dify のワークフロー呼出し ◦ エンドポイント間違い ◦ メソッド間違い（GET/POST） ◦ パラメータ漏れ（response_mode: “blocking”） • OpenAI Usage/Cost の取得 ◦ エンドポイント間違い ◦ 言ってることがコロコロ変わる（ドキュメントから、該当箇所を特定できていない） 【対処】自分が理解して修正する • デバッグする • セカンドオピニオン：チャット形式の ChatGPT や Claude に相談する • Curl, Postman でAPI呼出しを試す 9
10. 未経験者や初学者でもノリで開発できる？ 【結論】開発できなくはない • うまくいく条件 ◦ シンプルな仕組みである ◦ 外部APIを呼ばない ◦ バイブス＝欲しいもののイメージがあること • メリット ◦ できる！うごく！たのしい！　＝　成功体験 ◦ さらにバイブスが上がる　＝　強化子 ◦ もっと作るために学ぶ　＝　望ましい行動の強化 10 学び、習得の手段として最適（強化学習）
11. おわり ノリと自然言語で 欲しいもの作ろう！ ありがとうございました 11