生成AIで遊びながら学ぶ Advent Calendar 2025

【アドカレ2025 Day18】Geminiで要件→Claudeで一気に実装！初心者向けシャドウィングアプリをMVPで作ってみた

Posted at 2025-12-18

こんにちは、学びの探求者です。

普段は note で活動しています。

2025年のQiitaアドベントカレンダーでは、
「ノーコード／ローコードで、自分のコンテンツ基盤を自動化していく」
をテーマに、25日間の仕組みづくりを記録していきます。
ぜひ、応援してください。

今日は、英語学習初心者向けの“シャドウィング練習アプリ（MVP）”を作った記録です。
ポイントは、生成AIを「コーディング役」と「要件整理役」に分けて使ったところです。

作ったもの（MVP）

英語学習初心者向けのシャドウィング練習アプリ（React Native / Expo）

トピック選択（例：カフェで注文、自己紹介、道案内）
フレーズ表示（英語＋カタカナ読み）
お手本音声（※今回はモック、公開時はOpenAI TTS接続で実装可能）
自分の音声を録音
採点＆フィードバック（※今回はモック）

どう作ったか：Gemini → Claude の役割分担

今回はざっくりこういう流れでした。

Geminiに要件を伝える
Geminiに「おすすめ生成AI」と「プロンプト」を聞く
候補は Cursor か Claude
Cursor未経験だったので、Claudeを選択
Claudeが一気にコーディング
それをローカル環境で動くように調整
公開時はOpenAI APIでTTSを繋げれば“お手本音声”が流せる（今回は未接続）

「要件は人間が決める／実装はAIが加速する／最後の調整は人間がやる」みたいな分業が、現実的に一番うまく回りました。

Geminiに投げたこと（要件→プロンプト化）

やったことはシンプルで、まずは“こういうアプリを作りたい”を言語化して渡しました。

例：Geminiへの依頼（要件＋聞きたいこと）

英語のシャドウィングアプリを作ります。
・初心者向け
・お手本を生成AIが読み上げ、ユーザーが真似をします
・ユーザーの発音を判定して改善ポイントをアドバイスします

この間に、仕様の検討をGeminiとしています。そして、最後に

これを生成AIに投げたら作ってくれるプロンプトを完成してください。
おすすめ生成AIがあれば教えて下さい。

これで終わりです。
Geminiが一撃必殺のプロンプトを作ってくれ、実装しやすいAIを教えてくれました。

Geminiいわく、
現状、「アプリ全体のコードを書いて」と投げて、最も精度高く動くコードを返してくれる最強の組み合わせは以下の通りです。

ツール: Cursor (カーソル)
- 理由: VS CodeをフォークしたAIエディタです。「Composer」機能を使えば、複数のファイルを一括で作成・編集してくれます。単なるチャットではなく、プロジェクト全体を見てコードを実装してくれる現在最強のツールです。
モデル: Claude 3.5 Sonnet
- 理由: Cursorの設定でモデルを選べますが、コーディング能力においてはGPT-4oよりもClaude 3.5 Sonnetの方が指示従順性が高く、エラーの少ないコードを書く傾向にあります。

（あー私がやりますじゃないんだなぁ）

Claudeでやったこと（コーディングを一気に）

Geminiが作ってくれた一撃必殺プロンプトを投げれば、Claudeが全て作ってくれます。
以下がプロンプトです。

# Role
あなたは世界トップクラスのモバイルアプリ開発者（React Native/Expoエキスパート）です。
英語学習初心者向けの「シャドーイングアプリ」のMVP（Minimum Viable Product）を作成してください。

# Project Goal
ユーザーがAIのお手本を聞き、自分の声を録音し、発音の良し悪しをフィードバックできるアプリのプロトタイプを構築すること。

# Tech Stack
- Framework: React Native (Expo SDK 50+)
- Language: TypeScript
- UI Library: React Native Paper or NativeBase (シンプルで見やすいUI)
- Audio: expo-av (音声再生・録音)
- AI Integration (Mock/Placeholder for MVP):
  - OpenAI API (文章生成・TTS用) の連携ロジック
  - Azure AI Speech (発音評価用) の連携ロジック
  ※今回はAPIキーがない状態でもUIと動きが確認できるよう、AIのレスポンスは「ダミーデータ（Mock）」で実装してください。ただし、後でAPIキーを入れるだけで動くようにコード構造（Service層）は分離してください。

# Key Features & Requirements

1. **Home Screen (Topic Selection)**
   - 「カフェで注文」「自己紹介」「道案内」などのトピックカードを表示。
   - 選択するとPractice Screenへ遷移。

2. **Practice Screen (Core Feature)**
   - **Phrase Display:** 英語のテキストと、初心者向けのカタカナ読み（ルビ）を表示。
   - **Model Audio:** 「お手本を再生」ボタン。
   - **Recording:** 「録音開始/停止」ボタン。録音中は波形アニメーション（またはインジケータ）を表示。
   - **Action:** 録音完了後、「採点する」ボタンでResult Screenへ。

3. **Result Screen (Feedback)**
   - **Score:** 100点満点でスコアを大きく表示。
   - **Analysis:** 単語ごとに色分け表示（緑：Good, 赤：Bad）。
   - **Advice:** 「Rの音が弱いです」などのフィードバックコメント表示。
   - **Next:** 「もう一度」または「次のフレーズ」ボタン。

# UI/UX Design Guidelines
- 初心者が怖がらないよう、パステルカラーや丸みのあるデザインを採用してください。
- ボタンは大きく、押しやすく配置してください。
- 画面遷移はReact Navigationを使用してください。

# Deliverables
1. 必要なパッケージのインストールコマンド（npm/yarn）
2. プロジェクトのディレクトリ構造
3. 以下の主要ファイルの完全なコード
   - App.tsx (Entry point & Navigation)
   - screens/HomeScreen.tsx
   - screens/PracticeScreen.tsx
   - screens/ResultScreen.tsx
   - services/OpenAIService.ts (Mock implementation)
   - services/AzureSpeechService.ts (Mock implementation)
   - components/AudioRecorder.tsx

# Important
- エラーハンドリングを適切に行い、クラッシュしにくいコードにしてください。
- TypeScriptの型定義をしっかり行ってください。
- コードブロックごとにファイル名とパスを明記してください。

あとは、Claudeに言われた通り環境を整えたらすんなり動いてくれました。

今回の学び：生成AIは“全部自動”じゃなく“分業の設計”をするとすごいチームができちゃう!?

今回やってみて良かったのは、生成AIを「万能選手」にしないことでした。

Gemini：要件の形を作る（言語化・漏れ防止・プロンプト化）
Claude：実装を一気に出す（構造＋コード）
人間：最後の動作確認と環境調整

この分業にすると、初心者でも「前に進む速度」が上がります。

付録：シャドーイングアプリ MVP 仕様書

（ここからは、今回作ったMVPの仕様をそのまま置いておきます）

📱 プロジェト概要

英語学習初心者向けのシャドーイング練習アプリのMVP（Minimum Viable Product）です。AIのお手本音声を聞き、自分の発音を録音して、発音の良し悪しをフィードバックする機能を提供します。

🎯 主要機能

1. ホーム画面（トピック選択）

学習トピックをカード形式で表示
各トピックには複数のフレーズが含まれる
トピック例：
- ☕ カフェで注文
- 👋 自己紹介
- 🗺️ 道案内

2. 練習画面（コア機能）

フレーズ表示
- 英語テキスト
- 初心者向けカタカナ読み（ルビ）
お手本音声再生
- 「お手本を再生」ボタンでネイティブ発音を聞く
録音機能
- 「録音開始/停止」ボタン
- 録音中はパルスアニメーション表示
- マイク使用許可の適切な処理
採点機能
- 録音完了後、「採点する」ボタンで評価

3. 結果画面（フィードバック）

スコア表示
- 100点満点で大きく表示
- スコアに応じた色分け（緑：85+、黄：70-84、赤：70未満）
単語別分析
- 各単語ごとに色分け評価
- Good（緑）：80点以上
- Fair（黄）：65-79点
- Bad（赤）：64点以下
AIフィードバック
- 具体的な改善アドバイス表示
- 「もう一度」または「次のフレーズ」ボタン

🛠 技術スタック

フレームワーク・言語

Framework: React Native (Expo SDK 50+)
Language: TypeScript
Navigation: React Navigation (Native Stack)

UIライブラリ

React Native Paper: マテリアルデザインコンポーネント
カスタムスタイル: パステルカラー、丸みのあるデザイン

音声関連

expo-av: 音声再生・録音機能
パーミッション管理: マイク使用許可

AI統合（モック実装）

OpenAI API: TTS（Text-to-Speech）用
Azure AI Speech: 発音評価用
注: MVP版ではモックデータで動作、APIキー設定で実機能が有効化

📂 プロジェクト構造

shadowing-app/
├── App.tsx                          # エントリーポイント & ナビゲーション
├── app.json                         # Expo設定
├── package.json                     # 依存関係
├── assets/                          # 画像アセット
│   ├── icon.png
│   ├── splash.png
│   ├── adaptive-icon.png
│   └── favicon.png
└── src/
    ├── screens/                     # 画面コンポーネント
    │   ├── HomeScreen.tsx          # ホーム画面
    │   ├── PracticeScreen.tsx      # 練習画面
    │   └── ResultScreen.tsx        # 結果画面
    ├── components/                  # 再利用可能コンポーネント
    │   ├── AudioRecorder.tsx       # 録音コンポーネント
    │   └── TopicCard.tsx           # トピックカード
    ├── services/                    # API統合レイヤー
    │   ├── OpenAIService.ts        # OpenAI API（モック対応）
    │   └── AzureSpeechService.ts   # Azure Speech API（モック対応）
    ├── types/                       # TypeScript型定義
    │   └── index.ts                # 共通型定義
    └── constants/                   # 定数・マスターデータ
        └── topics.ts               # トピック・フレーズデータ

🎨 UIデザインガイドライン

デザインコンセプト

初心者に優しい: 怖がらせない、親しみやすいデザイン
パステルカラー: 柔らかい色調で安心感を提供
大きなボタン: タップしやすい56pxの高さ
丸みのあるデザイン: ボーダーラジウス16-30px

カラーパレット

Primary: #5DADE2 (青系)
Success: #52C41A (緑系)
Warning: #FAAD14 (黄系)
Danger: #FF4757 (赤系)
Accent: #FF6B9D (ピンク系、録音ボタン)
Background: #F5F7FA (ライトグレー)
Card: #FFFFFF (白)

アニメーション

録音中: パルスアニメーション（0.5秒周期で拡大縮小）
画面遷移: React Navigationのデフォルトトランジション

📊 データ構造

Topic型

interface Topic {
  id: string;           // トピックID
  title: string;        // トピック名
  description: string;  // 説明文
  icon: string;         // 絵文字アイコン
  phrases: Phrase[];    // フレーズ配列
}

Phrase型

interface Phrase {
  id: string;           // フレーズID
  english: string;      // 英語テキスト
  katakana: string;     // カタカナ読み
  audioUrl?: string;    // 音声URL（オプション）
}

PronunciationResult型

interface PronunciationResult {
  score: number;        // 総合スコア (0-100)
  words: WordScore[];   // 単語別スコア
  feedback: string;     // フィードバックメッセージ
  audioUrl?: string;    // 録音音声URL（オプション）
}

WordScore型

interface WordScore {
  word: string;                        // 単語
  score: number;                       // スコア (0-100)
  quality: 'good' | 'bad' | 'fair';   // 評価
}

🔧 セットアップ手順

1. プロジェクト作成

npx create-expo-app@latest shadowing-app --template blank-typescript
cd shadowing-app

2. 依存関係インストール

# 必須パッケージ
npx expo install expo-av
npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
npm install react-native-paper
npm install @react-native-async-storage/async-storage

# Web対応（オプション）
npx expo install react-dom react-native-web @expo/metro-runtime

3. ファイル配置

App.tsxをルートディレクトリに配置
srcディレクトリ構造を作成
各ソースファイルを配置

4. 実行

# 開発サーバー起動
npx expo start

# プラットフォーム別実行
# iOS: iキー
# Android: aキー
# Web: wキー

📱 動作環境

開発環境

Node.js: 18.x 以上
npm: 9.x 以上
Expo CLI: 最新版

実行環境

iOS: iOS 13.0以上
Android: Android 5.0 (API 21) 以上
Web: モダンブラウザ（Chrome, Safari, Firefox）
- 注: 録音機能はモバイルデバイス推奨

🔐 パーミッション

iOS (Info.plist)

NSMicrophoneUsageDescription: マイク使用許可

Android (AndroidManifest.xml)

android.permission.RECORD_AUDIO: 音声録音
android.permission.MODIFY_AUDIO_SETTINGS: 音声設定変更

🎯 モック実装について

OpenAI Service (音声生成)

// モード: useMock = true (デフォルト)
// 動作: ダミーURLを返却、実際の音声生成はスキップ

// 本番化: APIキーを設定
const openAIService = new OpenAIService('your-api-key');

Azure Speech Service (発音評価)

// モード: useMock = true (デフォルト)
// 動作: ランダムスコア生成（60-100点）、1.5秒待機でAPIコールをシミュレート

// 本番化: APIキーとリージョンを設定
const azureSpeechService = new AzureSpeechService('your-api-key', 'your-region');

モックの特徴

APIキー不要で動作確認可能
実際のAPI構造に準拠した実装
本番環境への移行が容易（コンストラクタにキー設定のみ）

🚀 本番環境への移行

1. OpenAI API統合

// services/OpenAIService.ts
const openAIService = new OpenAIService(process.env.OPENAI_API_KEY);

必要な作業:

OpenAI APIキー取得
generateSpeech()メソッドの実装を有効化
モデル: tts-1, voice: alloy推奨

2. Azure Speech API統合

// services/AzureSpeechService.ts
const azureSpeechService = new AzureSpeechService(
  process.env.AZURE_SPEECH_KEY,
  process.env.AZURE_REGION
);

必要な作業:

Azure Cognitive Servicesリソース作成
Speech Serviceキー取得
発音評価APIの実装
音声ファイルのアップロード処理実装

3. 環境変数設定

# .env ファイル作成
OPENAI_API_KEY=sk-...
AZURE_SPEECH_KEY=...
AZURE_REGION=japaneast

🧪 テスト方法

推奨テスト環境

実機デバイス (最推奨)
- Expo Goアプリで実行
- 録音機能の完全動作確認
iOS Simulator (Mac)
- マイク機能の動作確認
Android Emulator
- マイク機能の動作確認

テストシナリオ

ホーム画面でトピック選択
お手本音声の再生確認
録音機能の動作確認
採点結果の表示確認
次のフレーズへの遷移確認
全フレーズ完了後のホーム画面復帰確認

⚠️ 既知の制限事項

MVP版の制限

お手本音声はモック（ダミーURL）
発音評価はランダム生成
オフライン動作非対応
進捗保存機能なし

Web版の制限

録音機能の動作が不安定な場合あり
ブラウザによってマイク権限の挙動が異なる
モバイルデバイスでの使用を推奨

📈 今後の拡張案

Phase 2

ユーザー認証機能
学習履歴の保存
進捗トラッキング
カスタムトピック作成

Phase 3

ソーシャル機能（友達と競争）
より高度な発音分析
ネイティブスピーカーとのマッチング
ゲーミフィケーション要素

📄 ライセンス

このプロジェクトはMITライセンスの下で公開されています。

🙏 謝辞

Expo: クロスプラットフォーム開発フレームワーク
React Native Paper: UIコンポーネントライブラリ
OpenAI: TTS API
Microsoft Azure: Speech Service

作成日: 2024年12月
バージョン: 1.0.0
ステータス: MVP完成 ✅

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up