ChatGPTだけで出来る! 激辛ルーレットスマホアプリを作るまでの軌跡

2026.7.10

ChatGPTだけで出来る! 激辛ルーレットスマホアプリを作るまでの軌跡

実家を出て9年目に突入した私にとって、地味に苦痛な家事があります。

それは――

「今日の夜ごはん、何作ろう問題」

ウェブ上にある既存の献立ルーレット系を使うこともありますが、冷蔵庫の中にないものが出たら、結局何度も何度もルーレットを回す。

冷蔵庫の中にある食材だけでルーレットを作ってくれたらいいのに……。

……ん?

自分で作ればいいのでは?

いやいや、プログラミングなんて何も分からないし、そんなの無理――

チャッピー「できますよ!」(ChatGPT)(救世主)(神)(相棒)(ペット)

ほな、いけるか。

せっかくだし、私の大好きな激辛料理仕様にしよう。

ということで、チャッピーと二人三脚で、令和の姫路瑞希(知らない人は調べてください)を爆誕させるべく、「激辛料理ルーレットアプリ」制作プロジェクトが始動しました。


① まずは完成イメージを固める

まずは、アプリの完成イメージをチャッピーと話し合って行きます。

「こんな仕様にしたい」
「レシピはこんな感じにしたい」

など、まずはざっくり希望を伝えていきます。

するとChatGPT上で、仮のアプリ画面をプレビューできるんです。

……うん。

なんか殺風景ですね…!

ここから少しずつ、自分の入れたい要素を追加していきます。

デザインだけでなく、アプリの仕様も細かく指定していきます。あんまり難しいのは無理かな…と思っていたのですが、私が指定したものはすべて対応してくれました。

便利だったのは、要素を追加するたびにChatGPT内でReactアプリとしてプレビューできること。

完成形とのズレがほとんどなく、「思ってたのと違う」が起きにくいのはかなり助かりました。

今回コラムを書くにあたってチャッピーとの履歴を見返したのですが、特にレシピへのこだわりがすごい。

毒物劇物を使わずに姫路瑞希を爆誕させるため、「科学的に」辛さを増幅させる方法を延々と要求しています。

当然チャッピーも困惑。

なぜか人類の健康を守ろうとして、頼んでもいないチーズや牛乳をレシピにねじ込んでマイルドにしようとしてきます。

AIの優しさを一掃。

「チーズ、牛乳禁止。」


② いよいよアプリ化

プレビューでだいたい完成形が見えてきたので、実際にアプリを作っていきます。

チャッピー曰く、手順はこんな感じ。

  1. PCにNode.jsを入れる
  2. Next.jsアプリを作る
  3. 必要なライブラリを入れる
  4. コードを貼る
  5. 動作確認
  6. GitHubにアップロード
  7. Vercelで無料公開
  8. iPhoneのホーム画面に追加

……。

い、いけるか……?

Node.js?
GitHub?
Vercel?

初見なんですが。

どれが何をするものなのかも分からず、危ないサイトじゃないかどうかだけとりあえず調べました。よくわからないけど大丈夫そうだったので、とりあえずやってみることにします。


③ スクショを見せれば何とかなる

どのツールが何をするものなのか、今となってもよく分かっていませんが、とりあえず躓いたらChatGPTにスクリーンショットを投げればいいのです。

流れは簡単。

  • ツールをダウンロードする
  • スクショを見せる
  • 指示をもらう
  • 指示通りやる
  • またスクショを見せる

これを繰り返すだけ。約半日ほどでアプリが完成しました。

時々専門用語を使ってきますが、その都度「〇〇ってどういうこと?」「初心者向けに丁寧に分かりやすく教えて」といえば大丈夫です。

※ChatGPT無料版だと利用制限があるので、リロード待ちを含めると3日くらいかかるかもしれません。

エラーが出ても安心。

スクショを見せれば、問題箇所をかなり正確に特定してくれます。


スマホアプリ完成!

途中、

  • ホーム画面のアイコンが表示されない
  • 冷蔵庫リスト入力用のキーボードが出てこない

などのトラブルはありましたが、なんとか完成までこぎ着けました。

それでは私の渾身の力作、

「スパイシールーレット🌶」

をご覧ください。

まずはホーム画面。

しっかりアイコンが表示されています🌶

さらに起動時のロード画面も実装。

ローディング感を演出するため、炎マークがぐるぐる回ります。

そしてアプリが起動すると――

ジャーン!

こんな感じになりました。

どことなくクッ〇パッ〇を想起させるデザインですが、この辺りはChatGPTにほぼ丸投げだったので、おそらく何らかの影響は受けているのでしょう。

冷蔵庫リストもしっかり入力できます。

キーボードが出なかったときは本当にどうなることかと思いました。

そして「ルーレットを回す」ボタンを押すと……

ルーレットが回転!

レシピが決定!

本日の夜ご飯は――

「灼熱酸味酢豚」

になりました!

ちょうどデスクにキャロライナ・リーパーが転がっていたので、帰宅後に作りたいと思います。

なお、「灼熱酸味酢豚」を実際にクッキングしている様子は、メディアトライのInstagramに動画投稿予定です。

ぜひフォローしてください🌶