Stack Navigatorとは何か、React Nativeにおけるスタックナビゲーション

Stack Navigatorとは？

Stack Navigator — 画面のスタックモデルを実装するReact Navigationライブラリの基本的なナビゲーターの1つです。モバイルユーザーにとっておなじみのナビゲーションを提供します。新しい画面を開くと右にスライドするアニメーションが伴い、「戻る」ボタンまたはスワイプジェスチャーで前の画面に戻ります。Stack NavigatorはiOSとAndroidをサポートし、最大のパフォーマンスのためにプラットフォームのネイティブコンポーネントを使用します。

React NavigationはReact Nativeで最も人気のあるナビゲーションライブラリであり、プロジェクトの85%にインストールされています（npmデータ、2026年）。Stack Navigatorはそのコアの一部であり、2つの実装で利用可能です：createNativeStackNavigator（ネイティブ、推奨）とcreateStackNavigator（JavaScript、複雑なカスタムアニメーション用）。ネイティブバージョンはReact Navigation v5で登場し、v6+で標準になりました。

Stack Navigatorの主な利点 — iOSとAndroidユーザーにとって自然で親しみやすい動作です。iOSではスタックはUINavigationControllerによって視覚的に表現され、Androidではスライドアニメーション付きのFragmentManagerによって表現されます。開発者はスタックロジックを手動で実装する必要はありません。ナビゲーターが画面の状態、バックスタック、アニメーションを自動的に管理します。

スタックナビゲーションの仕組み

スタックナビゲーションはLIFO（Last In, First Out）の原則に基づいています。ユーザーが新しい画面を開くと、ナビゲーターはそれをスタックの一番上に配置します。「戻る」を押すと、上部の画面が削除され、ユーザーは前の画面を表示します。スタックは任意の数の画面を含めることができます。唯一の制限はデバイスのメモリです。

スタック内の各画面はその状態を保持します。前の画面に戻ると、その状態は自動的に復元されます。これにより、スタックは他のナビゲーションタイプ（Tab、Drawer）と区別されます。他のタイプでは画面が再作成される可能性があります。React Navigationは独自のナビゲーションコンテキストメカニズムを介して状態を管理します。

戻るためのスワイプジェスチャー

iOSでは、Stack Navigatorは左端からのスワイプジェスチャーによる戻りをサポートしています。これはユーザーが期待する標準的なiOSの動作です。Androidでは、ジェスチャーはデフォルトで無効になっていますが、gestureEnabledオプションで有効にできます。Native Stackでは、ジェスチャーはJavaScriptスレッドの遅延なしにネイティブで動作します。

Native Stack vs JS Stack

React Navigationは2種類のStack Navigatorを提供しています。Native Stack（createNativeStackNavigator）とJS Stack（createStackNavigator）です。主な違いはアニメーションの実行場所です。Native StackはiOSとAndroidのネイティブアニメーションドライバーを使用するのに対し、JS StackはReact NativeのJavaScriptスレッドを介して動作します。どちらを選ぶかは、パフォーマンスとカスタマイズの要件によって決まります。

Native Stackはほとんどのプロジェクトで推奨されています。JSスレッドをブロックせずにスムーズな60 FPSアニメーションを提供し、iOSでシステムのスワイプバックジェスチャーをサポートし、ネイティブトランジション（iOSではslide、Androidではfade）を使用します。ただし、Native Stackはアニメーションのカスタマイズに制限があり、事前定義されたトランジションセットのみが利用可能です。

JS StackはcardStyleInterpolatorを介してアニメーションを完全に制御できます。開発者はスケーリング、回転、パララックス、カスタムカーブなど、あらゆるアニメーションを作成できます。欠点は、アニメーションがJSスレッドで実行されるため、複雑なトランジションでは弱いデバイスでフレームドロップが発生する可能性があることです。70%のプロジェクトでは、Native Stackで十分です。

// Native Stack — 推奨される実装
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

Stack Navigatorのインストールと設定

Stack Navigatorを使い始めるには、React Navigationとその依存関係をインストールする必要があります。最小セットには@react-navigation/native、@react-navigation/native-stack、react-native-screensが含まれます。インストール後、アプリケーションはNavigationContainerでラップされます。これはすべての子コンポーネントにナビゲーション状態を提供するコンテキストです。

# React Navigationの依存関係のインストール
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# iOSの場合 — podのインストール
cd ios && pod install && cd ..

インストール後、Stack.NavigatorがRootStackParamListで定義された特定の画面とともに作成されます。各画面はcomponent propを介してReactコンポーネントにリンクされます。ナビゲーターはルートにも、別のナビゲーター（Tab、Drawer）にネストすることもできます。設定にはscreenOptionsが使用されます。すべての画面に共通のものか、各画面に個別のものを使用します。

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'ホーム' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Stack Navigatorのパラメータとカスタマイズ

Stack Navigatorは外観と動作をカスタマイズするための多くのオプションを提供します。主要なパラメータはNavigatorレベルのscreenOptionsまたはScreenレベルのoptionsで設定します。開発者はヘッダー、トランジションアニメーション、スワイプジェスチャー、カードスタイル、背景の暗転を設定できます。設定の柔軟性により、ナビゲーションをアプリケーションのデザインシステムに適応させることができます。

cardStyleInterpolatorによるカスタムアニメーション

JS Stackでは、cardStyleInterpolatorを使用して画面間の任意のトランジションアニメーションを作成できます。これは、スケーリング、回転、パララックス、水平フリップなど、独自の視覚効果を実装するための強力なツールです。関数はアニメーションの進行値（current、next）を受け取り、アニメーション対象の要素のスタイルを返します。

TypeScriptによるナビゲーションの型付け

Stack NavigatorはTypeScriptを介した完全な型付けをサポートしています。これを行うには、RootStackParamList — キーが画面名で値がパラメータ型であるオブジェクト型を定義します。型付け後、navigation.navigateとroute.paramsはオートコンプリートと型チェックを取得します。これにより、コンパイル時のパラメータ渡しエラーが排除されます。

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// 型付けされた画面
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>商品 {id} — {category}</Text>
      <Button title="カートに追加"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

高度なシナリオ：モーダルウィンドウとグループ

Stack Navigatorは画面のグループ化とモーダルウィンドウをサポートしています。グループ（Screen Group）を使用すると、重複なく複数の画面に共通の設定を適用できます。モーダルウィンドウはstack presentation: 'modal'によって実装されます。画面が下から背景の暗転とともに開き、iOSのシステムモーダルのようです。このオプションはNative Stackでのみ利用可能です。

複雑なナビゲーションの場合、Stack NavigatorはTab NavigatorまたはDrawer Navigatorにネストできます。例えば、「ホーム」タブには独自の画面スタックがあり、「プロフィール」タブにも独自のものがあります。このナビゲーターの構成は、プロダクションアプリケーションの標準的なアプローチです。各スタックは分離されており、タブ内のバックスタックは他のタブに影響しません。

// Tab Navigator内のネストされたスタック
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// 共有オプションを持つ画面グループ
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>