お前もAI鬼にならないか？👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー！👺

生成AIを活用したプロダクト開発の実体験に関することを以下の勉強会で発表しました！

【2/16開催！勉強会】ぼく・わたしのエンジニアとしての生成AI活用勉強会！ハンズオンあり！
https://aigeeks01.peatix.com/view

Transcript

1. @taishi_jade Taishi Yamasaki お前も生成AI鬼にならないか？
2. 自己紹介 Taishi Yamasaki C E O A l p h a B y t e , I n c . @ t a i s h i _ j a d e 元々シリコンバレーで起業してCTO プログラミングは独学 + Computer Science Z世代向けのアプリ作ってた 月1プロダクトリリース AI関連のアプリ/SaaSの開発 生成AIプロダクトのPoC/MVP/R&Dの支援
3. 日本版プロダクトハント 開発したプロダクトを投稿するプラットフォーム 1~2週間で開発/リリース 1日2~4時間くらいのコミット Bolt / Cursor / Supabase / Vercel Solomaker.dev 個人開発を盛り上げたい 🎉
4. 画像/動画/音声/声など全部生成できる 3週間くらいで開発 1日2~4時間くらいのコミット Windsurf/Cursor/Supabase/Vercel Stripe/Sentry EIZO.AI 生成の喜びを感じまくりたい
5. 生成AIアプリ 生成AIで生活やエンタメ変えまくり GRWM HabitMax MONA アプリ技術スタック ✅ expo + React Native (Since 2016~) AIエディタ ✅ Cursor / Windsurf バックエンド ✅ Supabase / Firebase
6. 生成AI駆動開発の破壊力
7. 1 Bolt Web上でフロント/バック/DB/認証/デプロイ/ モバイルアプリなどの開発が完結可能 Curor & Windsurf AIでコードが書けるエディタ VSCodeのようなユーザビリティでAIがデフォル トで使える Next.js + Vercel 最強コンボ Next.jsを使っていればCI/CDなど何も考えなく ていい
8. Supabase Supabaseは、Firebaseの代替となるOSSのバッ クエンドサービスで、DB・認証・ストレージを 提供 Radix UI React向けのカスタマイズ可能なUIコンポーネ ントライブラリ Sentry アプリケーションのエラーログやパフォーマン スをリアルタイムで監視するバグトラッキング ＆エラーモニタリングツール
9. 構造生成 技術スタック選定 ライブラリ選定 アーキテクチャ設計 DB/バックエンド設計 インフラ/デプロイ 詳細修正 瞬速公開 Githubにプッシュでデプロイ 環境変数 開発環境構築 1 2 3 QA + 修正 UI/UX調整 コンポーネント共通化 ロジック抽象化 人力+AIコーディング
10. 2 1 3
11. 5 4
12. ✅GOOD ・全体のページ設計 ・フレームワーク、ライブラリ選定 ・Boltに慣れてたら 　1~2時間で全てのページが完成する ❌BAD ・UI…AI感がスゴい 🤮 ・ロジック…認証やDBは未実装(12月上旬) Boltのみで出力した状態
13. Boltだけで完結はしなかった (12月上旬) ローカルにCloneして Cursorでも頑張る
14. 1 2 3 4
15. 色やレイアウトの調整 Figmaでやるようなデザインコンポーネント の作成をいきなりコードでやる CursorでUI/UXを修正していく
16. 躊躇せずに色んなスタイルを試して スクラップ&ビルド CursorでUI/UXを修正していく
17. CursorでUI/UXを修正していく 躊躇せずに色んなスタイルを試して スクラップ&ビルド
18. デザインに関してはデザイナーに任せるのが 本来はベスト でも時間はかかるので省けるならMVPは デザインセンスのあるエンジニアのみでも可 Figmaを最初から完璧に用意するのではなく デザイナーと自然言語で議論しながら進める CursorでUI/UXを修正していく
19. Pro Tips TTTP(徹底的にパクる) 類似サービスのデザインコンポーネントを 観察すると共通点がある 実際に作るとなぜその設計になってるか理由 がわかる CursorでUI/UXを修正していく
20. 例: カードUIを使わない UGCは文字数や画像アスペクト比のコント ロールが難しい レイアウトが崩れてることに気づかせないUI 設計 CursorでUI/UXを修正していく
21. 自分の味は出すように頑張るけど 仕組み的な部分でエゴを出しすぎると 時間を無駄にするので最初から細かい所に こだわりすぎないこと CursorでUI/UXを修正していく
22. Webサービスに 必要な技術 (これで全部じゃない) SEO対策 ユーザー認証 エディタ機能 OGP生成 ISR SSR SSG メール送信 通知機能 いいね コメント 管理画面 決済処理 自動デプロイ アクセス解析 ストレージ最適化 外部API連携
23. Google社内で25%のコードは 既にAIが書いてる 今はプログラミングの方法が 変わり始めてる 自然言語プログラミングの加速
24. 駆動開発は速くなるが 品質が上がるわけではない 引き続き コンピューターサイエンス ソフトウェアエンジニアリング デザイン思考 などは必須 速い≠良い
25. AIが出してくるものを理解する必要 プロンプトでAIがどれくらいできるか 感覚として知っておく必要 QAしてデバッグの繰り返しを高速に AIの守備範囲を理解する
26. ソフトウェアエンジニアの未来 LLMを既存システムに組み込む 生成のプロセス管理(非同期、Webhook、UXフロー設計) 0 to 1のフローならBolt, LovableなどのTxt2Appの活用 Cursor、Windsurfの活用(必須) ClineをGithub Actionに組み込む業務など Devinなどと協業前提でのチーム設計、ワークフロー設計 AIエージェント設計、ノーコード to コードのフロー 開発速度自体は10x当たり前
27. @taishi_jade @ T A I S H I _ J A D E Thank You