Rork でアプリがビルドできない？初心者あるあるエラー FAQ

Rorkでアプリ開発を始めると、ビルドエラーに遭遇することはよくあります。特に初心者の方は、理解できないエラーメッセージに戸惑うことが多いでしょう。このFAQでは、Rorkユーザーが最もよく経験する7つの一般的なビルドエラーと、それぞれの解決方法を分かりやすく説明します。

Q1: 「ビルドに失敗しました」エラーが表示されます。依存関係の競合とは何ですか？

A: 「ビルドに失敗しました」というエラーメッセージが表示される場合、最も一般的な原因は依存関係（パッケージ）の競合です。

依存関係の競合とは

プロジェクトが複数のパッケージに依存しており、それらが互いに矛盾したバージョン要件を持つ場合に発生します。例えば、Package Aはライブラリ Xのバージョン 1.0 を必要とし、Package BはライブラリXのバージョン 2.0を必要としている場合、競合が発生します。

解決方法

# ステップ 1: node_modules フォルダと package-lock.json を削除
rm -rf node_modules package-lock.json
 
# ステップ 2: npm キャッシュをクリア
npm cache clean --force
 
# ステップ 3: 依存関係を再インストール
npm install

:::tip npm install が失敗する場合は、npm install --legacy-peer-deps を使用してください。これにより、古いバージョンの依存関係でも許可されます。 :::

さらに詳しく確認する

エラーメッセージをよく読んでください。エラーログに「conflicting peer dependency」などと書かれている場合は、特定のパッケージのバージョンを更新する必要があります。

# 特定のパッケージをアップデート
npm install package-name@latest

Q2: Expo モジュールが見つからないというエラーが出ます

A: このエラーは通常、Expoの依存関係が正しくインストールされていないことを示しています。

原因と解決方法

原因1: Expoがインストールされていない

# Expo CLIをグローバルにインストール
npm install -g expo-cli
 
# または、プロジェクトにローカルにインストール
npm install expo

原因2: プロジェクト内のExpoのバージョンが古い

# Expoを最新バージョンにアップデート
npm install expo@latest

原因3: 依存関係が完全にインストールされていない

# 依存関係を再インストール
npm ci

:::warning npm ci は npm install とは異なります。npm ci は package-lock.json に基づいて正確にインストールされるため、より信頼性があります。 :::

Expoの動作確認

インストール後、プロジェクトフォルダで以下を実行して、Expoが正しく動作しているか確認してください。

expo --version

バージョン番号が表示されればOKです。

Q3: iOS シミュレーターが起動しません

A: iOS シミュレーターの起動に失敗する場合、いくつかの一般的な原因があります。

原因1: Xcodeがインストールされていない（macOSのみ）

iOS開発にはXcodeが必須です。

# App Storeから Xcode をインストール
# または、コマンドラインツールをインストール
xcode-select --install

原因2: シミュレーターが存在しない

# 利用可能なシミュレーターを一覧表示
xcrun simctl list devices
 
# シミュレーターを起動（例：iPhone 15 Proの起動）
xcrun simctl boot "iPhone 15 Pro"

原因3: ポート競合

別のプロセスがシミュレーターが使用するポートを占有している可能性があります。

# ポート 8081 を使用しているプロセスを確認
lsof -i :8081
 
# プロセスを終了
kill -9 <PID>
 
# Rork アプリをポート 8082 で実行
expo start -p 8082

:::tip Expo Goを使用する場合、あなたの実機（実際のiPhone）を使用することで、シミュレーター関連のトラブルを回避できます。 :::

Q4: Android エミュレーターが起動しても白い画面が表示されたままです

A: Android エミュレーターでアプリが白い画面で固まる問題は、初心者が最も困る問題の一つです。

原因と解決方法

原因1: アプリが完全にビルドされていない

# ビルドをリセットして再度実行
expo start --clear

ターミナルで "Watching for file changes" というメッセージが表示されたら、エミュレーターで r キーを押してアプリをリロードします。

原因2: Java SDK のバージョンが不適切

Android開発にはJava SDK (JDK) が必要です。正しいバージョンがインストールされているか確認してください。

# Java のバージョンを確認
java -version
 
# JDKが見つからない場合、インストール
# macOS: brew install openjdk@11
# Windows: https://www.oracle.com/java/technologies/downloads/ からダウンロード

原因3: エミュレーターの RAM が不足している

Android Virtual Device (AVD) に割り当てられたRAMが不足している可能性があります。

• Android Studio を開く
• AVD Manager を開く
• 対象のエミュレーターを編集
• RAM を 2048 MB 以上に増やす

原因4: ネットワーク接続が切れている

Android エミュレーターはホストマシンとのネットワーク接続が必要です。

# エミュレーターを再起動
emulator -avd <AVD_NAME>
 
# または、物理デバイスで Expo Go を使用

:::warning 白い画面のままの場合は、ターミナルのエラーメッセージをよく確認してください。多くの場合、修正方法が明示されています。 :::

Q5: プロンプトからアプリが生成されません。生成がフリーズしてしまいます

A: Rork の AI がアプリ生成中にフリーズすることがあります。これは通常、プロンプトが複雑すぎるか、システムリソースが不足しているためです。

原因と解決方法

原因1: プロンプトが複雑すぎる

非常に複雑なプロンプト（3000文字以上）を入力した場合、生成がタイムアウトすることがあります。

解決方法:

• プロンプトを簡潔に保つ（1000～1500文字）
• 複数のステップに分けて生成する
• 基本的な機能から始めて、後で改善を加える

// 良くない例（複雑すぎる）
「チャットアプリを作ってください。リアルタイム通知、ユーザープロフィール画像、
メッセージ検索、グループチャット、ボイスメッセージ、ビデオ通話、
ブロック機能、メッセージ既読機能、...」

// 良い例（シンプル）
「チャットアプリを作ってください。ユーザーはメッセージを送受信できます。
シンプルな UI で十分です。」

原因2: インターネット接続が不安定

生成プロセス中にネットワーク接続が切れるとフリーズします。

解決方法:

• 安定した WiFi 接続を確認
• ブラウザのコンソール（F12）でエラーが表示されていないか確認
• 生成を中断して再度試す

原因3: ブラウザのリソース不足

タブが多すぎたり、他のアプリケーションでメモリを消費している場合があります。

解決方法:

• 不要なブラウザタブを閉じる
• 他のアプリケーションを閉じてメモリを解放
• ブラウザのキャッシュをクリア

:::tip 生成がスタックした場合は、ブラウザの戻るボタンを押して元に戻り、より簡単なプロンプトで再度試してください。 :::

Q6: 画像やアイコンが表示されません

A: 生成されたアプリに画像やアイコンが表示されない場合、いくつかの原因が考えられます。

原因と解決方法

原因1: 画像パスが正しくない

Rork が生成したコードで、画像の相対パスが間違っている可能性があります。

// 間違った例
<Image source={require('../assets/images/my-image.png')} />
 
// 正しい例
<Image source={require('../../assets/images/my-image.png')} />

原因2: アセットフォルダが存在しない

assets フォルダまたは image フォルダがプロジェクト内に存在しないことがあります。

解決方法:

# assets フォルダを作成
mkdir -p assets/images
 
# 画像ファイルを配置
# 画像をこのフォルダに追加

原因3: アイコンライブラリが正しくインストールされていない

Rork はアイコンライブラリ（例：expo-vector-icons）を使用します。

# ベクターアイコンライブラリをインストール
npm install expo-vector-icons

原因4: キャッシュが古い

ブラウザまたはエミュレーターのキャッシュが古い画像を表示している可能性があります。

解決方法:

# ブラウザのキャッシュをクリア（Expo Web の場合）
expo start --clear
 
# または
expo start -c

:::warning 画像ファイルのファイル名は英数字とアンダースコアのみを使用してください。スペースや特殊文字があると、パスの問題が発生します。 :::

Q7: ホットリロードが効きません。変更を加えても反映されません

A: ホットリロードは、コードを変更したときにアプリを自動的に更新する機能です。これが機能しない場合、いくつかの原因が考えられます。

原因と解決方法

原因1: ホットリロードが有効になっていない

Expo では、ホットリロードはデフォルトで有効ですが、設定で無効にされていないか確認してください。

# Expo アプリを開始し、ホットリロードを明示的に有効化
expo start --hot

原因2: ファイルが保存されていない

エディタでファイルが保存されていない場合、変更は反映されません。

解決方法:

• ファイルが保存されているか確認（ファイルタイトルに "・" が表示されていないか）
• Ctrl+S または Cmd+S で手動保存

原因3: 構文エラーがある

コード内に構文エラーがある場合、ホットリロードが失敗して赤いエラーボックスが表示されます。

解決方法:

• エラーメッセージを読んで問題を特定
• 構文エラーを修正
• 修正後、ホットリロードが自動的に再開される

// 間違った例（セミコロンが足りない）
const name = "Rork"
console.log(name) // 正しく見えるが、次の行で問題が発生することもある
 
// 正しい例
const name = "Rork";
console.log(name);

原因4: エミュレータの接続が切れている

ホスト（あなたのコンピュータ）とエミュレータ間のネットワーク接続が切れた可能性があります。

解決方法:

# Expo アプリを再起動
expo start
 
# シミュレーター/エミュレーターで再度読み込み
# iOS: 開発者メニュー（Cmd+D）> Reload
# Android: 開発者メニュー（Cmd+M）> Reload

原因5: React Strictmode のために二重レンダリングが発生

React StrictMode は開発中に意図的に二重レンダリングを行うため、ホットリロードが遅れているように見えることがあります。

解決方法： これは正常な動作です。本番ビルドでは二重レンダリングは発生しません。開発中は、変更から約2～3秒後に反映されることを期待してください。

:::tip ホットリロードがうまく機能しない場合は、開発者メニューで「Full Reload」を選択して、完全に再ロードしてください。 :::

Q8: エラーが出たときに表示される「Fix Now」ボタンは使っても大丈夫ですか？

A: Rork はビルドや実行でエラーが起きると、エラー内容のすぐ下に「Fix Now」ボタンを表示することがあります。これは、発生したエラーメッセージと前後のコードをそのまま AI に渡し、修正案を自動で適用してくれる機能です。

Fix Now が得意なこと

• 構文エラー（閉じ忘れた括弧、足りないセミコロン、タイプミス）
• import 文の書き忘れや、存在しない関数名の参照
• 型の不一致など、エラーメッセージに原因がはっきり書かれているもの

こうした「機械的に原因が特定できるエラー」では、Fix Now を一度押すだけで解決することが多いです。Q1〜Q7 の手作業に入る前に、まず試す価値があります。

Fix Now が苦手なこと

一方で、次のようなエラーは Fix Now だけでは直りにくい傾向があります。

• 依存関係の競合（Q1）— ファイルの書き換えではなく npm install のやり直しが必要です
• シミュレーターやエミュレーターが起動しない（Q3・Q4）— 環境側の問題で、コードは無関係です
• 生成のフリーズ（Q5）— サーバー側の状態が原因です

これらは「コードを直す」種類の問題ではないため、Fix Now が見当違いの修正を当ててしまうことがあります。

安全に使うコツ

私が普段おすすめしているのは、次の進め方です。

1. エラーが出たら、まずメッセージを一度自分で読む
2. 構文・import 系のエラーなら Fix Now を押す
3. 適用された差分（変更箇所）に必ず目を通す
4. 同じ Fix Now を 2 回続けても直らないときは止めて、Q1〜Q7 の手順に切り替える

Fix Now は便利ですが、中身を見ずに何度も押すと、AI が別の場所まで書き換えて状況が複雑になることがあります。「一度押したら差分を確認する」を習慣にしておくと、安心して使えます。

全体を振り返って

Rork でビルドエラーが発生した場合、以下の手順で対応してください：

1. エラーメッセージをよく読む — Rork やターミナルはしばしば明確な解決方法を提示します
2. 依存関係をリセットする — npm cache clean --force と npm install を試す
3. プロジェクトをクリーンな状態にリセットする — expo start --clear を実行
4. node_modules を再インストールする — 最後の手段として有効です
5. 公式ドキュメントを確認する — Rork と Expo の公式ドキュメントにより詳細な情報があります

これらの方法のほとんどは、初心者が遭遇する一般的なビルドエラーを解決します。それでも問題が解決しない場合は、Rork コミュニティフォーラムで支援を求めてください。プロジェクトのセットアップや使用しているツールのバージョンなど、詳細な情報を提供することで、より正確なサポートを受けられます。