画面文言・画面名に近いファイル・保存と取得の処理。シリーズで学んだ読み方を、AI 生成プロジェクトで総復習する最終話です。
AI 生成 RN コードの読み方 — 最初に見る 3 箇所
AI やテンプレートで React Native プロジェクトをもらっても、最初から全部読む必要はありません。第1話でも書いたとおり、フォルダ一覧を上から追うより、いま画面に出ているものから入る方が早いです。
第1話 から 第5話 では、画面・state・ルート・フォーム・API を バラバラに 練習してきました。最終話では、それらを 3 箇所に固定 して総復習します。新しい API の実装はほとんど扱わず、読み解き（B） に集中する記事です。
この記事で扱うこと
| 箇所 | シリーズでの出典 | 読み解きのゴール |
|---|---|---|
| ① 画面文言 | 第1話 | 見えている文字列から定義箇所へ |
| ② 画面名に近いファイル | 第3話 | 文言がヒットしないときの入口 |
| ③ 保存・取得 | 第5話 | リスト・永続化の処理を辿る |
題材プロジェクト（合成サンプル）
本記事では、第1〜5話の要素を含む 小型の合成サンプル を題材にします。実在のリポジトリではなく、読み解きの練習用イメージです。
app/
├── _layout.tsx
├── index.tsx # 「ようこそ」+ 投稿一覧への Link
├── settings.tsx # 「通知を受け取る」トグル
└── posts/
└── index.tsx # 投稿一覧（fetch + FlatList）app/index.tsx の冒頭は次のようなイメージです。
export default function HomeScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>ようこそ</Text>
<Link href="/posts">投稿一覧へ</Link>
</View>
);
}app/posts/index.tsx では第5話と同型で fetch と FlatList を使い、app/settings.tsx にはトグル用の state があります。コード全体を写経する必要はありません。検索の練習が再現できる 程度の構成です。
1. 読む前のルール
未知のプロジェクトを開いたら、次の 3 ステップだけ守ります。
- アプリで いまいちばん気になる画面 を 1 つ開く
- その画面について、① → ② → ③ の順で見る（他のファイルは後回し）
- ヒットしなければ次の箇所へ進む（1 箇所で詰まらない）
node_modules や components/ui を先に読まない。第1話と同じ方針です。
2. ① 画面に出ている文言を検索する
シナリオ: ホーム画面に「ようこそ」と表示されている。
手順
- エディタの全文検索（macOS なら
Cmd+Shift+F、Windows ならCtrl+Shift+F）でようこそを探す - ヒットした
app/index.tsxを開く - 同ファイル内の
Link href="/posts"から、次に見る画面 が投稿一覧だと予測する
第1話で練習した 文言 → ファイル → 部品 の入口です。固定の挨拶文なら、ほぼこの方法で着地できます。
つまずき
| 症状 | 対処 |
|---|---|
| 文言がヒットしない | {user.name} のように動的生成の可能性 → ② へ |
| 複数ヒット | いま見ている画面のコンポーネント名や app/ 配下で絞る |
3. ② 画面名に近いファイルを開く
シナリオ: 設定画面を見ている。タイトルバーは「設定」だが、「通知を受け取る」が全文検索に引っかからない（別コンポーネントに切り出されている、など）。
手順
app/配下でsettingsやsettingなど、画面名に近いファイル名 を探す- 見つからなければ
app/_layout.tsxを開き、Stack.Screenの登録名を確認する - UI 上の名前とファイルの対応表を 1 つ書く
| UI 上の名前 | ファイル |
|---|---|
| ホーム | app/index.tsx |
| 設定 | app/settings.tsx |
| 投稿一覧 | app/posts/index.tsx |
第3話で学んだ パス・ファイル名 ↔ 画面 の読み方の応用です。文言検索が空振りしたときの 第二入口 になります。
4. ③ データの保存・取得を辿る
シナリオ: 投稿一覧の行タイトルが、API から来ているとわかっている。
手順
- 一覧に見えているタイトル文字列を検索し、
renderItem内の{item.title}を特定する（第5話と同型） FlatListのdata={posts}からpostsstate を辿るsetPosts→fetch→useEffectまで遡る
設定画面のトグルなど、端末に保存 している場合は、次のキーワードでも検索します。
fetch / axios / useQuery / AsyncStorage / setItem / getItemAsyncStorage の詳細は本記事では扱いません。「永続化がありそうなら、この語で探す」という目安で十分です。
5. 3 箇所を 1 本の流れでやり直す
課題: 「設定画面のトグルを変えたい」とき、どの順でファイルを開くか。
- ① トグル横のラベル「通知を受け取る」を全文検索する
- ヒットしなければ ②
app/settings.tsxを開く（または_layoutで Screen 定義を確認） - ON/OFF の値がどこに保存されるか不明なら ③
AsyncStorageやuseStateを検索する
第2話の 表示値 → state、第4話の 入力欄・エラー文言 も、① の検索で同じ要領です。画面の部品を変えたいときは、まず 見えている文言 から入ります。
6. AI 生成コード特有の注意
| パターン | 読み方のコツ |
|---|---|
components/ が厚い | まず app/ の画面ファイルだけ見る |
ロジックが useXxx に分割されている | ① で画面文言が取れた あと に hook を辿る |
| コメントが長い・AI 臭い | コメントより UI 文言 を信頼する |
Tabs や (group) フォルダがある | ② で _layout とファイル名の対応を先に書く |
プロンプトの書き方や Cursor の使い方は本記事のスコープ外です。Substack の短尺 Tips と角度を分け、codewith では 手順・フォルダツリー・チェックリスト を厚くしています。
7. まとめ — シリーズ総復習
3 箇所チェックリスト
□ ① いま見ている文言を全文検索したか
□ ② 画面名に近いファイル、または app/_layout を開いたか
□ ③ リスト・保存・取得のキーワードで処理を辿ったか読み解きのキーワード（シリーズ通し）
| 話 | キーワード |
|---|---|
| 第1話 | 画面の文言 → ファイル → 部品 |
| 第2話 | 表示値 → state → setXxx |
| 第3話 | 画面の文言 → app/ のファイル → Link の href |
| 第4話 | ラベル → TextInput → value / onChangeText |
| 第5話 | 行の文言 → renderItem → data → fetch |
| 第6話（本記事） | ①②③ をこの順で試す |
シリーズ一覧
| # | 記事 |
|---|---|
| 1 | React Native 入門 — Expo で動かしながら、画面からコードを読む |
| 2 | useState で画面を動かす |
| 3 | Expo Router 入門 |
| 4 | フォーム入力とバリデーション |
| 5 | API とリスト |
| 6 | 本記事（読み解きの締め） |
ここまでで、RN 入門シリーズ本編 6 話は一通りそろいました。次のステップは、手元のプロジェクトや /projects の実績アプリで、今日のチェックリストをそのまま試すことです。
参考リンク（シリーズ外）
- 大規模向けフォルダ整理: Expoアプリのフォルダ構造を整理する方法