# 20241209_AIと一緒に5時間でアプリ開発した話

###### tags: `ブログ記事`

- [ ] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
上條遥都(はるじょー)
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
Replit Agentという、AIを搭載した開発プラットフォームを使用して、アイデアソンで出たアプリケーションの機能を5時間で開発した話を記事として書き起こしました
}

<br>

## 表示される部分
***サムネイル画像***
{

}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [ ] 活動の様子
- [x] メンバーの趣味
- [ ] 実務訓練体験記
- [ ] NUTMEG Advent Calendar 2023

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [ ] HTML
- [ ] CSS
- [ ] Python
- [ ] Go
- [ ] Ruby
- [ ] JavaScript
- [x] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [x] Next.js
- [ ] Gin
- [ ] Flluter

ツール
- [ ] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma

分野
- [ ] チームづくり
- [x] フロントエンド
- [ ] バックエンド
- [ ] インフラ
- [ ] Web-design
- [ ] API関係

---

***以下に本文を記載してください***
# 自己紹介
初めまして、上條遥都(はるじょー)と申します
長岡技術科学大学 工学部 情報経営システム工学分野 3年生です
趣味は、プログラミング、ファッション、香水、運動、水族館で、最近は特に香水にはまってます！
先月、MUCHAさんの北極星という香水を購入したのですが、鼻を抜ける涼やかな香りと淑やかなお茶のような香りが綺麗に調和していて、秋冬の気分を一段階上げてくれる香水でした！
宣伝では全くないんですが、ほんとうにいい匂いで10ml、4000円ほどで買えるのでお手頃です笑笑

# あらまし
開発がしたかったので、NUTMEGのデザインコンペで発表されていたサービスをアプリとして開発しました
ついでに試してみたいAIサービスがあったので、使ってみたら作業効率爆上がりで、4時間で9つほど機能開発が完了し、開発の裏で作業が出来たので、マルチタスクをしながら体感4倍ほどの効率で作業ができるという夢のような体験をしたという話です
AIサービスを使うために月額:boom:$25:boom:を契約したので、サブスク地獄に両足を突っ込むこととなりましたが、非常に楽しい体験でした！！

# 背景
開発したい！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
ので、NUTMEGのデザインコンペで発表されていたものをアプリとして形に起こすことにしました:fire::fire::fire:

まず、長岡技術科学大学の新入生にNUTMEGの説明をする"NUTMEG ROOM"というサービスを開発することに決め、発表者の許可を取りました。
なぜ、このサービスを作ろうと思ったのかというと、同じ機能で恋愛シミュレーションゲームが作れそうだったからです笑
近いうちに"NUTMEG ROOM~LOVE EDITION~"リリースしてブログ書きます:smirk:

次に、NUTMEG内で技術に触れる機会を増やすため発表者を勧誘し、機能とフロントのデザインで役割を分けて開発を行う計画を立てました:sunglasses:
実は、1月から開発スタートの予定だったのですが、12/4に企業様主催のNIFPというLT会へ登壇する運びとなったので、予定を繰り上げて機能開発だけ行ったという流れになります

# やったこと
ここからは、実際にリリースするまでにやったことを書き連ねていきたいと思います
主に
1. 仕様書を作る
2. Replit Agentに登録して、開発環境を整える
3. AIに仕様書を読んでもらい、コードのたたき台を作ってもらう
4. コードを入力後、たたき台のコードを読んで、間違いがないか確認する
5. 初期動作のテスト
6. 仕様書にある機能のうち、実装されていないものを個別にAIに実装してもらう
7. 実装された機能のコードを読んで間違いがないか確認する
8. バグの修正
9. 個別機能のテスト
10. 6~9を繰り返す
11. プロトタイプを[Web上で公開](https://nutmeg-room-harujo.replit.app)

という流れで開発を進めました
以下ではそれぞれの項目について具体的にお話していきたいと思います
## 1.仕様書を作る
デザインコンペで使用されたスライドから、要素のまとまりと、ボタンやまとまりごとの機能を抽出して、仕様書の形式に沿って書き出しました

以下実際に書いた仕様書です
### 目的

- 長岡技術科学大学に入学してきた新入生に、技大祭実行委員会 情報局を宣伝するWebアプリケーション

### 目標

- 新入生の不安を取り除く

### 使用技術

- Next.js(フロントエンド)
- Go(バックエンド)
- PostgreSQL(データベース)
- OpenAI API(チャットボット)

### 要件定義

- スタート画面
- 「はじめる」から誰でも簡単に利用できる
- 「使い方」を確認できる
- 「設定」を変更できる
- ホーム画面
- 右上にカラフルなタブがあり、タイトル以外の画面へシームレスに移動できる
- 知りたい項目を選ぶとそれぞれの部屋に移動できる
- 部屋画面(共通)
- 部屋に移動するとキャラクターが語り掛けてくる
- 部屋の中では、項目についてキャラクターが説明してくれる
- テキストボックスの下側にある項目から速さの調整などが可能
- 説明はメイン画面内の図とテキストボックス内の説明テキストを用いて行われる
- ボタン一つでいつでも質問モードに切り替えられ、質問ができる
- キャラクターの中身はNUTMEGの情報を学習させたLLM
- ボタン一つでいつでもキャラクター変更モードに切り替えられ、キャラクターを変更できる

### 機能設計

- スタート画面
- ホーム画面に遷移する「はじめる」ボタン
- 使い方画面に遷移する「使い方」ボタン
- 設定画面に遷移する「設定」ボタン
- タイトル「NUTMEGの部屋」
- キャラクターの立ち絵
- ホーム画面
- 画面遷移のためのタブ群
- スタート画面に遷移する「タイトル」ボタン
- ホーム画面に遷移する「ホーム」ボタン
- 設定画面に遷移する「設定」ボタン
- 使い方画面に遷移する「使い方」ボタン
- 部屋移動のための項目群
- NUTMEGの部屋に移動する「NUTMEG」ボタン
- チームの部屋に移動する「チーム構成」ボタン
- 教育の部屋に移動する「教育制度」ボタン
- メンバー紹介の部屋に移動する「メンバー」ボタン
- 部屋画面(共通)
- 会話
- 初めに部屋移動したタイミングで挨拶文をテキストボックスに表示
- 会話システムにはLLMにNUTMEGの情報を学習させたもの(NUTMEGの辞書を与えたもの)を利用する
- 説明
- メイン画面に図を表示
- テキストボックスに説明テキストを表示
- クリックでテキストが流れる
- テキストボックスの項目
- キャラクターの名前を表示する名前ボックス
- 会話履歴モードに切り替える「ログ」ボタン
- 現在の説明を終了し、次の説明に移行する「スキップ」ボタン
- テキストの表示速度を倍にする「早送り」ボタン
- 次のテキストに移行する方法をクリックから時間経過に切り替える「オート」ボタン
- 遷移可能であることを表示するための「▶」ボタン
- 質問モード
- 質問モード移行のための「質問」ボタン
- 説明モード移行のための「戻る」ボタン
- メイン画面に質問モードの使い方説明を表示
- テキストボックスの上に入力可能なInputフォームを表示
- 質問が行われると、メイン画面に質問内容と返答が表示される
- キャラクター変更モード
- キャラクター変更モード移行のための「キャラ変更」ボタン
- 説明モード移行のための「戻る」ボタン
- キャラクター確定のための「決定」ボタン
- キャラクターのアイコン表示
- 現在選択中のキャラクターであればそれを示す「選択中」の吹き出し
- キャラクターのイラスト
- 選択キャラクターを移動するための「◀」「▶」ボタン

こんな感じで、ある程度大雑把に仕様をまとめ、仕様書として書き出しました
## 2.Replit Agentに登録して、開発環境を整える
https://docs.replit.com/category/getting-started
まず、Replit Agentに登録し$25払いました
Replit Agentは「コーディングの民主化」をミッションに掲げており、誰でも簡単にアプリケーションを作れる環境を提供してくれるらしいです
1か月$25のサブスクは高いですが、試してみたかったので必要経費です…でも高い…

お金を払い終わったら、プロジェクトの作成に入ります
Titleを"NUTMEG ROOM"に変更し、"Create Repl"を選択
すると…
こんな感じで、Next.jsの開発環境が構築出来ました:clap::clap:
さほど手間をかけることなく、開発環境が構築できるのはありがたい限りです
仕様書作成は事前にやっていたので、ここまでの所要時間は15分ほどです
## 3. AIに仕様書を読んでもらい、コードのたたき台を作ってもらう
ついに来ました、本題の"AIによる効率化"のお時間です:muscle:
こんな感じで、AIに仕様書を食べさせます
後から思ったんですけど、"以下の仕様書に従って、Webアプリを開発してください"とかの方がより意図に沿う出力をしてくれた気がします:sob:
まあ、なんにせよ出力が帰ってきました
まず、ディレクトリ構造(ファイルの配置図みたいな感じ)から出力してくれます
ちょっと専門用語が多いので、慣れてないと:question::question:って感じになるので、導入ハードルを下げるためにこの辺のフォローが欲しいところではあります

/pages
    /api
        hello.ts         // APIのエンドポイント
    index.tsx            // スタート画面
    home.tsx             // ホーム画面
    room.tsx             // 部屋画面
/components
    Tab.tsx              // タブコンポーネント
    Character.tsx        // キャラクターコンポーネント
    ChatBox.tsx          // チャットボックスコンポーネント
/public
    /images              // キャラクターの立ち絵などの画像
/styles
    globals.css          // グローバルスタイル

次に基本的な画面とコンポーネント(要素のまとまり)のコードを出力してくれます
仕様書を食べてもらっただけで、次の6つのコードを出力してくれました

基本画面：
1. index.tsx (スタート画面)
1. home.tsx (ホーム画面)
1. room.tsx (部屋画面)

コンポーネント：
1. Tab.tsx (タブコンポーネント)
2. Character.tsx (キャラクターコンポーネント)
3. ChatBox.tsx (チャットボックスコンポーネント)

また、実装できていない機能について以下のように注意事項として教えてくれました

注意事項：
1. OpenAI API統合: バックエンドのGoでOpenAI APIにリクエストを送り、応答をフロントエンドに返す処理を実装する必要があります。
2. PostgreSQLの接続: インターフェースにデータや設定を保持するために、PostgreSQLを使用します。APIのエンドポイントでは、データベースとやりとりするコードを実装する必要があります。
3. スタイル: 必要に応じて、CSSやスタイリングを追加して、視覚的に魅力的なUIを構築します。

ここまで、丁寧に教えてくれるのはありがたいですね
次は、実際に教えてもらったコードを入力していきます
## 4. コードを入力後、たたき台のコードを読んで、間違いがないか確認する
まず、コードを書き込むために、index.tsxなどのファイルを作成します。
右上の＋ボタンからファイルを追加し、index.tsxという名前を付けます
そして、上で教えてもらったディレクトリ構造に沿うように"pages"フォルダにindex.tsxを移動します
そして、index.tsxを選択すると、こんな感じになります
この状態で、AI君が出してくれたコードを見てみると右上にInsertというボタンが出てきました
それを押すとあら不思議、コードが全部入力されました:congratulations:
めっちゃ便利...
便利すぎたので流石に全部これで入力しました笑
そして、エラーが出ないことと、コードの動きを追いながらちゃんと動くかを確認しました

始めてからここまでで、大体30分くらいです
## 5. 初期動作のテスト
さて、いよいよAI君のお手並み拝見ですね
教えてもらったコードそのままでバグなく動作するか確認してみましょう
普通に動きました
ページが存在するボタンを押せばページ遷移しますし、コンポーネントもちゃんと認識してます
AI君、僕の10倍以上賢いんじゃないか

AI君が優秀すぎて30分でたたき台が出来てしまったので、ここからは追加の機能を実装していきたいと思います
## 6. 仕様書にある機能のうち、実装されていないものを個別にAIに実装してもらう
メイン機能がなぜか実装されていなかったので、AIへのチャット質問機能を実装していきます
例のごとくAI君にお願いしていきましょう
とりあえず、出されたコードをコピーして動かしてみましょう

動きません、、、
こんなエラーが出ました
原因は"openai api"とやらをインポートしていなかったからのようです
インポートしてみたら動きましたが、チャットボットから"unidefined"と返ってきます:cry:

## 7. 実装された機能のコードを読んで間違いがないか確認する
一旦、実装されたコードのチャットボットに関する部分を全部読んでみました
その上で、AIに聞いてみても、Qiitaで調べたコードを見てみても明らかにおかしい部分は特になかったです
これは非常に由々しき事態です....
どうしたものかと思っていたのですが、AI君がデバッグログを出したらいいんじゃない？と言ってくれました
確かに...ログ見れば大体わかるじゃん...
## 8. バグの修正
ということで、デバッグログを確認し、バグを修正していきます
エラーコードを見つけました
これはライブラリを使ったときあるあるの"公式リファレンスを参照しないとわからなそうなエラー"です
なので、公式リファレンスを見に行きます

はい、何の成果も得られませんでした:sob:
AI君に聞いてみて、とりあえず使おうとしているモデルが対応している書き方と違うよってことなのかなというところまでは理解出来ました
ちなみに、こう書いても動きませんでした笑

こういうときは、stack overflowに訪問しましょう
英語版知恵袋みたいな感じなので、日本語よりも技術系の情報があふれています
https://stackoverflow.com/questions/76917525/openai-api-error-module-openai-has-no-exported-member-configuration
それっぽい情報が見つかりました
AI君は"V3"という古いバージョンの書き方をしていたのですが、実はインストールしたのが"V4"で、新しいバージョンの書き方をしなければいけなかったようです
ということで、これに倣って書き直しました

その結果、別のエラーが帰ってくるようになりました:clap::clap:
データのタイプが違う的なことを言われています
なので、上記コードを
こんな感じにしたら、無事別のエラーに変わりました
一生解決してくれません:angry:
今日は機嫌が悪い日なんでしょうか

エラーによると"ChatCompletion"とやらがないと言っているので、該当してそうな部分を"completion"に変更します
これでようやく動きました:clap:
## 9. 個別機能のテスト
エラーなく動くようになったので、バグがないかテストしてみます
ちゃんと返答がかえってくる...！！
ということで、何回かラリーをして挙動に変な部分がなかったので、チャットボットの機能完成です！！

ここまでで、大体1時間半程度かかっています
エラーの解決に30分以上かかっているので、エラーがなければ1時間ほどでチャットボットまでは完成したことになります
爆速で嬉しい限りです:yum:

## 10. 6~9を繰り返す
あとはこれを好きなだけ繰り返します
今回は時間が限られていたので、
1. チャットボットへの質問機能
2. 画面の初期ボタン
3. キャラクターの立ち絵変更機能
4. スタート画面での立ち絵ランダム化
5. タグコンポーネント
6. テキストボックスの各項目
7. 質問モードへの切り替え、戻るのトグルボタン
8. メッセージの自動表示
9. メッセージの音声での再生

の9つの機能だけ作ってプロトタイプ完成ということにしました

2~9の機能全部で大体2時間半かかったので、チャットボットとあわせて4時間ほどで完成したことになります
じゃあ、なぜタイトルが5時間なのかというと、お風呂の時間とご飯の時間にもAIに指示を出して結果を待っており、その時間も含めているからです
裏で別のことをしながら、爆速開発が出来るのは本当に革命的で、実質マルチタスクと言っても過言ではないかなと思います:sunglasses:

## 11. プロトタイプを[Web上で公開](https://nutmeg-room-harujo.replit.app)
誰でも動かせるようにプロトタイプをWeb上に公開しようと思ったんですけど、まあ面倒な作業なんですよね
と思っていたら、、、
開発画面の右上にDeployというボタンがあります
気になるので、押してみます
なんか、お金の話とワークスペースの話をされました
とりあえず、おすすめされたWebアプリに最適的なことを言っているワークスペースを選びます
なんかワークスペースのパワーとお金の話をしていますがサブスク分は使えるみたいなので、サブスク分を超えない範囲の設定を行います

これでデプロイが完了しました
爆速...！！革命的...！！

ということで、以下のリンクからプロトタイプが使えるようになりました
https://nutmeg-room-harujo.replit.app/
放置するだけでお金かかるみたいなので、サブスクの解約をしたらVercelにデプロイしなおそうと思います
# 感じたこと
ここからはAIと一緒に開発してみた感想です

まず、学生的に、１か月＄25は高いです
理系学生でバイトの時間があまりとれないので、あまりにも痛い出費です
とりあえず、今月は使い倒して一旦解約したいと思います

次に、AIを適切に使うと作業効率爆上がりするなと感じました
脳みそが2つ3つあるようなものなので、当たり前といえばそうなんですけど、頭で理解するのと体感するのでは実感や感動が全然違います
また、実際にやってみることで利点、欠点が見えてくるので、より適切に使えるようになると思います

そして、プロトタイプを作るときに便利です
簡単な機能なら5分くらいでプロトタイプとして見せられる状態までいくので、開発とテストのサイクルが今まで以上に高速化すると考えられます
さらに、機能の実装までが早いのでアジャイル開発でも利点があるなと感じました
Replit Agentを使ったアジャイル開発、すごくやってみたいです笑

あと、一人開発でも仕様書は書き得なのかなと思いました
開発指針となるので、そもそも書いた方が良いのはそうなんですけど、書いておくことで今回のようにAI君に指示を出して開発してもらう的なことも出来るので、選択肢を増やす意味でもメリットがあるなと思います

# 終わりに
以上、AIと一緒に5時間でアプリ開発した話でした

一人ハッカソン形式でやってみた感想としては、１日未満でハッカソンするのはやめたほうがいいと思いました笑
せめて2日は欲しいし、クオリティを求めるなら1週間くらいないと困るかもという感じですね
それでも、新しい技術に触れる機会としては非常に有用ですし、これを機にNUTMEGに一人ハッカソン文化を広めていけると嬉しい限りです

また今後、AIを活用する力は社会的に重要なものとなってくるので、AIにアクセスしやすい環境を用意し、活用のハードルを下げていける役目を担えれば良いなと思っております