プログラミング知識不要でアプリが作れる 「Vibe Coding」入門

プログラミング知識不要でアプリが作れる 「Vibe Coding」入門

Transcript

1. プログラミング知識不要でアプリが作れる 
 「Vibe Coding」入門 
 
 甲斐祐樹

2. 自己紹介 甲斐祐樹（かい ゆうき） 株式会社primeNumber 広報 Senior Manager
3. 自己紹介
4. 自己紹介 ブログ ポッドキャスト
5. Vibe Codingとは 
 

6. Vibe Coding 「Vibe Coding」は、OpenAIの共同創設者でTeslaの自動運転AI責任者としての経験もある Andrej Karpathy氏が2月3日のXへの投稿で提唱した。「雰囲気」や「感覚」を表す「vibe」と コーディングを合わせた造語で、AIモデルに自然言語で指示してプログラミングすることだ。 動作するアプリケーションを構築するのに「コードの存在を忘れて、ただ要求を出し続けるだ け」「完全にその場の感覚に身を任せる」と同氏は言う。 【Infostand海外ITトピックス】コーディングレス開発「Vibe Coding」 AIに指示するだけでアプリケーションを構築 - クラウド Watch https://cloud.watch.impress.co.jp/docs/column/infostand/1672187.html チャットで指示するだけでプログラミングしないプログラミング手法
7. Vibe Coding エンジニアじゃなくてもアプリが作れる
8. Vibe Codingとノーコード ノーコード ドラッグ＆ドロップなどの直感的な画面操作でアプリケーションやWebサービスを開発できる 手法 • 事前に用意された機能の範囲で アプリやWebサービスが開発できる • プログラミング知識は要らないが、ノーコードの操作方法は理解が必要 Vibe Coding AIにチャットで指示してアプリケーションやWebサービスを開発できる手法 • エンジニアのようにゼロから自由に アプリやWebサービスを開発できる • 作りたいアプリのイメージさえあればプログラミングの知識は一切不要
9. Vibe Codingの限界 完璧ではない 指示を出しても指示通りに動作しないことも多々あり、何度繰り返しても完成しないこともあ る • 指示の出し方を工夫する（新人かバイトくらいの感覚で優しく） • 時には諦めて一から作り直す 毎回違う まったく同じ指示を出しても同じアプリはできない Vibe Codingが向いているアプリ • イメージを伝えるデモアプリ • シンプルな機能に特化したアプリ ◦ 機能が複雑になると完成するまでの難易度も上がる
10. Vibe Codingのレシピ ブラウザアプリ Chrome拡張機能 Webサービス
11. ブラウザアプリ 普段使っているChromeなどのブラウザで動作するアプリ • パソコンだけでなくスマートフォンでも使える • HTMLファイル1つなので作成が手軽 • 一般的な生成AIで開発できる（ChatGPT、Gemini、Claudeなど） 制限 • 基本的に自分だけしか使えない • データを残す方法が限定的 ◦ ブラウザのキャッシュ ◦ CSVでエクスポート
12. 資料作成
 

13. 質問です 3,934億8,000万ドルは日本円でいくら？
14. 答えはこちら 桁数が多すぎて読めない
15. ドル円変換アプリ まずはAIにざっくりお願い
16. ドル円変換アプリ できた、のか ……？
17. ドル円変換アプリ 文章をペーストしやすくカスタマイズ
18. ドル円変換アプリ だいたい完成
19. ドル円変換アプリ アプリの右上のプルダウンから 「HTML形式でダウンロード」を選択 ※Claudeの場合
20. ドル円変換アプリ あとはブラウザで開くだけ （保存場所を決めて、ブックマーク登録しても 使える）
21. イベントタイマー 
 

22. イベントの登壇者のタイムキープをするためのアプリ イベントタイマー • 指定した時間でカウントダウン • 一定時間（指定時間の半分など）を超えると黄色 • 残り1分で赤 • 臨機応変に対応できるよう分の加減や次の話者へのスキップ/戻し機能も実装
23. イベントタイマー 仕様 • スタートボタンを押すと最初のアジェンダのカウントダウンが始まる • アジェンダが0になったらそこでストップ • 「次へ」を押すと次のアジェンダに切り替わり、再度「スタート」を押してカウントダウン • 最初の画面は背景が緑、半分になると背景が黄色に、残り 1分になると背景が赤になる現在の時刻を常 に表示 • 画面解像度は16:9、横1920ピクセル、縦1080ピクセルに最適化 • 時間を1分ずつ加減できるボタンを実装 • 次の登壇者へスキップ、前の登壇者へ戻れるボタンを実装 登壇者の入力ルール • 一番上の行がアジェンダタイトル • 2番目の行は話者名 • 3行のうち一番下の分を持ち時間としてカウントダウン 入力サンプル メインセッション 代表取締役 山田まや 30分 ライトニングトーク CTO 原田ラハ 5分
24. イベント受付 
 

25. イベント受付 イベント受付用の管理アプリ
26. イベント受付 慣れると要望が長くなる
27. イベント受付 途中でブラウザを閉じてもデータを保持したい ブラウザのキャッシュを使ってデータを保持
28. ゲーム
 

29. ゲーム 素数をテーマにしたゲーム
30. Chrome拡張 
 

31. Chrome拡張 ポッドキャストの各プラットフォームへのリンクを Xの投稿に設定する拡張
32. Chrome拡張 Chrome拡張機能も生成AIで作れる
33. Chrome拡張 Chrome拡張機能の「デベロッパーモード」をオン、 「パッケージ化されていない拡張機能」で読み込む
34. Chrome拡張 広報が3時間でXの投稿を楽にするChrome拡張機能を作成。 Claudeを使ったVibe Codingで、プログラミング知識無しでも業務効率化 https://note.com/natsumim0804/n/n2e33d1738b4f
35. Webサービス 
 

36. ブラウザアプリの限界 複数ユーザーで利用できない • ユーザーのID管理が必要になる データの保持が限定的 • ブラウザのキャッシュは特定のブラウザのみ 基本的に単独利用 • 他のサービスやアプリ連携は難しい
37. Replit Replit – Build apps and sites with AI https://replit.com/
38. Replitでできること Vibe Coding（チャット）だけでインターネットに公開できるアプリが作れる • インターネットでアクセスできるサーバー（Replitドメイン） • データを保持できるデータベース • Googleアカウントでのログイン Replitですべてが完結
39. 他社比較 アプリを作ってインターネットに公開できるサービスは他にもある
40. Googleログインで機能比較 Google AI Studio Google Cloudの設定が別途必要 Google Cloudで取得した情報を手動で設定する必要がある Firebase Studio Googleアカウントのログインはチャットで実装 Web公開には別途Github Pagesが必要になる Replit チャットで指示するだけでGoogleアカウントログイン機能を実装 全部入りのReplitが圧倒的に楽
41. 料金 無料もあり、有料は25ドルから
42. リファー 以下のQR/UR登録登録で１０ドル分のクレジット https://replit.com/refer/kai3desu
43. デモ
 

44. ソーシャルブックマーク 特定のテーマに特化したブクマ
45. ポッドキャストお便りツール 自作自演ばんざい
46. 書籍貸借システム
47. ワークショップ 
 

48. Replitにお願い こんなアプリを作れますか 休日、お出かけプラン簡単提案 「休日3時間、予算2000円、子供の有無や年齢」と入れるとプランを提案
49. ご静聴ありがとうございました