非エンジニアがエンジニアと企画を練る為にvibe codingでモックアップ作ってみた。
皆さん、作りたいアプリイメージってちゃんと伝えれていますか？
さて、8月も早いものでもうお盆時期ですね。
夏も盛り。巷は、花火やお祭り、かき氷などの夏の風物詩で賑わっていますが、怪談話や百物語、ジャパニーズホラーで涼を取るという、乙な日本の夏を楽しまれている方もおいでかと思います。
今回は、そんなこわーい夏の風物詩にちなんで、
こわいなーこわいなー、、、、
エンジニアさんと話すのこわいなーというお話をひとつしてみようかと。
皆様、お楽しみながらお付き合いくださいませ、、、。
■ 目次
皆さん、作りたいアプリイメージってちゃんと伝えれていますか？‐ それは、とある雨の降る蒸し暑い日だった。‐ Gemini CLIを使ってみよう！- Vibe Codingとはよく言ったものだ。‐ Vibe Codingの真骨頂‐ アプリの使用感はどうだろうか？‐ しかしながら、課題は山積み。参考資料
‐ それは、とある雨の降る蒸し暑い日だった。
僕は最近、自身のお酒や食の記録アプリがあれば便利なのになあと考えておりまして、やっぱりアプリだよなぁ、ネイティブアプリかなぁ、まずはWebアプリかなぁ、などと考えていたんです。
結構長く悩んでいたんですが、昔なじみのエンジニアの友人が「面白そうだから、一枚嚙ませてよ！作り方考えるよ！」といってくれたんですよね。とても素敵な友人で、エンジニアとしても、デザイナーとしても活躍できる人で、昔一緒に仕事をしていたよしみもあり、「あ！めっちゃ助かる！」と相談をすることにしたんです。
そして、色々とメッセージを交わすなかで、デプロイの話になった際に事件は起きました。
うん！わからない！
devcontainer??とは？sqliteとは？
こんなことを思いつつ話は進むのですが、そうこう言っているうちに「どんな感じのアプリ作りたいの？」という質問が立て続けにきます。
うーん。どんな？どんな、、、。言語化？うーん。
ここで気づいちゃうんですよね、、、
エンジニアさんにイメージをうまく伝えることができない恐怖に！！！！！
‐ Gemini CLIを使ってみよう！
さて、だいぶんと前置きが長くなってしまい失礼しました。
そんな時に、使ってみるか！と思ったのが最近流行りの 「 Gemini CLI 」です。
「Gemini CLIとは？」「Gemini CLIの使い方は？」ということについては、プロトアウトスタジオののびすけ先生にお任せしましょう。
ここでは、どんなことをやって、結果どうなったのかに着目して紹介していきます。
とりあえずさっきエンジニアさんに言われたことも含めて、chatGPTさんにどんなプロンプトを作ればいいか聞いてみましょう。
なにをGemini CLIさんに言ったらいいものか、そこからわからないんです。
（せっかくなのでもう0から生成AIさんにやってもらいたいですよね～）
すごい！めっちゃ作ってくれますね！（下記一部）
よしよしと。これをそのままいっちゃっていいものか悩みつつ。
やってみましょうか。(こんな長い文章いけるのか？こわいなー。)
‐ Vibe Codingの真骨頂
ですが、ここでまた気づきます。
「あちゃーやってしまった。」
「動かすにはどうしたらいいの？」
です。さて、ここまでやってしまって、CodeSpace上で動かせるようになるのでしょうか？
（※ここから、Gemini CLIさんとのやり取りが画像で続きますが、ご容赦ください！）
著者「そうか、やってくれるか。」
著者「え？もうできたの？じゃあ実行して！」
著者「エラーでるよー」
著者（内心）「めっちゃ色々自分で判断して、調べて、調整してくれてる。脆弱性も直してる？」
著者「お、おお！もうできたの！？」（この間、約30分程度）
著者「動いてる！」「え！開いてみよう！」
著者「おおぅ、、、。（なんだこれ、どこかもうわからん！）よし。」
著者「（コピー&ペースト）どうでしょう！」
著者「おお！」
著者「おお！！？おしい！貼り付け！」
著者「わくわく、どきどき（これ、エンジニアさんだったら何やってるかわかるのかな？）」
著者「おおおおおおおおおお！！！！！！！！！！！！！！！」
出来ちゃいましたね。
ここまでの総開発時間、約3時間（たぶん。不明点を調べる時間も含め。）
驚愕。
‐ アプリの使用感はどうだろうか？
入力もしっかりできてますね。
前もって、デモデータを入れてくれているのも助かります。
入力データのホーム画面への反映もOK！
データってどこに入っているのか？
ちゃんとSQLiteに保存されていますね、、、(´；ω；`)感動。
※ちなみに「どこにデータ入ってるの？」「見せて？」とGeminiさんへ質問すると開いてくれます。
いやいや。できちゃいましたね。
きっとこれをどこかのサーバーの上に立ててビルドすれば、Webアプリケーションとして動いちゃうんでしょうね、、、、、、、、。
いや！違うんです！あくまでエンジニアさんと会話する為のモックアップを作りたかっただけなんです！
あぁ。「もう俺いらんやん、開発頑張って！」という友の声が遠くで聞こえる、、、、、。
というくらい、簡単に動くアプリが出来てしまいました。
正直、自分でも驚きです。「HTMLやCSS,JavaScriptで動くものくらい」の想定で作り始めたら、データベースにデータの蓄積もできるアプリがしっかりと出来てしまいました。
これ、企画書と一緒に持っていくって、、、
え？今まで考えたことはあっても、現実的と思ったことがない事態が起きていますねｗｗｗ
‐ しかしながら、課題は山積み。
しかしながらです。大事なことなので2度言います。
本当に雰囲気で作成した為、何がどうなって動いているのか全くわかりませんｗ
いやー、CodeSpace上だからということで、インストールなどGeminiさんが「やっちゃっていい？」と聞いてくるものに「いいよ！やっちゃって！」と回答してきましたが、
これが他の環境だったらと考えると寒気を通り越して雪だるまですね。
脆弱性を発見して修正してくれたりと、自分よりも高度なことをゴリゴリやってくれているとは思うんですが、それが正しいかがわからないってこんなに怖いんですねｗ
自身の背景について少し触れると、全くプログラミングがわからない、データベース設計がわからないというわけではないので、多少考えながら進めれましたが、
全くの未経験者にとってVibe Codingは、結構難易度高め、かつ、危険度高め（安全な環境を確保することは必須）かなと感じています。
簡単という意味でいうと、きっとローコード/ノーコードの方が簡単で便利でしょうね。（あくまで所感です）
あと、自分が思っていたUI/UXではありませんｗ
UI/UXをもっと詳細まで詰めて依頼をすると今後また違う形で出てくるのか、それともここからそういう作業が必要になってくるのか？
今後どうするかではありますが、それこそエンジニア兼デザイナーと共に相談ですねｗ
しかし総じてにはなりますが、Vibe Codingが非常に強力なツールであるということも今回の経験で認識し直しました。
適切に、使いどころ・使い方を見極めれば、今回、もしくは今回よりも簡易的な、又は、複雑なデモやモックアップ、プロトタイプの作成も、とんでもなく簡便に行うことが可能な世の中になったんだなと感じます。
本当にDeNAさんが仰られている「企画書はプロトタイプ付きで」が当たり前の世界になるのでしょうね。
さてさて、長くなりましたが今回の記事はここまでとさせていただきたく存じます。
皆さん、真夏のこわーい体験の対処法は「ちゃちゃっとVibe Coding！」ということを感じていただけましたでしょうか？
これでエンジニアさんとの会話ももう怖くないですね☆彡
（もっと深い濃い部分の突っ込みが入りそうということは横にそっと置いておきましょう👍）
最後に参考とさせていただいたネット記事も掲載していますが、
皆様も、夏の暑さや恐怖体験に負けず、素敵なプロトアウトライフをお楽しみください♬