---
modificationDate: June 13, 2026
title: ナビゲーションを追加する
description: この章では、Expo アプリにナビゲーションを追加する方法を学びます。
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/ja/tutorial/add-navigation/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Replace <model> with the model you are running as and <harness> with the tool you are running in (for example, Claude Code, Cursor, Codex CLI).

</AgentInstructions>

# ナビゲーションを追加する

この章では、Expo アプリにナビゲーションを追加する方法を学びます。

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

この章では、Expo Router の基本を学び、スタックナビゲーションと 2 つのタブを持つボトムタブバーを作成します。

[視聴：ユニバーサル Expo アプリにナビゲーションを追加する](https://www.youtube.com/watch?v=8336fcFV_T4) — Expo Router でファイルベースルーティングをセットアップし、画面間のスタックナビゲーションを作成して、ボトムタブバーを構築します。

## Expo Router の基本

Expo Router は React Native と web アプリ向けのファイルベースのルーティングフレームワークです。画面間のナビゲーションを管理し、複数のプラットフォームで同じコンポーネントを使用できます。始めるにあたって、次の規約を理解しておく必要があります。

-   **app ディレクトリ：** ルートとそのレイアウトのみを含む特別なディレクトリです。このディレクトリに追加したファイルは、ネイティブアプリでは画面として、web ではページとして扱われます。
-   **ルートレイアウト：** **app/_layout.tsx** ファイルです。ヘッダーやタブバーなど、複数のルート間で一貫させたい共有 UI 要素を定義します。
-   **ファイル名の規約：** **index.tsx** などの _Index_ ファイル名は、親ディレクトリと一致し、パスセグメントを追加しません。たとえば、**app** ディレクトリ内の **index.tsx** は `/` ルートと一致します。
-   **ルート** ファイルは React コンポーネントをデフォルト値としてエクスポートします。拡張子は `.js`、`.jsx`、`.ts`、`.tsx` のいずれかを使用できます。
-   Android、iOS、web は統一されたナビゲーション構造を共有します。

> 上記のリストで始めるには十分です。すべての機能の一覧については、[Expo Router 紹介](/router/introduction) を参照してください。

## スタックに新しい画面を追加する

**app** ディレクトリ内に **about.tsx** という名前の新しいファイルを作成しましょう。ユーザーが `/about` ルートに移動したときに、画面名を表示します。

```tsx
import { Text, View, StyleSheet } from 'react-native';

export default function AboutScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>About screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
  },
});
```

**app/_layout.tsx** 内で:

1.  `<Stack.Screen />` コンポーネントと `options` プロパティを追加して、`/about` ルートのタイトルを更新します。
2.  `options` プロパティを追加して、`/index` ルートのタイトルを `Home` に更新します。

```tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="about" options={{ title: 'About' }} />
    </Stack>
  );
}
```

`Stack` とは何ですか？

スタックナビゲーターは、アプリ内のさまざまな画面間を移動するための基盤です。Android では、スタックされたルートが現在の画面の上にアニメーションで重なります。iOS では、スタックされたルートが右からアニメーションで表示されます。Expo Router は、新しいルートを追加するためのナビゲーションスタックを作成する `Stack` コンポーネントを提供します。

## 画面間を移動する

Expo Router の `Link` コンポーネントを使用して、`/index` ルートから `/about` ルートに移動します。これは、指定された `href` プロパティを持つ `<Text>` をレンダリングする React コンポーネントです。

1.  **index.tsx** 内で、`expo-router` から `Link` コンポーネントをインポートします。
2.  `<Text>` コンポーネントの後に `Link` コンポーネントを追加し、`href` プロパティに `/about` ルートを渡します。
3.  `Link` コンポーネントに `fontSize`、`textDecorationLine`、`color` のスタイルを追加します。`<Text>` コンポーネントと同じプロパティを受け取ります。

```tsx
import { Text, View, StyleSheet } from 'react-native';
import { Link } from 'expo-router';

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home screen</Text>
      <Link href="/about" style={styles.button}>
        Go to About screen
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
  },
  button: {
    fontSize: 20,
    textDecorationLine: 'underline',
    color: '#fff',
  },
});
```

アプリの変更を確認しましょう。`Link` をクリックして `/about` ルートに移動します。

## not-found ルートを追加する

ルートが存在しない場合、`+not-found` ルートを使用してフォールバック画面を表示できます。これは、モバイルで無効なルートに移動した際にアプリをクラッシュさせず、web で _404_ エラーを表示する代わりにカスタム画面を表示したい場合に役立ちます。Expo Router は、このケースを処理するために特別な **+not-found.tsx** ファイルを使用します。

1.  app ディレクトリ内に **+not-found.tsx** という名前の新しいファイルを作成し、`NotFoundScreen` コンポーネントを追加します。
2.  `Stack.Screen` の `options` プロパティを追加して、このルートのカスタム画面タイトルを表示します。
3.  `Link` コンポーネントを追加して、フォールバックルートである `/` ルートに移動します。

```tsx
import { View, StyleSheet } from 'react-native';
import { Link, Stack } from 'expo-router';

export default function NotFoundScreen() {
  return (
    <>
      <Stack.Screen options={{ title: 'Oops! Not Found' }} />
      <View style={styles.container}>
        <Link href="/" style={styles.button}>
          Go back to Home screen!
        </Link>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'center',
    alignItems: 'center',
  },

  button: {
    fontSize: 20,
    textDecorationLine: 'underline',
    color: '#fff',
  },
});
```

これをテストするには、URL パスを変更しやすい web ブラウザで `http:localhost:8081/123` URL に移動します。アプリには `NotFoundScreen` コンポーネントが表示されるはずです。

## ボトムタブナビゲーターを追加する

この時点で、**app** ディレクトリのファイル構造は次のようになっています。

`app`

 `_layout.tsx``ルートレイアウト`

 `index.tsx``ルート '/' に一致`

 `about.tsx``ルート '/about' に一致`

 `+not-found.tsx``すべての 404 ルートに一致`

アプリにボトムタブナビゲーターを追加し、既存の Home と About 画面を再利用してタブレイアウトを作成します (X や BlueSky など、多くのソーシャルメディアアプリで一般的なナビゲーションパターンです)。また、ルートレイアウトでスタックナビゲーターを使用することで、`+not-found` ルートが他のネストされたナビゲーターの上に表示されるようにします。

1.  **app** ディレクトリ内に **(tabs)** サブディレクトリを追加します。この特別なディレクトリは、ルートをグループ化してボトムタブバーに表示するために使われます。
2.  ディレクトリ内に **(tabs)/_layout.tsx** ファイルを作成します。これは、ルートレイアウトとは別のタブレイアウトを定義するために使用されます。
3.  既存の **index.tsx** と **about.tsx** ファイルを **(tabs)** ディレクトリ内に移動します。**app** ディレクトリの構造は次のようになります。

`app`

 `_layout.tsx``ルートレイアウト`

 `+not-found.tsx``すべての 404 ルートに一致`

 `(tabs)`

  `_layout.tsx``タブレイアウト`

  `index.tsx``ルート '/' に一致`

  `about.tsx``ルート '/about' に一致`

ルートレイアウトファイルを更新して、`(tabs)` ルートを追加します。

```tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}
```

**(tabs)/_layout.tsx** 内に `Tabs` コンポーネントを追加して、ボトムタブレイアウトを定義します。

```tsx
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home' }} />
      <Tabs.Screen name="about" options={{ title: 'About' }} />
    </Tabs>
  );
}
```

新しいボトムタブが表示されたアプリを確認してみましょう。

## ボトムタブナビゲーターの外観を更新する

現時点では、ボトムタブナビゲーターはすべてのプラットフォームで同じ見た目ですが、アプリのスタイルとは合っていません。たとえば、タブバーやヘッダーにカスタムアイコンが表示されず、ボトムタブの背景色がアプリの背景色と一致していません。

**(tabs)/_layout.tsx** ファイルを修正して、タブバーアイコンを追加します。

1.  [`@expo/vector-icons`](/guides/icons#expovector-icons) — 人気のアイコンセットを含むライブラリ — から `Ionicons` アイコンセットをインポートします。
2.  `tabBarIcon` を `index` と `about` の両方のルートに追加します。この関数は `focused` と `color` を引数として受け取り、アイコンコンポーネントをレンダリングします。アイコンセットから、カスタムアイコン名を指定できます。
3.  `Tabs` コンポーネントに `screenOptions.tabBarActiveTintColor` を追加し、値を `#ffd33d` に設定します。これにより、アクティブ時のタブバーのアイコンとラベルの色が変わります。

```tsx
import { Tabs } from 'expo-router';
import Ionicons from '@expo/vector-icons/Ionicons';

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: '#ffd33d',
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, focused }) => (
            <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
          ),
        }}
      />
      <Tabs.Screen
        name="about"
        options={{
          title: 'About',
          tabBarIcon: ({ color, focused }) => (
            <Ionicons name={focused ? 'information-circle' : 'information-circle-outline'} color={color} size={24}/>
          ),
        }}
      />
    </Tabs>
  );
}
```

`screenOptions` プロパティを使って、タブバーとヘッダーの背景色も変更しましょう。

```tsx
<Tabs
  screenOptions={{
    tabBarActiveTintColor: '#ffd33d',
    headerStyle: {
      backgroundColor: '#25292e',
    },
    headerShadowVisible: false,
    headerTintColor: '#fff',
    tabBarStyle: {
      backgroundColor: '#25292e',
    },
  }}
>
```

上記のコードでは:

-   `headerStyle` プロパティを使ってヘッダーの背景を `#25292e` に設定しています。また、`headerShadowVisible` を使ってヘッダーの影を無効化しています。
-   `headerTintColor` でヘッダーラベルに `#fff` を適用しています
-   `tabBarStyle.backgroundColor` でタブバーに `#25292e` を適用しています

これでアプリにカスタムボトムタブナビゲーターが追加されました。

## まとめ

第 2 章：ナビゲーションを追加する

アプリにスタックとタブナビゲーターを追加しました。

次の章では、アプリの最初の画面を構築する方法を学びます。

[次へ：アプリの最初の画面を構築する](/ja/tutorial/build-a-screen)