Navigation2026/06/17

app/ のファイル名と画面の対応を押さえ、第1話の読み方をファイルベースルーティングに広げる第3話です。

Expo Router 入門 - フォルダ構成から画面を読む

第1話では React Navigation で「画面コンポーネント」と「遷移」を学びました。第2話では、各画面の中で useState による値の読み方を練習しました。

実務やテンプレート、AI 生成の React Native プロジェクトを開くと、app/ フォルダが画面の入口になっていることが多いです。これは Expo Router によるファイルベースルーティングです。第3話では、最小の 2 画面アプリを動かしながら、ファイルパスと画面の対応を読む練習をします。

この記事で扱うこと

章	実装（A）	読み解き（B）
プロジェクト作成	Router 付きテンプレで起動	`app/` が入口であること
最小構成	`_layout` / `index` / `detail`	パスとファイルの対応
遷移	`Link` で画面移動	タップ先の画面文言 → ファイル
迷ったとき	（既存プロジェクト想定）	画面名・文言から開くファイルの決め方
まとめ	次に進む順番	第4話への導線

1. Expo Router 付きプロジェクトを作る

新規に作る場合は、Expo Router が入ったテンプレートを選びます。

bunx create-expo-app@latest MyRouterApp
cd MyRouterApp
bunx expo start

create-expo-app の対話では、Expo Router 付きのテンプレート（名称は CLI のバージョンにより Default や Tabs など）を選びます。起動後、エディタで app/ フォルダを開いてください。

第1話では App.tsx に画面を書く構成でした。Expo Router では app/ 配下のファイルが画面の入口 になります。ここが読み解きの起点です。

つまずきやすい点

テンプレートによって初期ファイル名が違います（index.tsx だけ、(tabs)/ フォルダ付きなど）
第1話の React Navigation 手動構成と フォルダ構造が一致しない のは正常です
本記事の最小構成に合わせるため、次の章では app/ を次の 3 ファイル構成に 差し替え ます

2. 最小構成 — ホームと詳細の 2 画面

目標のフォルダ構成は次のとおりです。

app/
├── _layout.tsx    # 共通レイアウト・Stack 定義
├── index.tsx      # / （ホーム）
└── detail.tsx     # /detail

テンプレートに余分なファイル（(tabs)/ など）がある場合は、記事用に上記 3 ファイルに整理してください。

`app/_layout.tsx`

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "ホーム" }} />
      <Stack.Screen name="detail" options={{ title: "詳細" }} />
    </Stack>
  );
}

_layout.tsx は app/ 配下の共通レイアウトです。第1話の NavigationContainer + Stack.Navigator に相当します。

`app/index.tsx`

import { Link } from "expo-router";
import { StyleSheet, Text, View } from "react-native";

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>ホーム画面</Text>
      <Link href="/detail" style={styles.link}>
        <Text>詳細へ</Text>
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 16,
  },
  title: {
    fontSize: 20,
    fontWeight: "600",
  },
  link: {
    padding: 12,
    backgroundColor: "#e2e8f0",
    borderRadius: 8,
  },
});

`app/detail.tsx`

import { StyleSheet, Text, View } from "react-native";

export default function DetailScreen() {
  return (
    <View style={styles.container}>
      <Text>詳細画面</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

bunx expo start で起動し、「詳細へ」をタップして「詳細画面」に遷移できれば成功です。

第1話では Stack.Screen の component={HomeScreen} で画面を登録していました。Expo Router では app/index.tsx というファイル名そのものが画面 になります。Link の href="/detail" は app/detail.tsx に対応します。

3. 読み解きの練習 — パスと画面を対応させる

第1話と同じ型で、いま見ている画面の文言から入ります。

見ているもの	辿り先
タイトルバー「ホーム」	`_layout.tsx` の `Stack.Screen name="index"`
画面の「ホーム画面」	`app/index.tsx` 内の `Text`
タップ「詳細へ」	`index.tsx` の `Link href="/detail"`
遷移後の「詳細画面」	`app/detail.tsx`

手順

いま見ている画面の文言（例: ホーム画面）をエディタで全文検索する
ヒットしたファイルが app/ 配下のどれか確認する
タイトルバーの文言は _layout.tsx の Stack.Screen を探す
遷移ボタンは Link の href から 次のファイル名 を予測する

読み解きのキーワードは次のとおりです。

画面の文言 → app/ のファイル → _layout の Screen 定義 → Link の href

第2話で学んだ useState の読み方は、各画面ファイル（index.tsx や detail.tsx）の中でそのまま使えます。画面を特定してから、中身を読む——この順番が実務でも使いやすいです。

4. 読み解きの練習 — 迷ったときに開くファイル

既存プロジェクトや AI 生成コードでは、app/ 以下にファイルがたくさんあることがあります。全部を上から読む必要はありません（第1話と同じ方針です）。

入口の決め方

いま見ている画面の文言 を 1 つ選び、全文検索する
ヒットしなければ、画面名・タイトルバーに近いファイル名 を app/ で探す（例: 設定 → settings.tsx）
それでも迷ったら app/_layout.tsx を開き、登録されている Stack.Screen やタブ一覧を確認する
app/index.tsx はルート / の画面であることが多い

ファイルが多いプロジェクトでも、「いま見ている 1 画面」に絞れば、開くファイルは 1〜2 個に収まります。

5. つまずきやすい点

症状	原因の目安
画面が真っ白	`app/_layout.tsx` がない、または `app/` 外に画面を置いている
遷移しない	`href` のパスとファイル名の不一致（`/detail` と `details.tsx` など）
タイトルが想定と違う	`_layout.tsx` の `options.title` を確認する
`App.tsx` だけで `app/` がない	Expo Router 未導入。Router 付きテンプレで作り直す

Tabs / Drawer の応用、認証フロー、deep linking の詳細は本記事のスコープ外です。

読み方の軸は同じです。見えているもの → コード上の定義箇所。

第1話（React Navigation）	第3話（Expo Router）
`Stack.Screen` + `component`	ファイル名が画面
`NavigationContainer`	`_layout.tsx`
画面コンポーネント関数	`app/*.tsx` の default export

第1話で React Navigation を選んだのは、入門時に「画面」と「遷移」の API を 明示的に 学びやすいためです。実務では Expo Router が主流なので、第3話でファイルベースの読み方に広げます。

7. まとめ

実装の順番

Router 付きテンプレで app/ を確認する
_layout.tsx で Stack を定義する
index.tsx と detail.tsx で 2 画面を作る
Link で遷移する

読み解きの順番

画面の文言またはタイトルバーを選ぶ
app/ 内のファイルを特定する
必要なら _layout.tsx の Screen 定義を確認する
遷移は Link の href を辿る

ここまでできれば、複数画面のアプリを「ファイルから読む」土台ができています。

第1話: React Native 入門 — Expo で動かしながら、画面からコードを読む
第2話: useState で画面を動かす
第4話: フォーム入力とバリデーション — 入力値を state で追う

大規模プロジェクト向けのフォルダ整理は、別記事 Expoアプリのフォルダ構造を整理する方法も参照してください（シリーズ外・上級編）。