はじめに

私のスペック

業務ではAWSインフラ領域のチームリーダー
プログラミング経験はGASで1年くらい(ほぼ忘れた)とPythonで2か月くらい(ChatGPTがほぼ書いた)
アプリの作成経験無し

「絶対webアプリなんか作れるわけないだろ（笑）」という声が聞こえてきますが大丈夫です。私もそう思います。
そんな私がwebアプリケーションをどのようなステップで作成したのかをここに記します。

生成AIだけでアプリコンテストに挑むことになった経緯

アプリを作ることになったのは、社内でアプリコンテストが開催されることになったからです。
社内のアプリコンテストの準備期間は9月~12月と3か月も時間がありました。
しかし期限が決まっていたらぎりぎりまでやらないのが人間というもの。
私は夏休みが終わって初登校の日に、宿題を家に置いてきたと言い訳するタイプでした
そのうち作ろうと思いつつ、何を作ろうか考えているうちに12月になり、今流行りの風邪なのかコロナなのかインフルなのかわからない体調不良になり、とうとうアプリコンテストの前日になってしまいました。

今回の構成

ほんとにシンプルな構成です。
生成AIのいわれるがままに作成したので、DBは使ったこともないsupabaseを利用しています。
Amplifyも今回初めて利用しました。前触ろうと思ったときはUIがわかりにくかったですが今は洗練されていてとても使いやすいなという印象を受けました。

使用した生成AI

Bolt.new

用途: アプリ作成全般
メリット:
- TypeScriptが得意で高品質なアプリを生成
- コード修正時に即座にプレビュー可能
- AIとのやり取りが高速化
デメリット:
- 有料版利用でコストが発生（1か月1000万token/20ドル）

ハッピーホリデー🎄ってことでBolt.newのトークンが毎日20万token無料でもらえるらしいので、試すなら今がチャンス！
https://x.com/stackblitz/status/1870203756995911707

ChatGPT

用途: アプリ作成以外の不明点解消
感想: いつも通りの頼れるアシスタント
~~普段から課金しているのでコストは計上しません~~

プロジェクトの進め方

1. 方針:

基本的にBolt.newにすべてコーディングを依頼します
アプリ以外の不明点はChatGPTで解消

2. 自分の役割:

AWSへのデプロイ作業のみ

Bolt.newのここがすごい

1.画面一つで完結

AIにプロンプトを送ると、画面右側でAIがゴリゴリコーディングしてくれて、一通り終わったらすぐにプレビューが見れます。

以下プレビューです（プロンプトが適当過ぎて何がプレビューされてるのかよくわかりませんね）

2.GitHub連携ができる

画面右上の「Open in StackBiltz」を押して

画面左あたりの「create a repository」から丸々リポジトリを作成できます！

Bolt側からGithubへ都度pushしたりはできなさそうだったので、私はアプリ作成が一通り終わってからリポジトリを作成しました。

アプリを作って感じたこと

1回目のプロンプトが大事

プロンプトを詳細に記載して1回目の出力が作りたいアプリに向いていると順調に作成できると思いました。
この辺は釈迦に説法になってしまうので割愛させていただきます。
気になる方は詳しく説明されている以下記事をご覧ください。

参考
https://qiita.com/Ameyanagi/items/67f220df9c9240021048
https://qiita.com/fuyu_quant/items/157086987bd1b4e52e80

TSやモダンJSについて学びたくなった

生成AIが自動でコーディングしてくれるとはいえ、やっぱり自分のイメージを直接書き起こしてくれるわけではないので、もどかしさを感じましたね。
これを機にアプリ周りの学習をしたいなと思いました。

たたき台はAIで十分

生成AIを利用すれば70~80%のクオリティは短時間で実現可能なことは分かりました。
凝りだしたり、あらゆるところを修正しようとすると、自分でコーディングできる人なんかはそこからは自分で実装したほうが早かったりするかもしれません。

最後に

今やwebアプリケーション作成について全く知識がなくても、AIにプロンプトを投げ続ければ誰でもWebアプリを作れるようになったんだな、、、と身をもって実感しました。
とはいえ、やはり生成AIも完璧ではないですし、設計書を食わせて設計通りに作って！なんてのはまだまだ先の話だと思うのでこれからも変わらず勉強しなきゃですね。
TSやモダンJSの勉強ができたらまたBolt.new触ってみたいと思います。

それでは！