自己紹介

初めまして、上條遥都(はるじょー)と申します長岡技術科学大学工学部情報経営システム工学分野の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会へ登壇する運びとなったので、予定を繰り上げて機能開発だけ行ったという流れになります

やったこと

ここからは、実際にリリースするまでにやったことを書き連ねていきたいと思います主に

仕様書を作る
Replit Agentに登録して、開発環境を整える
AIに仕様書を読んでもらい、コードのたたき台を作ってもらう
コードを入力後、たたき台のコードを読んで、間違いがないか確認する
初期動作のテスト
仕様書にある機能のうち、実装されていないものを個別にAIに実装してもらう
実装された機能のコードを読んで間違いがないか確認する
バグの修正
個別機能のテスト
6~9を繰り返す
プロトタイプをWeb上で公開

という流れで開発を進めました以下ではそれぞれの項目について具体的にお話していきたいと思います

1.仕様書を作る

デザインコンペで使用されたスライドから、要素のまとまりと、ボタンやまとまりごとの機能を抽出して、仕様書の形式に沿って書き出しました

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

目的

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

目標

新入生の不安を取り除く

使用技術

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

要件定義

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

機能設計

スタート画面
- ホーム画面に遷移する「はじめる」ボタン
- 使い方画面に遷移する「使い方」ボタン
- 設定画面に遷移する「設定」ボタン
- タイトル「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"を選択すると… image (2) こんな感じで、Next.jsの開発環境が構築できました:clap::clap: さほど手間をかけることなく、開発環境が構築できるのはありがたい限りです仕様書作成は事前にやっていたので、ここまでの所要時間は15分ほどです

3. AIに仕様書を読んでもらい、コードのたたき台を作ってもらう

ついに来ました、本題の"AIによる効率化"のお時間です:muscle: こんな感じで、AIに仕様書を食べさせます後から思ったんですけど、“以下の仕様書にしたがって、Webアプリを開発してください"とかの方がより意図に沿う出力をしてくれた気がします:sob: image (3) まあ、なんにせよ出力が帰ってきました image (4) まず、ディレクトリ構造(ファイルの配置図みたいな感じ)から出力してくれますちょっと専門用語が多いので、慣れてないと: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つのコードを出力してくれました

基本画面：

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

コンポーネント：

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

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

注意事項：

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

ここまで、丁寧に教えてくれるのはありがたいですね次は、実際に教えてもらったコードを入力します

4. コードを入力後、たたき台のコードを読んで、間違いがないか確認する

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

始めてからここまでで、大体30分くらいです

5. 初期動作のテスト

さて、いよいよAI君のお手並み拝見ですね教えてもらったコードそのままでバグなく動作するか確認してみましょう image (5) image (6) 普通に動きましたページが存在するボタンを押せばページ遷移しますし、コンポーネントもちゃんと認識してます 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 image (7) それっぽい情報が見つかりました AI君は"V3"という古いバージョンの書き方をしていたのですが、実はインストールしたのが"V4"で、新しいバージョンの書き方をしなければいけなかったようですということで、これに倣って書き直しました

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

エラーによると"ChatCompletion"とやらがないと言っているので、該当してそうな部分を"completion"に変更しますこれでようやく動きました:clap:

9. 個別機能のテスト

エラーなく動くようになったので、バグがないかテストしてみます image (8) ちゃんと返答がかえってくる…！！ということで、何回かラリーをして挙動に変な部分がなかったので、チャットボットの機能完成です！！

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

10. 6~9を繰り返す

あとはこれを好きなだけ繰り返します今回は時間が限られていたので、

チャットボットへの質問機能
画面の初期ボタン
キャラクターの立ち絵変更機能
スタート画面での立ち絵ランダム化
タグコンポーネント
テキストボックスの各項目
質問モードへの切り替え、戻るのトグルボタン
メッセージの自動表示
メッセージの音声での再生

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

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

11. プロトタイプをWeb上で公開

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

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

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

感じたこと

ここからはAIと一緒に開発してみた感想です

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

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

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

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

終わりに

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

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

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