Zenn
🏃‍♀️

ChatGPTと作る爆速簡易Webアプリ-超ミニマム開発

2024/05/31に公開
Firebase
個人開発
ChatGPT
idea

こんにちは、ベトナムホーチミン市の日系IT企業でPMとPMOをしているmotaです。生成AI Advisorとして社内外の生成AI案件に首を突っ込んだりもしています。

最近、ChatGPTと会話しながら爆速で簡易Webアプリを作ることにハマっているので、その方法をご紹介します。

ちなみに私は、エンジニアの実務はなく、大学の研究室でちょいとPython使って自然言語処理をしていたのと、研修でちょっとReactとNode.jsでいろいろ書いていたくらいです。ですので、もうすべてコピペで済ませたいと考えて、実際にすべてコピペで実装しています。

プロダクトは,ミニマムで作ってとにかく早く表に出すということが大切かと思っていますので、すべてとりあえず使えればいいといったシンプルなものになっています。
使用技術は基本的に、React・React Router Dom・PWA・Firebase / Vercelのみで構成しています。

爆速で簡易アプリを開発している　とは

慣れない頃は、4時間くらいかかっていましたが、最近は寝る前や、昼飯を食べながらなど、最速30分でMVP版を作成しています。どのようにやっているかをご説明したあとに、紹介しますが、紹介するものは最近の2週間で全部開発しました。

簡易アプリの開発方法

いろいろ試したんですが、いまのところはこれが私の中では最適解です。うまくいっている要因について、試行錯誤の結果から考えられることを解説します。

1. やりたいことを伝えて、要件定義を手伝ってもらう

このツールで実現したいことと、使いたい技術についてChatGPTに要件を整理してもらい、自分の認識とのずれがないか、言語化できていない部分がないかを確かめます。

具体的に箇条書きで、やりたいこと・ツールができることを指示します。ここで、あまり複雑な機能を伝えるとうまくいかないので、MVP、つまり最小限で価値の検証ができるプロダクトはなにか、とめっちゃ削ぎ落として考えることが重要かと思っています。

具体的には、このツールの肝は、〇〇ができること。それならXX機能は「あったらいいな機能」だな。今回は実装しなくていいや。みたいな感じです。重要な最小限の検証ができる状態に、バグなくシンプルなコードで爆速でもっていくことです。
一旦そこまで持っていき、buildが通ればあとで追加機能はなんとでもなります。

大事なことは、とにかく最小限。ということです。

2. 使用する技術を伝えて、DB設計をしてもらう

DB設計をしてもらうことで、え？そんな情報保存しなくてよくない？といったことや、いや、この情報保存してもらわないと困ると思うよ。みたいなことをフィードバックできます。

モダンすぎず、インターネット上に大量に実装ケースが転がっていそうな技術を使うことをおすすめします。ChatGPTの特性上、一定期間より前の情報で学習をしているので、世の中に実装情報が溢れていそうなツールということで、私の場合は、その後の拡張性や利便性を含めて

  • Firebase
  • React
  • Material UI
  • React Router Dom
  • PWA ( progressive web app )
    と指示をしています。

LangChainや、OpenAIのAPIを使う場合は、新しすぎてどうせChatGPTは書けないのでそこは自分で実装するのでコメントアウトしてください。みたいな指示をしておくと良いです。

3. コードの書き方を指定して、コードを書いてもらう

私はPMをしている非エンジニアの素人なので、全部コピペで済ませたいです。また長いコードはChatGPTが忘却の原因になるので、なるべくシンプルな実装を指示しています。

私の場合は

  • フォルダ構造を教えて
  • App.jsはできるだけシンプル
  • Components/Pages/Atomsとコンポーネントを細かくしてください
  • コードの最初にファイルの階層を教えてください(src/pages/xxx.jsのように)
  • create with npx create-react-app my-app --template cra-template-pwa
  • npm i react-router-dom firebase @mui/material @emotion/react @emotion/styled
  • .env をrootに配置
    と指示をしておくことで、なにも考えずにコピペで環境構築ができるようにしています。( これはメモリに保存しています )

4. まとめ

重要なことは、要件定義とDB設計段階でレビューをしっかり行うことです。レビューを行い自分が納得してから、次に技術についても指示を細かめに行い実装させることで、コピペで一発OKのエラーなしのコードを書いてくれています。
ただ、正直な所ですが、Backendを一切書かないツールを意識して作っているため、Firebase Functionsを使ってもうまくいく状態にはまだ持って行けていません。

ここまでのナレッジをまとめたGPTsを公開しました。
これを使うと、やりたいことをひとこと伝えるだけで、コピペでデプロイまでできるようなGPTsとなります。（ただし、技術はFirebase・React固定です)
https://chatgpt.com/g/g-PefSkvcWo-quickly-app-generator

駄文になってしまい恐縮ですが、最近作った爆速開発アプリをご紹介するので、ぜひ最後まで、読んでいただけると幸いです。

最近作ったWebアプリ

最近作った簡易Webアプリをご紹介します。

キャンペーンURLビルダー

解決したかった課題:
Google Analyticsで、どこからの流入で、どのメールで、ユーザーが流入したかを判別するために作成するキャンペーン用のURLって、組織やチームで同じルールで管理しないと散らかって大変なことになるかと思います。
そのため、テンプレートを作成して、ボタン一発でキャンペーンのURLを作成できるツールを作成しました。Googleログインをしてユーザーごとに情報を保存できます。学生の頃にやってたインターンで広告運用などのWebマーケをしていた頃を思い出して、これ便利かも？と思ってなんとなく作りました。

URL https://your-url-management.web.app/

使い方:

  1. テンプレート名や、ルールに沿って各々の情報を入力し保存します。

  2. 作成したテンプレートを選択し、URLを入力し、Generate URLボタンを押すと、テンプレートに沿ってキャンペーンURLを生成してくれます。

ミーティングタイムスタンプレコーダー

解決したかった課題:
オンラインミーティングの録画って録画はするけど、どうせみられないですよね。私がミーティングの録画を見ておいて〜と言われても気が重いですし、あとで見返そうって思ってもどこが重要な点かわからないまま1時間のミーティングの録画を見続けるのはかなり苦しいです。
そのため、ミーティングの開始と同時にタイマーが作動し、ミーティングの途中に議題が変わったと同時に、このツールでボタンを押すことで、どの時点でどの議題を話していたかのメモを簡単に作成できるツールを作りました。

URL : https://timestamp-recorder-pwa-orcin.vercel.app/
使い方:

  1. アジェンダ項目にアジェンダを記入して、追加ボタンを押します。

  2. Zoomなどの録画ボタンを押す少し前にミーティング開始ボタンを押します。

  3. ミーティング中に議題が変わるタイミングで、登録したアジェンダのボタンを押します。（ 間違えた場合は,間違えた所のタイムスタンプを押すことで、修正も可能です )

  1. ミーティング終了ボタンを押すと、タイムスタンプをコピーボタンが出てくるので、それを押すとコピーできます。
timestamp
00:00:06 - Aの件
00:00:20 - スケジュールの件
00:00:21 - 確認事項

旧暦を教えてくれるツール(Hôm nay có phải là ngày ăn chay không?)

解決したかった課題:
ベトナムは、旧暦の1日・14日・15日・30日に仏教の人は、菜食をする習慣があるそうです。奥さんが仏教なので作ってみました。Firebaseの通知機能を使って、Push通知を送る機能までは実装したんですが、自動で通知を送る前に疲れ果てたので、一旦Pendingです笑
FirebaseからiPhoneのSafariにPush通知を送る実装ができました。あまり調べても出てこなかったことなので、別途記事にしようと思っています。

URL https://anchay-39a91.web.app/

Hôm nay có phải là ngày ăn chay không?
Không phải là ngày ăn chay.
Hôm nay là ngày 23 âm lịch.
今日は断食の日ですか？
断食日ではありません。
今日は旧暦の23日です。

ベトナム語はこのように書いてます笑

価格比較ツール

解決したかった課題:
20Lの洗剤と30Lの洗剤が並んでて、一体どっちが安いんじゃーとリットルあたりの価格を比較したくなったことがあるかと思います。Twitterでチラッとそういうツールを見かけたので、ベトナムの通貨に対応したバージョンを作ってみました。ベトナムは通貨の単位が大きすぎるので、×1000 を簡単にできるようにもしました。
i18nを使って日越英の3ヶ国語対応をしましたが、翻訳ファイルも含めて全部ChatGPT任せです。

URL https://comparing-cost-app.firebaseapp.com/

PWA Icon Generator

解決したかった課題:
毎回PWAアプリを作っていると、アイコン生成がめんどくさく、MVPなので気合いを入れるのもめんどくさく、てきとーな画像をいい感じにしてくれるツールが欲しかった。ついでにmanifest.jsonも生成したかった。

URL https://pwa-icon-generator-app.vercel.app/

使い方 :
画像をアップロードしたらPWAで使えるアイコンとmanifest.jsonをダウンロードできます。

firebase config converter

解決したかった課題:
毎回Firebaseを使っていると、json形式で表示されるapi keyなどを、Reactの環境変数に変換するのがめんどくさくて作ったツール
全部ブラウザ上で処理するので、環境変数が流出することはありません。
※ブラウザから危ないツールです！警告が出てしまって、よく考えたらそうだなと思ったので非公開にしました。自分だけで使うようにします。
URL https://firebase-config-converter.vercel.app/ ( 非公開にしました )

使い方 :

  1. Firebaseで出てくるApi keyたちをconst firebaseConfigからそのままコピーして貼り付けます。
  2. Convertボタンを押すと.envファイルで使える形式で出てきます。

さいごに

最後までありがとうございました。
こんな感じで、手軽にサクッとWebツールを作れるようになったことは、画期的かと思います。自作でサクッと作るもいいですし、とてもシンプルな検証をするために作るでもいいと思います。私個人としては、このようにサクッと作りたいアイデアをすぐに形にできたことは、かなり自信となりました。

なにか気になることがありましたら、コメントなどをください。

Discussion