Geminiで要件定義してBolt.newでプロトタイプつくってGemini CLIとWindsurfに機能追加させてRenderにデプロイした全部無料の個人開発の話

346 Views

July 31, 25

スライド概要

Engineer Unite Meetup vol.1 2025/7/31の資料です

profile-image

島根県に生息しています。プロダクトエンジニアです。 株式会社Helpfeelでエンジニアリングマネージャーをやっています。ワークアット株式会社に所属しています。 コワーキングスペースenunでコミュニティマネージャーをやっています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

各ページのテキスト
1.

Geminiで要件定義して ト ロ プ で ew n . t l Bo て っ く つ プ タイ Gemini CLIと Windsurfに機能追加させて Renderにデ プ ロイした 話 の 発 開 人 個 の 料 全部無 Engineer Unite Meetup Vol.1 角田 徹 株式会社 Helpfeel / ワークアット株式会社

2.

Who am I? What I do? enun コミュニティマネージャー 株式会社 Helpfeel エンジニアリングマネージャー ユニットリーダー ワークアット株式会社 CTO 8歳当時

3.

今日話すこと Requirements チャット型汎用LLMと要件定義を行う Prototype AI開発プラットフォームでプロトタイプをつくる Development AIエージェントと機能を追加する Deploy クラウドサービスにデプロイする

4.

今日話さないこと Best Practices 自分がこう使ったというN1を語ります Implement 組織の話ではなく個人レベルの話をします Monetize 趣味やその延長の個人開発が対象です Foresight 2025年7月にこう使ったという記録です 今日のはなしは個人の見解に基づいており、所属するいずれかの組織を代表するものではありません

5.

登場するサービスの整理 Gemini …… チャット型の生成 AIサービス。 ChatGPTとかClaudeの仲間。 流行ったきっかけ。派生も多ければ今も機能がどんどん増えてる。 Bolt.new …… プラットフォーム統合型生成 AIサービス。 v0とかLovableの仲間。 技術スタックが予め決まっているかわりによしなにやってくれる。 Windsurf …… エディタ統合型エージェント。 CursorやVSCodeのPluginの仲間。 Windsurfは買収されたり引き抜かれたりたいへんそう。 Gemini CLI …… ターミナル統合型エージェント。 ClaudeCodeやCodexの仲間。 シェル叩いてくれるのでファンが多い気がする。 Render …… PaaS、HerokuとかFly.ioの仲間。 CloudflareとかVercelとかAWSとかGoogleも広い意味では仲間。 その他 …… DevinとかOpenHandsのような仮想マシン型とかブラウザ特化型とか いるけど網羅しきれないので自分で調べてください。 あと〜〜型というのは独断と偏見でいってるだけなのでマサカリ飛ばし たくなったひとはぜひ交流会でお願いします

6.

Requirements 「それはそれとして最近使ってる面白いツー ルやサービスがあれば情報交換しましょ う!」とか書いたんで情報集めたいよなーで もアンケート取るほどじゃないしいい感じに リアルタイムで集計できる仕組みはないか なmentimeterとかSlidoとかにあるけどそ のために使うのも面倒だなぁまぁせっかくだ から試しにつくってみようかな QRコードで参 加は必須にしたいけどこの用途だとデータ の保存はいらんのでそれは条件に入れてお こうそれで Bolt.newのクーポンもらったので つかえるから条件をそれにしてと

7.

Requirements ● 要件定義の記述に使う ○ ChatGPT, Gemini, Claudeなど ○ チャット型の汎用生成 AIでも十分 ○ 検索が統合されていると調査も便利( DeepResearch) ○ 対話的に往復して練っていってもよい ○ 別にチャットにこだわる必要はない

8.

Prototype Lovableは最近つかってないので解約した し次は違うツール使おうあちょうどハッカソン でクーポン配ってたから Bolt.new試してみ るかふむふむ NetlifyとStripeとSupabase 対応してるのね Supabaseつかうと楽そうだ けど保存まではいらんなぁ最後スクショ残し とけばいいあれ Bolt.newのプレビューだと うまく動かんなーなんでだろ、あ、 Socket.IOつかってるのかそれはうごかん わーあーどうしよとりあえず GitHubにあげ て手元に落として続きするか

9.

Prototype ● プロトタイプをつくってもらう ○ v0, Lovable, Bolt.newなど ○ 技術スタックが限定される代わりに VercelやNetlifyのインフラや SupabaseやStripeなどのサービスが統合されてて便利 ○ GitHub連携も簡単にできる ○ 技術スタックが適合しなければ使う必要はない ○ アイデアや UIの検証などで捨てる前提で使ってもよい

10.

Development とりあえず WindsurfでもCloneしてコードみ ようまずサーバプロセスがなくても動くように Cloudflareの機能だけで動くようつくりかえ られるか GeminiCLI立ち上げてタスク投げ てやらせてみようあれ提案してきたやつって 有料機能っぽいな、あ、やっぱり無料機能 前提でよろしくまぁ念の為 Socket.IOつかっ たままでも動かせる環境探すか他にも機能 とかデザイン直したいし目に来るので投票 や結果は白基調にしておこう word-cloud のlibがReactの18に対応してないみたいだ からそれも置き換えてと ChatModeでみて からApplyしよう

11.

Development ● 投機的に機能追加 ○ Gemini CLIにSocket.IO脱出を試させる ○ WindsurfでRenderにデプロイする前提で機能追加 ○ Bolt.newに古いライブラリを置き換えさせる ○ Gemini CLIとかWindsurfを複数立ち上げて実行しても良い ○ CodexとかGitHub Copilotを混ぜても良い ○ ブランチ分割して開発してダメならブランチごと消せばよい ○ Git最高

12.

Deploy 昔ならHeroku一択だったんだけど無料プラ ンがなくなったので代替の fly.ioかrender 使うか今回は renderでよいかえーと仮想マ シン二つ必要かなこの程度の機能でそれは もったいないななんとかならんかなおしえて AI、あ、バックエンドが server.jsでフロント エンドはビルドしておいとけばいいのかそ りゃそうかこれなら仮想マシンひとつですむ し楽ちんだなえーとリポジトリとブランチ指定 しとけば自動デプロイかこれも楽ちんだない い時代だ

13.

Deploy ● 好きなサービスを使えば良い ○ 今回はSocket.IOを使いたかったから Renderにした ○ frontendだけなら無料枠があるサービスの選択肢が豊富 ○ 使い方も生成 AIが教えてくれる ○ GitHub連携でも生成 AIにコマンド書かせるでも楽はできる ○ 料金と自分の手間を比較して好きなものを使えばいい

14.

Q. こんなに使いわける必要ある?

15.

A. ないですね!

16.

Boundary ● ツールの境界はあいまい ○ やろうと思えばひとつのツールだけで全部完結できる ○ DevinやOpenHandsのようなフルスタックタイプもある ○ それぞれがそれぞれの良い点を取り入れて改良し続けている ○ 日々できることが増えて他の領域に染み出している ○ 新サービスも日々生まれてきている ○ インフラにしても Supabase使えばエコシステムが使えた ○ しいていえば分散されるのでトークンがやや節約できるかも

17.

Q. もうエンジニアいらない?

18.

A. そうなったらいいですね!

19.

Mastery ● より高い練度が求められる ○ 「問題の構造は変わらず、圧倒的に顕在化が早まっただけ」 ○ つまり高いレベルのエンジニアに対するニーズは高まった ○ アウトプットとアウトカムはイコールではない ○ ライフサイクルが短い書き捨てならよいが基本そうではない ○ 仕事を任せることの難しさはポイントが変われど残る ○ 生成AIをどこでどう使うかどうやってチームに加えるか ○ 説明責任、という言葉を噛み締める 1 1 twada AI時代のソフトウェア開発を考える(2025/07版) https://speakerdeck.com/twada/agentic-software-engineering-findy-202507-edition

20.

手を動かせ 肌で感じろ

21.

Trial and error ● 使い心地や感触を知ることは大事 ○ タイトルに「全部無料」をつけたのは触って欲しいから ○ 使ってみることで自分の中で基準ができる ○ なにができてなにができないかわかる ○ つまり自分になにが必要かがわかる ○ うまくいかないときの立て直し方は試行錯誤で身につく ○ いきなり新技術が出ているようにみえても漸進的なもの

22.

Documentation is key ● 記録が自分を助ける ○ 流れが早いので今を切り取った情報が有益 ○ メモやチャットでつぶやくだけでもいい ○ 生成AIは自然文がインターフェース、文章力は鍛えて損はない ○ 小手先ではなく意図を正しく伝える力は超重要

23.

ありがとう ございました