「英語話せない問題」を2時間のVibe Codingで解決してみた

AI・機械学習チームの中村伊吹(@inakam00)です。このブログはAI・機械学習チームブログリレー 4日目の記事です。前日は苅野(@hkford3)さんの結婚式ネタでした。今回は新婚旅行ネタです。

先日新婚旅行でハワイへ行くことになりました。楽しみな反面、1つ大きな不安がありました。

英語話せない問題

それが英語話せない問題です。簡単な英会話ならできるものの、複雑な話を伝えることは難しいです。そのほかにも、発音がうまくできずに伝わらなかったり、現地の訛りがあったりすると、いよいよ大変になってしまいます。万が一に備えて、何か対策をしておきたいと出国前から考えていました。

そんな時、こんなツイートを発見しました。

今日は妻の卒業式で相手のご両親が中国から日本に来たので、初の両家ご対面🙌両家とも母国語しか話せないので通訳アプリ作った！今ある通訳アプリはどれも精度が微妙なので、バックエンドを全部gpt-4oにした。作ったって言ったけど、実際はclineが全部作ってくれた😂自分の工数は2時間くらい... pic.twitter.com/DwdAPzkeZx
— Ino.Ichi (@inoichan) March 24, 2025

翻訳も返信の内容もとても良さそうに見えます。

2時間で作れるなら、作ってみよう

というわけで、本記事ではAI開発ツール（Bolt.new + Cursor）を活用して、実際に2時間で翻訳アプリを開発した体験談をお届けします。本記事の内容は2025年3月時点で実施した内容です。現在とは仕様の異なる部分があることはご了承ください。現在の私はClaude Code全盛で過ごしております。

英語話せない問題
Phase1: AIによる要件定義とDeepSearch活用
Phase2: Bolt.newでの雛形作成
- Bolt.newで初期プロトタイプを作成する
Phase3: CursorでのVibe Coding
完成したアプリ
Tips: Bolt.newで生成したExpoアプリを実機インストールする
- Expo GoからXcodeビルドへの移行手順
結果と学び
We are hiring!

Phase1: AIによる要件定義とDeepSearch活用

まず「こういうアプリを作りたいな」というふわっとした要件を明確化します。

OpenAIのAPIを実装に使いたかったのですが、APIは各社似たような仕様の多いため、AIが存在しないAPIパスを出力したりとハルシネーションの起きやすい実感があります。要件定義の段階で誤りがあると、コード生成にも問題があると考えられたため、DeepResearch機能を使ってハルシネーションを少なくしつつ、要件を定義します。この作業はGrok3で行いましたが、ChatGPTやGeminiでも実施可能だと考えられます。

例えば次のようなプロンプトで要件を定義します。

翻訳アプリを作りたいです。
ChatGPTのWhisperを使って音声認識を行った後に、ChatGPTで翻訳をした結果を音声を生成して返すということをしたいです。
アプリフレームワークであるExpoで構築します。
初期構築をbolt.newで行うため、そのためのプロンプトをMarkdownで出力してください。

この結果、出力されたプロンプトが以下になります。

Build a mobile translation app using Expo that integrates with OpenAI's APIs for speech recognition, translation, and text-to-speach. The app should allow users to select source and target languages from a list of supported languages, record their speech, transcribe it using Whisper, translate the transcribed text using ChatGPT, generate speech from the translated text using text-to-speach, and play back the generated speech.

Specifically:

1. **User Interface:**
- A screen with two dropdowns to select source and target languages. Supported languages include English, Spanish, French, German, Italian, Portuguese, Japanese, and Chinese.
- A button to start recording speech.
- A button to stop recording speech.
- A button to play the translated speech.
- Status messages or indicators to show the current process (e.g., "Recording...", "Transcribing...", "Translating...", "Playing...").

2. **Audio Recording:**
- Use `expo-audio` to record user speech in a format compatible with the Whisper API (e.g., MP3 or WAV).
- Save the recorded audio as a file that can be sent to the Whisper API.

3. **Speech Recognition:**
- Send the recorded audio to OpenAI's Whisper API at https://api.openai.com/v1/audio/transcriptions with the model parameter set to 'whisper-1'.
- Handle the API request and response to get the transcribed text.

4. **Translation:**
- Create a prompt for ChatGPT: "Translate the following text from [source_language] to [target_language]: [transcribed_text]"
- Send this prompt to the ChatGPT API at https://api.openai.com/v1/chat/completions with the model set to 'gpt-3.5-turbo'.
- Handle the API request and response to get the translated text.

5. **Text-to-Speech:**
- Send the translated text to OpenAI's text-to-speach API at https://api.openai.com/v1/audio/speech with the model set to 'tts-1' and voice set to 'alloy'.
- Handle the API request and response to get the audio file.

6. **Audio Playback:**
- Use `expo-audio` to play the generated audio file.

7. **Error Handling:**
- Display error messages if any step fails (e.g., network error, API error, permission denied).

8. **API Key Management:**
- Store the OpenAI API key securely using environment variables.
- Use the API key to authenticate all API requests.

Additional Details:
- The app should request permissions for audio recording and playback.
- The app should manage different states (idle, recording, transcribing, translating, generating speech, playing) to update the UI accordingly.
- The app should be user-friendly and straightforward.

実際のDeepSearchの様子は以下よりご覧ください。

https://grok.com/share/bGVnYWN5_a6e09f9a-766f-4c34-9e6d-d198a25bad09

Phase2: Bolt.newでの雛形作成

Bolt.newは、StackBlitzが提供するブラウザ上で動作する開発エージェントです。自然言語のプロンプトからフルスタックWebアプリを自動生成でき、2025年2月にはモバイルアプリ開発にも対応しています。

Bolt 🤝 Expo: Get your idea to the app store without writing code

Bolt.newで初期プロトタイプを作成する

GrokのDeepSearchで生成されたプロンプトをそのまま投入すると、あっという間にReact Nativeアプリの雛形が生成されます。

これだけでも素晴らしいのですが、個人的にいいなと思ったのがExpo Goを使った実機確認機能です。

一通り必要なファイルが出力された後、QRコードが表示される
スマートフォンに「Expo Go」アプリをインストール
QRコードを読み込むと実機で動作確認が可能
プロンプトで修正指示を出すとリアルタイムに更新される

この機能により、実機上でアプリの様子を確認しながら、内容を修正できます。

何度か修正を繰り返すうちに、次のようなアプリになりました。

初期の雛形を作成したら、手作業での微修正も含めてスピード感を持って編集したくなったため、Cursorに移行します。

Phase3: CursorでのVibe Coding

ローカル環境でのExpo開発環境構築

まず、Bolt.newで生成したコードをローカル環境に移行します。Bolt.newではコードをダウンロードできるため、UI上からダウンロードして環境を整えます。

# Expoプロジェクトへ移動
cd your-app-name

# package.jsonの依存関係を確認・インストール
npm install

# ローカルでの実機確認開始
npx expo start

ローカル環境でもexpo startを実行することで、Expo Goによる実機確認が可能です。実機と開発PCを同じWi-Fiに接続すると、謎の技術*1によってターミナル上にQRコードが出現し、スキャンするとExpo Go上で確認可能です。

1時間で13タスク実装していき

Vibe Codingの真価発揮です。人間はデバッグ担当者となり、AI(Gemini 2.5)にUI改善、機能追加、リファクタリングを任せました。

1時間で次のような機能を実装してくれました。

実装したタスク例：

音声認識機能の実装とエラーハンドリング
音声合成機能の追加
UI/UXの改善（セーフエリア対応など）
会話履歴機能の実装
履歴の個別・全削除機能
設定画面の作成（APIキー入力、トーン調整）
言語選択機能の改善
発音記号の表示機能

効果的なVibe Codingのコツ

この過程で発見した効果的なテクニックをご紹介します。

1. コンテキストを正確に与える

参照してほしいファイルについては「Add Context」による手動指定の方が正確です。Cursorのindex機能や、Claude Codeの隅から隅まで調べる機能については強力ではありますが、人間が理解していることを指定して与えた方がAIも正確に理解してくれます。関連するコンポーネントやユーティリティファイルも含めて必要なファイルは指定しましょう。

2. 「今何が起きていて、どうしてほしいのか」を明確に指示

❌ 悪い例：「設定画面を修正して」
✅ 良い例：「settingsの画面が上に見切れてしまっているので、セーフエリアを守るように修正してほしい」

コンテキストの例にも近いのですが、不正確な指示は不正確な結果を生みます。現在何が起きていて、私はどうして欲しい、というのを言語化することで、AIは人間が求めているような挙動をしやすくなります。

3. エラー情報の正確な共有

エラーが起きているなら、エラー文をそのまま貼って解消を依頼するのが早くて効果的です。Expo Goで動作させている場合、スマートフォン上で発生しているエラー文はそのままPC上でも表示されます。現在のAIは画像も理解できるモデルがほとんどですので、モバイルアプリのような画面が存在する場合にはスクリーンショットを画像として提供してあげることも有効です。

4. チャット切り替えによるノイズ除去

うまくいかない場合、新しいチャットに切り替えて、事前のコンテキストを解消してあげる方が良いと考えられます。特に最初にうまくいかなかった場合のAIによる試行錯誤の出力履歴がノイズになっている場合がよくあります。人間と同様に、気持ちを切り替えて再度実行すると成功することが多いです。

完成したアプリ

Vibe Codingで翻訳アプリを作った。便利。 pic.twitter.com/g2oTvLkDR6
— ナカムラ (@inakam00) June 18, 2025

自動言語の検出機能

Whisperによる言語判定を活用
対話中でもいちいち言語を切り替える必要がない
日本語→英語、英語→日本語を自動で判別

発音記号表示

GPT-4.1-miniに発音記号の生成も依頼
翻訳結果と併せて表示することで、自分でも話せるようサポート

運用面

個人APIキー設定：APIによる従量課金なので低コスト
翻訳トーン調整：フォーマルからカジュアルまで5段階
多言語対応：英語・日本語・中国語など9ヶ国語（GPT-4.1-miniなので実質80ヶ国語対応可能）

というわけで、自分好みのアプリが完成しました🔥

Tips: Bolt.newで生成したExpoアプリを実機インストールする

Expo Go上での動作確認だけでなく、実際にiPhoneアプリとしてインストールする方法もご紹介します。 Expoにはprebuildという機能が用意されていますが、export:embedによってコードをバンドルする必要があります。

Expo GoからXcodeビルドへの移行手順

1. iOSプロジェクトファイルの生成

# Xcode用のネイティブファイルを生成
expo prebuild --platform ios

2. JavaScriptバンドルの生成

# 本番用にコードをバンドル
npx expo export:embed \
  --entry-file='node_modules/expo-router/entry' \
  --bundle-output='./ios/main.jsbundle' \
  --dev=false \
  --platform='ios'

3. Xcodeでのビルド

# Xcodeプロジェクトを開く
open ios/YourApp.xcworkspace

結果と学び

実際の使用状況

さて、苦労して作ったこのアプリですが、ハワイでは実際に使ったのでしょうか。

全く使いませんでした🙃

ハワイは想像以上に日本語が浸透していました。

多くの場所で英語・韓国語・日本語・中国語が併記
「こんにちは」「ありがとう」など日本語で話してくれるケースも多い
入国審査でもアメリカの係官が日本語で対応してくれた
簡単な英会話（「Could I have〜」など）で十分対応できた

行きの飛行機でも「旅で使える英会話」という本を熟読していたこともあり、旅の中で困ることはありませんでした。

技術的成果

使わなかったとはいえ、技術的には大きな収穫がありました。

React Native未経験でも実用アプリが完成

事前知識：Reactの基本、Xcodeの基本操作程度
2時間で音声認識から音声合成まで一気通貫のアプリが完成
AIツールの力を借りることで、学習コストと実装コストを大幅に削減

Vibe Codingの有効性

今回のようにReact Nativeをほとんど理解せずともアプリが作れてしまうため、Vibe Codingは人間が試行錯誤したり理解する機会を減らしてしまう可能性があります。そのとき大学時代のある授業を受講していた時の先生の言葉を思い出しました。

理学は真理を追求するが、工学は社会に役立てることが目的

動作原理がすべて分からなくても、それを社会に役立てられればいい。研究においても「深層学習がなぜうまくいくかは誰にも分かってない。でも役に立っている。今はブラックボックスということでいい」と取り組んでいた自分には、このアプローチは非常に相性が良いと感じました。

Vibe Codingの価値

初手でアイデアを即実装するのに最適
動作原理より社会への価値提供を重視する工学的アプローチ
完璧を求めず、まず動くものを作って改善していく

また、新しいアイデアが思いついたら、善は急げとAIの力を借りて即実装していきたいです。

We are hiring!

エムスリーAI・機械学習チームでは、バイブス高く開発していく意欲のあるエンジニアを募集しています。新卒・中途それぞれの採用だけでなく、カジュアル面談やインターンも常時募集しています。

*1:ターミナル上にQRコードが出るので、最初何が起こっているのかと戸惑いました。テキストによってQRコードを表示しているようです。

エムスリーテックブログ

エムスリー(m3)のエンジニア・開発メンバーによる技術ブログです