プレビューが真っ黒のまま動かないとき、AI

夜に壁紙アプリの設定画面を作り直していて、生成が終わったプレビューを実機で開いたところ、画面がただ真っ黒のまま動かなかったことがあります。エラーの赤い画面も出ません。何を直せばいいのか、手がかりがひとつもない状態でした。

最初にお伝えしたいのは、真っ黒の画面は「壊れている」という一種類の症状ではない、ということです。原因の置き場所が少なくとも3つあり、それぞれ直す相手が違います。私は最初のうち、どこが悪いのかを見ないまま「真っ黒になりました、直してください」と同じ依頼を重ねてしまいました。結果は芳しくありませんでした。

真っ黒の画面は、3か所のどこかで止まっています

プレビューが映るまでには、大きく分けて三つの段階があります。

段階	何が起きているか	主な直し方
1. 端末とアプリ側	Expo Go などがプロジェクトを開けていない	ログイン・再読み込み・キャッシュを確かめる
2. 画面の描画	アプリは動いているが、何も見えない状態になっている	生成コードの表示条件や色を確かめる
3. ネイティブ側	アプリそのものが起動直後に落ちている	端末のログを読む

上から順に確かめるのが近道です。一つずつ潰していけば、AI に頼む内容も具体的になります。

1. 端末とアプリ側を先に疑います

QR コードを読んでも何も映らない場合は、生成されたコードより前の段階を疑います。Expo Go ではプロジェクトを実行するのにログインが必要になっており（2026 年 9 月から）、ターミナル側とアプリ側の両方で状態が揃っていないと開きません。この点は別の記事で順番を整理しています。

ここで見たいのは「アプリを完全に閉じてから開き直すと変わるか」です。変わるなら、コードではなく端末側の状態の問題でした。

2. 画面の描画を疑います

Expo の公式ドキュメントでは、開発中のエラーは「スタックトレースを読む」「動いていた状態に戻して、変更を一つずつ当て直す」という進め方が示されています。真っ黒でエラーも出ないときは、この後者がよく効きます。

私自身、個人開発のアプリでも同じ型の失敗を何度か踏みました。多いのは次の三つです。

背景色が黒で、文字色も黒（ダークテーマの指定が片方だけ効いている）
データを読み込むまで null を返していて、読み込みが終わらないまま何も描かれない
親の View に高さがなく、中身が高さ 0 で潰れている

見分けるには、診断用の部品を一時的に差し込むのがいちばん早いです。次のコードは、画面の最上位に明るい背景と文字を置くだけのものです。

import { View, Text } from "react-native";
 
// 診断用: 黒の背景に埋もれていないかを確かめる（確認が済んだら外します）
export default function DebugBanner({ label }: { label: string }) {
  return (
    <View style={{ backgroundColor: "#ffd54f", padding: 12 }}>
      <Text style={{ color: "#000", fontWeight: "700" }}>{label}</Text>
    </View>
  );
}

これを画面の先頭に置いて、黄色い帯が見えるかどうかで分かれます。見えるなら、アプリは動いていて、その下の描画が空になっています。見えないなら、描画より手前（端末側かネイティブ側）で止まっています。

3. ネイティブ側で落ちていないかを確かめます

帯も見えず、再読み込みでも変わらないときは、アプリが起動直後に落ちている可能性があります。Expo の公式ドキュメントでは、ネイティブのクラッシュはログを読むことが前提になっています。

Android: adb logcat で端末のログを流します
iOS: Mac の Console アプリで端末を選び、ストリーミングを開始します

Windows だけで作業している方は、ここは無理に追わなくて構いません。落ちたことが分かれば、次の「AI にどう伝えるか」に進めます。

切り分けたあとに、AI へ伝える内容を変えます

Rork の FAQ には、AI のエラーではクレジットを消費しないこと、動いていた版へ戻す Restore があること、行き詰まったときは Rork に Web 検索させたり別のモデルに切り替えたりする案内が書かれています。ですから、試すこと自体を怖がる必要はありません。

ただし、伝え方は変えます。

黄色い帯が見えた場合: 「画面は動いているが、一覧の部分だけ何も描かれない。読み込み前に null を返していないか確認して」
帯も見えなかった場合: まず Restore で直前の動いていた版へ戻し、変更を一つずつ頼み直す

「真っ黒です」だけでは、AI も推測で直すしかありません。どの段階で止まっているかを一文添えるだけで、返ってくる修正は絞り込まれます。

依頼に添える3行のメモ

切り分けた結果は、そのまま依頼文の先頭に置けます。私が使っているのは次の形です。

止まっている段階: 2（画面の描画）
確かめたこと: 黄色い帯は見える／アプリを閉じて開き直しても同じ
気になっている箇所: 一覧画面で、データ読み込み前に何も返していない可能性

この3行があると、返ってくる修正が「全体を作り直す」方向に広がりにくくなります。逆に、止まっている段階が分からないまま依頼を重ねると、動いていた部分まで書き換わることがあります。そうなったときは、Restore で動いていた版へ戻してからやり直す方が、結果として早く済みます。

頼み直す前に、止まっている段階を一文で言えるようにしておく。 この線引きだけは、疲れている夜ほど守るようにしています。

まずは、次に真っ黒の画面に出会ったとき、依頼を送る前に黄色い帯を一つ差し込んでみてください。見えるか見えないかで、次に開くべき画面が決まります。

プレビューが真っ黒のまま動かないとき、AI に頼み直す前にやる3つの切り分け