見出し画像

【詳説】Replitで挫折知らずの耳トレアプリ開発術

小池宏幸 | 音楽ITのPiascore

皆さんは、プログラミングで音楽アプリを作ろうとして、複雑な実装や面倒なデプロイ作業に挫折した経験はありませんか？Replitを使えば、アイデアから公開まで驚くほどスムーズに進められます。

今回は前回に引き続き、Replitの魅力をさらに深掘りしながら、実用的な「耳トレアプリ」の開発過程をご紹介します。この記事を読めば、あなたもスムーズな開発からデプロイまでの全工程を把握できるようになりますよ。

作成した耳トレアプリはこちら

オンライン耳トレーニング
https://lab.piascore.com/replit/oat/

https://lab.piascore.com/replit/oat/ 

作るのは「実用的な」耳トレアプリ

音楽の世界で重要なスキルである「耳トレ（イヤートレーニング）」。一般的な耳トレアプリといえば、ランダムな音を聴いて音名を当てるシンプルなものが多いですよね。

でも実際の音楽は単音だけで成り立つわけではありません。そこで今回は：

  • 基本の「単音当て」モード

  • より実践的な「2音の音程当て」モード

  • 10問出題方式で集中的に練習できる設計

  • 初心者から上級者まで対応する難易度設定

という、より実用的な耳トレアプリを目指しました。この設計なら、「ド・ミ」「ド・ソ」といった音程感覚も養えて、実際の演奏やアレンジに役立つスキルが身につきます。

AI活用で効率的な要件定義

「どんな機能を入れるべきか」「UIはどうするか」...アプリ開発の最初の壁ですよね。

今回は前回同様、o1 proというAIツールを使って要件定義を効率化しました。特に今回はポイントとして、「書き起こし」を追加することで、より具体的な要件を引き出すことに成功しました。

Replit で下記のWebサービスを作りたいと思います。書き起こしをもとに、要件・仕様をまとめ、Replit 用のプロンプトを md 形式で作成してください。

# オンライン簡易耳トレ（単音・2音程度）
概要：単音または2音のインターバル当てクイズ。再生される音の組み合わせを聞き取って選択肢から回答。
特徴
- シンプルに「ド・ミ」「ド・ソ」などを再生し、ユーザーがインターバルを選ぶ。結果表示のみ。
- 
実装の容易性：Web Audio API でシンプルな音源（サイン波など）を生成し、問題と回答の仕組みを用意。

# 書き起こし
オンライン可愛い耳トレのアプリを作りたいと思います。 10問のクイズを出して、そこから音を選ぶというようなものです。 音を出してボタンを押すと次の問題に行くと。 問題を出す前にカウントダウンをしてください。5秒ほどのカウントダウンをしてください。 問題を出している室内中は5秒間だけ出題するようにしてください。

o1 proが生成してくれた要件定義

# オンライン簡易耳トレ（単音・2音対応） 要件定義 & Replit 用プロンプト

以下の要件を満たす Next.js アプリケーションを Replit 上で構築することを想定しています。
本ドキュメントでは、要件定義と最小限の実装例を提示します。

---
## 1. 概要

- **目的**: 単音または2音のインターバル当てクイズを行い、耳のトレーニングを行うオンラインサービス
- **対象**: 初心者～中級者までを想定し、直感的にインターバルや音程を学べる設計
- **特徴**:
- 10問のクイズを出題し、ユーザーが回答ボタンをクリックして進行
- 出題前に5秒間のカウントダウン
- 出題音は5秒間のみ再生し、未回答の場合は自動的に次の問題へ
- サイン波をベースに、可能な限り「ピアノ」または「減衰の少ないフルート音」に近いトーンで再生
- 結果画面で正答率表示＆各クイズの振り返りが可能
- サイドクイズへの挑戦ボタンを2つ表示し、押下でサイドクイズを出題
- 難易度は以下の通り：
...

💡 開発者必見ポイント: ChatGPTなどのAIと「会話形式」で要件を固めていく方法は、要件定義書や仕様書作成の強力な味方になります。頭の中のアイデアを言葉にするだけで、構造化された要件に変換してくれるのです。

Replitでの実装：期待と現実

要件が固まったらReplit上でさっそく実装開始です。最初は順調に進み、こんな感じのスタート画面が完成しました。

スタート画面
出題中

...が、ここからが予想外の苦戦の始まりでした。同じ修正を何度お願いしても反映されない、同じバグが繰り返し発生する...。これはReplit による実装の限界を体感する瞬間でした。

Replitで修正を依頼するコツ（試行錯誤の結果）

私の経験から、Replitに修正を依頼する際の効果的なアプローチは：

  1. エラーメッセージをそのまま渡す

    • 「このエラーを直して」だけでは不十分

    • エラーの全文をコピペして渡すことが重要

  2. 具体的な修正案を提示する

    • 「XXを enum 化して、値を比較するようにして」のように具体的に

    • あいまいな指示は避ける

  3. 実装例があるなら、コードを渡す

    • 「こんな感じで実装して」と例を示すと格段に成功率が上がる

ただし、ここまで具体的に指示するなら...「Cursorの方が早いのでは？」という気もします。

Replit から Cursorへ

特に今回は、AWS Amplifyを使ったデプロイも視野に入れていました。Replitでvite.config.tsの編集を試みましたが、うまくいかず...。

結局、Replitからプロジェクトをzipでダウンロードし、Cursorでの作業に切り替えることにしました。こうした柔軟な方針転換も、開発では重要なスキルだと実感します。

Amplifyへのデプロイ

デプロイについては前回の記事で詳しく説明した通りの手順で進めました。この部分は比較的スムーズに進行できました。

手順をまとめたので、記載しておきます。「Replit Aural Trainer」は今回作ったサービス名なので、適宜書き換えてください。

AWS Amplify

  1. Amplify のページへ https://ap-northeast-1.console.aws.amazon.com/amplify/apps

  2. 新しいアプリを作成

  3. Bitbucket > つぎへ

  4. リポジトリとブランチ（main）を選択

  5. アプリケーションの名前：Replit Aural Trainer

  6. デプロイ

AWS CloudFront

  1. CloudFront > 該当のディストリビューション

  2. オリジンの追加

    1. オリジン > オリジンを作成

    2. 設定

      • Original domain：AWS Amplify のドメイン名 main.xxxx.amplifyapp.com

      • 名前：アプリケーションと同じ名前 Replit Aural Trainer

  3. ビヘイビアの追加

    1. ビヘイビア > ビヘイビアの作成

    2. 設定

      • パスパターン：/replit/oat/*

      • オリジンとオリジングループ：上で作成したオリジン

      • ビューワープロトコルポリシー：Redirect HTTP to HTTPS

      • 許可されたHTTP メソッド：GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

      • キャッシュキーとオリジンリクエスト：Cache policy and origin request policy (recommended)

        • キャッシュポリシー：CachingDisabled

        • オリジンリクエストポリシー：AllViewerExceptHostHeader

    3. ビヘイビアの作成

  4. サイトにアクセス https://lab.piascore.com/replit/oat/

    • 後ろに「/」をつけること

開発プロセスから学んだこと

今回の開発で最も印象に残ったのは、クイズ終了後の画面の修正作業です。なかなか指示通りに修正されず、何度も同じ修正を繰り返すうちに音当て力はだいぶ上達しましたが😅、開発のストレスもかなり高まりました。

重要な教訓: 修正を3回お願いしても変わらない場合は、コードを参照して具体的な修正案を与えるか、思い切ってコードを直接修正するほうが効率的です。AIツールは万能ではなく、人間のエンジニアリングスキルとの併用が最適解なのです。

皆さんも音楽アプリ開発に挑戦する際は、ぜひこの記事で紹介した手法とポイントを参考にしてみてください。最初から完璧を求めず、試行錯誤を楽しむ心構えが、成功への近道かもしれません。

次回は、この耳トレアプリに新機能を追加する過程もシェアできればと思います。ご質問やご感想があれば、X（twitter）などでぜひコメントでお聞かせください

いいなと思ったら応援しよう！