Rork でアプリを生成して実際に動かしてみたところ、「APIからデータが取得できない」「ネットワークエラーが出る」「画面に何も表示されない」という問題に遭遇することは珍しくありません。コードは生成されているのに動かないのは、コーディングに慣れていない方には特に戸惑いますよね。
Rork で生成したアプリでネットワーク通信やAPIリクエストが失敗する時の原因の見つけ方と、状況別の解決方法を順を追って整理していきます。
まず症状を確認する
ネットワーク関連のエラーには大きく分けて以下のパターンがあります。自分の症状がどれに当てはまるか確認しましょう。
① コンソールに「Network request failed」と表示される デバイスやシミュレーターからサーバーへの通信自体が失敗しています。URLの間違いや、開発環境特有の設定不足が原因の場合があります。
② 「CORS エラー」が表示される（ウェブビュー・開発環境） ブラウザのセキュリティポリシーにより、別ドメインへのリクエストがブロックされています。
③ 404 Not Found が返ってくる APIのURLが間違っているか、エンドポイントが存在しない状態です。
④ 401 Unauthorized または 403 Forbidden が返ってくる 認証情報（APIキー、トークン）の設定に問題があります。
⑤ データは取れるが表示されない データ取得は成功しているが、JSON の構造がコードの想定と異なる可能性があります。
Step 1：Rork のデバッグコンソールを確認する
まず Rork の開発環境でデバッグコンソール（ログ画面）を開きましょう。エラーの詳細なメッセージがここに表示されます。
Rork の画面で「Debug」または「Console」タブを開き、アプリの操作中に表示されるエラーメッセージを確認してください。エラーメッセージには原因が書かれていることがほとんどです。
Rork の AI に「コンソールに以下のエラーが出ています。原因と修正方法を教えてください：[エラーメッセージ]」と伝えると、適切な修正を提案してもらえます。
Step 2：API の URL とエンドポイントを確認する
「Network request failed」や「404 Not Found」が出ている場合、まずURLを確認します。
Rork に以下のように依頼してみてください。
「現在 https://example-api.com/data にリクエストしていますが、404 エラーが返ってきます。APIのベースURLとエンドポイントのパスを確認して修正してください。」
実際に curl コマンドや Postman などのAPIテストツールで対象のURLに直接リクエストを送り、レスポンスが返ってくるか確認するのも有効です。
Step 3：開発環境での CORS エラーを解決する
Expo Go やウェブビューでアプリをテストしている場合、CORS（Cross-Origin Resource Sharing）エラーが発生することがあります。これは本番ビルドでは発生しないことも多いですが、開発段階では対処が必要です。
解決策A：開発用プロキシを設定する
Rork に以下のように依頼してください。
「開発環境で CORS エラーが出ています。app.config.js に開発用プロキシを設定するか、expo-router の API Routes を使ってバックエンドへのリクエストをプロキシする方法を実装してください。」
解決策B：API サーバー側で CORS を許可する
もしあなたが API サーバーを管理している場合は、サーバー側で開発環境のオリジン（http://localhost:8081 など）からのリクエストを許可するよう設定します。
Step 4：認証エラー（401/403）を修正する
APIキーやアクセストークンの設定ミスによる認証エラーは非常によくあります。
API キーの設定方法を確認する
Rork で生成されたコードでは、APIキーが正しい場所に設定されているか確認しましょう。多くの場合、環境変数（.env ファイル）か、リクエストヘッダーに設定します。
# Rork への依頼例
「現在 401 エラーが出ています。APIキーは `EXPO_PUBLIC_API_KEY` という環境変数に設定していますが、
リクエストヘッダーに正しく含まれているか確認してください。
ヘッダー名は 'Authorization: Bearer [token]' 形式です。」
環境変数が読み込まれているか確認する
Expo を使ったアプリでは、環境変数名が EXPO_PUBLIC_ で始まる必要があります。この prefix がないとクライアントサイドのコードからは読み込めません。
Step 5：レスポンスデータの構造を確認する
APIからのレスポンスは返ってきているが、画面に表示されない場合は、レスポンスデータの構造がコードの想定と異なっている可能性があります。
Rork に以下のように伝えてください。
「APIからのレスポンスは取得できていますが、画面に表示されません。レスポンスデータの console.log を追加して構造を確認し、データのマッピングを修正してください。」
Rork がデバッグ用のログを追加してくれるので、実際のレスポンス構造を確認した上で適切なデータマッピングのコードを修正できます。
よくあるケース別のRorkへの依頼テンプレート
HTTPS ではなく HTTP の API に接続したい（iOS では HTTPS が必須）
「iOS では HTTP（非SSL）のAPIに接続しようとすると 'App Transport Security' によりブロックされます。開発中に限り app.json で ATS 例外を設定してください。本番では HTTPS への移行が必要です。」
タイムアウトが頻繁に発生する
「APIレスポンスが遅く、タイムアウトエラーが発生しています。fetch のタイムアウト設定を15秒に延長し、タイムアウト時にリトライする処理を追加してください。」
ページネーション（続きのデータ取得）がうまくいかない
「APIからページネーション形式でデータを取得していますが、最初のページしか表示されません。スクロールで次のページを読み込む loadMore 関数と、ローディング状態の表示を実装してください。」
全体を振り返って
Rork でのネットワーク・APIエラーは、エラーメッセージさえ確認できれば、ほとんどの場合 Rork の AI に修正を依頼することで解決できます。
困ったときの基本フローは、まずデバッグコンソールでエラーメッセージを確認します。次に Rork に「このエラーが出ています。修正してください」と伝えます。修正後に再度テストして解決を確認します。それでも解決しない場合は Rork のチャット機能で「なぜこのエラーが出るのか詳しく説明してほしい」と聞いてみましょう。
Rork は質問に対してとても丁寧に答えてくれます。エラーメッセージをそのまま共有して「どうすれば直りますか？」と聞くだけでも、多くの場合的確な解決策を提示してくれます。ぜひ活用してみてください。