React Native 入門 - Expo で動かしながら、画面からコードを読む

AI やテンプレートで React Native アプリを始めると、最初にファイルがたくさん出てきて止まりやすいです。app/、components/、screens/…… 全部を上から読もうとすると、どこが入口か分からなくなります。

本記事では、画面に出ている文言からコードを辿る読み方と、Expo で最小構成のアプリを動かす手順をセットで扱います。codewith シリーズ第1話として、「動かす」と「読む」の両方の土台を作ります。

この記事で扱うこと

章	実装（A）	読み解き（B）
環境構築	Expo でプロジェクト作成・起動	起動後に最初に開くファイルの目安
コンポーネント	View / Text / Pressable	画面上の文言をエディタで検索する
StyleSheet	レイアウトとスタイル	見た目と styles の対応を辿る
Navigation	Stack で Home / Detail	タイトルバーと Stack.Screen の対応
まとめ	次に進む順番	第2話・第3話への導線

1. 環境構築

Bun を入れたうえで、Expo ベースのプロジェクトを作ります。Expo は初期セットアップが短く、QR コードで実機確認しやすいため、入門ではこちらから始めることが多いです。

# プロジェクト作成
bunx create-expo-app@latest MyFirstApp

# 開発サーバー起動
cd MyFirstApp
bunx expo start

expo start のあと、ターミナルに QR コードが出ます。スマホの Expo Go で読み取れば実機プレビューできます。エミュレータなら i（iOS）または a（Android）でも起動できます。

つまずきやすい点

• Bun のバージョンが古いと依存解決で失敗しやすい
• 実機と PC が同じ Wi-Fi にいないと接続できないことがある
• 初回ビルドはキャッシュ生成で時間がかかる

読み解きの練習：最初に開くファイル

起動して画面が表示されたら、エディタで次の順に開いてみてください。

1. エントリ付近（Expo テンプレートなら App.tsx や app/_layout.tsx など、プロジェクト構成によります）
2. いま画面に出ている文言を 全文検索（例: Welcome や Open up App.tsx）
3. ヒットしたファイルが「いま見ている画面」の起点であることが多い

ここでのポイントは、フォルダ一覧を丸ごと理解しようとしないことです。画面に出ている言葉が、どのファイルに書いてあるか を先に特定します。

2. コンポーネントの基本

React Native では HTML の代わりに View や Text などのコンポーネントを使います。Web の div / span に近いイメージです。

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

export function HelloCard() {
  return (
    <View>
      <Text>Hello, React Native</Text>
      <Pressable onPress={() => console.log("pressed")}>
        <Text>タップ</Text>
      </Pressable>
    </View>
  );
}

Text の外に生の文字列を置くと表示されないため、文言は必ず Text で包みます。Pressable はタップ可能な領域です。

読み解きの練習：文言から部品を辿る

1. 画面上の Hello, React Native をエディタで検索する
2. ヒット箇所の <Text>...</Text> を確認する
3. その外側の <View> がレイアウトの塊であることを確認する
4. タップ という文言から <Pressable> を辿る

この順番が、後の AI 生成コードを読むときの基本型になります。

画面に見えるもの	コード上の部品
文字	Text
ブロックのまとまり	View
タップできる領域	Pressable

3. StyleSheet でレイアウトする

CSS ファイルではなく、StyleSheet.create でスタイルを定義します。Flexbox が基本なので、Web の Flex 経験があると入りやすいです。

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

export function ProfileCard() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>プロフィール</Text>
      <Text style={styles.body}>React Native 学習中</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: "#f8fafc",
    gap: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: "600",
    color: "#0f172a",
  },
  body: {
    fontSize: 14,
    color: "#334155",
  },
});

style={styles.title} のように、見た目は スタイル名 経由で部品に紐づきます。

読み解きの練習：見た目と style を対応させる

1. プロフィール の文字サイズを変えて保存し、ホットリロードで反映を確認する
2. styles.title の fontSize を変更したらタイトルだけ変わることを確認する
3. styles.card の backgroundColor を変えればカード全体の背景が変わることを確認する

「大きい文字」「背景色」「余白」は、画面の印象を作る部品です。デザイン調整で迷ったら、いま目に入っている要素の文言 から style を辿ると早いです。

4. Navigation を追加する

画面が増えると React Navigation で遷移を管理するのが一般的です。最小構成では Stack Navigator を 1 つ置き、Home と Detail の 2 画面から始めます。

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Text, View } from "react-native";

const Stack = createNativeStackNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
}

function DetailScreen() {
  return (
    <View>
      <Text>Detail</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: "ホーム" }}
        />
        <Stack.Screen
          name="Detail"
          component={DetailScreen}
          options={{ title: "詳細" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

依存関係を足すときは、Expo SDK と React Navigation の対応表を先に確認するとビルドエラーを減らせます。

読み解きの練習：タイトルバーと Screen を対応させる

1. 画面上部の ホーム というタイトルを確認する
2. options={{ title: "ホーム" }} が付いている Stack.Screen を探す
3. component={HomeScreen} から HomeScreen 関数の中身（Home という Text）を辿る

画面遷移で迷ったときも、タイトルバーの文言 → Stack.Screen → コンポーネント関数 の順が使えます。

5. まとめ

React Native 入門では、次の 2 本柱をセットで覚えるとつまずきにくいです。

実装の順番

1. Expo で起動確認まで到達する
2. 1 画面の UI を View / Text / StyleSheet で組み立てる
3. Pressable で操作を足す
4. Navigation で画面を分ける

読み解きの順番

1. 画面に出ている文言を選ぶ
2. エディタで全文検索し、ファイルと行を特定する
3. その周辺の部品（コンポーネント / スタイル / 画面定義）を辿る

ここまでできれば、次はアプリの本題に入れます。

• 第2話: useState で画面を動かす — ボタン操作で変わる値を、同じ読み方で追う
• 第3話: Expo Router 入門 — フォルダ構成から画面を読む