React Native と TypeScript 入門：Node.js・Expo 環境構築ガイド

2026年6月21日

Contents

1 開発環境の準備（Node.js とパッケージマネージャ）
- 1.1 Node.js とパッケージマネージャのインストール
  - 1.1.1 よくあるトラブルと対処法
2 Expo CLI で TypeScript テンプレートプロジェクトを作成
- 2.1 Expo CLI のインストール
- 2.2 TypeScript テンプレートからプロジェクト生成
  - 2.2.1 生成された主要ファイル
3 TypeScript 基本構文と React Native コンポーネントへの適用
4 状態管理とナビゲーションの型安全実装
- 4.1 useState / useReducer にジェネリクスを適用
- 4.2 React Navigation v7 の型付き Stack Navigator
5 デバッグ・ビルド・学習リソース
6 まとめ

スポンサードリンク

開発環境の準備（Node.js とパッケージマネージャ）

React Native と TypeScript は Node.js 20 系列以上 がインストールされていれば、追加設定なしで動作します。ここでは推奨するインストール手順とバージョン確認方法を解説し、環境に不整合が生じた場合の対処法も併せて紹介します。

Node.js とパッケージマネージャのインストール

macOS・Linux では Homebrew が最も手軽です。Windows の場合は公式サイトの MSI インストーラ、または nvm-windows を利用してください。

# macOS (Homebrew) – Node.js と npm を同時に取得
brew install node@20

# バージョン確認（どちらも 10 系以降がインストールされていることを推奨）
node -v    # =&gt; v20.x.x
npm -v     # =&gt; 10.x.x

# Yarn (任意) – npm 経由でグローバルインストール
npm install --global yarn
yarn -v    # =&gt; 4.x.x（2026 年時点の最新安定版）

# macOS (Homebrew) – Node.js と npm を同時に取得

brew install node@20

# バージョン確認（どちらも 10 系以降がインストールされていることを推奨）

node -v # => v20.x.x

npm -v # => 10.x.x

# Yarn (任意) – npm 経由でグローバルインストール

npm install --global yarn

yarn -v # => 4.x.x（2026 年時点の最新安定版）

よくあるトラブルと対処法

症状	原因例	解決策
`node` が見つからない	PATH に登録されていない	`export PATH="/opt/homebrew/opt/node@20/bin:$PATH"` をシェル設定に追記
npm のバージョンが古い	古い Node.js と同梱された npm が残存	`npm install -g npm@10` で上書きインストール
Yarn コマンドが未検出	グローバルパスがシェルに反映されていない	`export PATH="$(npm root -g)/.bin:$PATH"` を再読み込み

Expo CLI で TypeScript テンプレートプロジェクトを作成

Expo は 「CLI → 開発サーバ → デバイスプレビュー」 の一連のフローを自動化し、React Native のセットアップコストを大幅に削減します。以下では expo-cli のインストールから TypeScript テンプレートでプロジェクトを生成するまでを順番に示します。

Expo CLI のインストール

npm と Yarn のどちらでもインストール可能です。グローバルに一度だけ導入すれば、以降は任意のディレクトリで expo コマンドが利用できます。

# npm 推奨
npm install --global expo-cli

# Yarn 版（好みで選択）
yarn global add expo-cli

# 正常にインストールされたか確認
expo --version   # =&gt; 6.x.x（2026 年最新版） と表示されれば OK

# npm 推奨

npm install --global expo-cli

# Yarn 版（好みで選択）

yarn global add expo-cli

# 正常にインストールされたか確認

expo --version # => 6.x.x（2026 年最新版）と表示されれば OK

ポイント：expo-cli は頻繁にアップデートされるため、npm update -g expo-cli で定期的にバージョンを上げておくと新機能がすぐに使えます。

TypeScript テンプレートからプロジェクト生成

公式テンプレートは tsconfig.json や型付け済みの App.tsx があらかじめ用意されているため、「設定ミス」や「依存関係の抜け漏れ」を防げます。

# プロジェクト作成（myHelloWorld は任意の名前）
expo init --template expo-template-blank-typescript myHelloWorld

cd myHelloWorld
# パッケージマネージャは npm か Yarn を選択してください
npm install   # または `yarn`
npm run start # 開発サーバ起動 → QR コードが表示されます

# プロジェクト作成（myHelloWorld は任意の名前）

expo init --template expo-template-blank-typescript myHelloWorld

cd myHelloWorld

# パッケージマネージャは npm か Yarn を選択してください

npm install # または `yarn`

npm run start # 開発サーバ起動 → QR コードが表示されます

生成された主要ファイル

ファイル	内容
App.tsx	デフォルトで TypeScript が有効。React コンポーネントの雛形が記述されています。
tsconfig.json	Expo 推奨設定（`strict: true` など）が既に組み込まれ、IDE の補完が最大化されます。
package.json	`expo`, `react-native`, `typescript` が依存として列挙されています。

TypeScript 基本構文と React Native コンポーネントへの適用

型安全な UI を実装する鍵は、「props や state の形をインターフェースで明示」することです。この章では、よく使われる型表現と標準コンポーネントへの組み込み例を紹介します。

型注釈とインターフェース

interface を用いると、IDE が自動補完や未定義プロパティの警告を出してくれます。特に可変長のオブジェクトや省略可能な項目がある場合は ? で明示しましょう。

import React from 'react';
import { Text } from 'react-native';

interface GreetingProps {
  /** 表示する名前（必須） */
  name: string;
  /** 年齢は任意。未指定の場合は非表示にします */
  age?: number;
}

const Greeting: React.FC&lt;GreetingProps&gt; = ({ name, age }) =&gt; (
  &lt;Text&gt;
    Hello, {name}{age ? ` (${age}歳)` : ''}!
  &lt;/Text&gt;
);

import React from 'react';

import { Text } from 'react-native';

interface GreetingProps {

/** 表示する名前（必須） */

name: string;

/** 年齢は任意。未指定の場合は非表示にします */

age?: number;

}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => (

<Text>

Hello, {name}{age ? ` (${age}歳)` : ''}!

</Text>

);

ユニオン型・列挙型の活用例

状態やモードが限定的なケースでは、ユニオン型や enum が有効です。コンパイル時に網羅チェックが走り、予期しない文字列が渡されてもエラーになります。

// ユニオン型（文字列リテラルの集合）
type Theme = 'light' | 'dark';

// 列挙型（数値・文字列どちらでも可）
enum ButtonSize {
  Small = 'small',
  Medium = 'medium',
  Large = 'large',
}

interface ThemedButtonProps {
  theme: Theme;
  size: ButtonSize;
  label: string;
}

// ユニオン型（文字列リテラルの集合）

type Theme = 'light' | 'dark';

// 列挙型（数値・文字列どちらでも可）

enum ButtonSize {

Small = 'small',

Medium = 'medium',

Large = 'large',

}

interface ThemedButtonProps {

theme: Theme;

size: ButtonSize;

label: string;

}

標準コンポーネントへの型付き実装

React Native の View, Text, Image, ScrollView はすべて @types/react-native によって型情報が提供されます。追加の注釈は必要最小限に抑えるだけで、IDE が正確なプロパティ候補を提示します。

import React from 'react';
import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';

const HelloWorld: React.FC = () =&gt; (
  &lt;ScrollView contentContainerStyle={styles.container}&gt;
    &lt;View style={styles.box}&gt;
      &lt;Image
        source={{ uri: 'https://expo.dev/static/brand/logo.png' }}
        style={styles.logo}
      /&gt;
      &lt;Text style={styles.title}&gt;Hello World!&lt;/Text&gt;
    &lt;/View&gt;
  &lt;/ScrollView&gt;
);

const styles = StyleSheet.create({
  container: { padding: 16 },
  box: { alignItems: 'center' },
  logo: { width: 120, height: 120, marginBottom: 12 },
  title: { fontSize: 24 },
});

import React from 'react';

import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';

const HelloWorld: React.FC = () => (

<Image

source={{ uri: 'https://expo.dev/static/brand/logo.png' }}

style={styles.logo}

<Text style={styles.title}>Hello World!</Text>

</View>

</ScrollView>

);

const styles = StyleSheet.create({

container: { padding: 16 },

box: { alignItems: 'center' },

logo: { width: 120, height: 120, marginBottom: 12 },

title: { fontSize: 24 },

});

状態管理とナビゲーションの型安全実装

モバイルアプリでは ローカル状態 と 画面間パラメータ が頻繁にやり取りされます。ここでは useState／useReducer にジェネリクスを付与する方法と、React Navigation v7 の型付き Stack Navigator 設定手順を示します。

useState / useReducer にジェネリクスを適用

状態の型が自動推論できないケース（初期値が null や空配列の場合など）は、明示的に型パラメータ <T> を指定しましょう。これにより 「意図しない代入」や「未定義アクセス」 がコンパイル時に検出されます。

import React from 'react';

/* useState の例：数値カウンタ */
const [counter, setCounter] = React.useState&lt;number&gt;(0);

/* useReducer の例：複合アクション型 */
type CounterAction =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset'; payload: number };

function counterReducer(state: number, action: CounterAction): number {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    case 'reset':
      return action.payload;
    default:
      // 型チェックが漏れた場合にコンパイルエラーになる
      const _exhaustiveCheck: never = action;
      return state;
  }
}

const [count, dispatch] = React.useReducer(counterReducer, 0);

import React from 'react';

/* useState の例：数値カウンタ */

const [counter, setCounter] = React.useState<number>(0);

/* useReducer の例：複合アクション型 */

type CounterAction =

| { type: 'increment' }

| { type: 'decrement' }

| { type: 'reset'; payload: number };

function counterReducer(state: number, action: CounterAction): number {

switch (action.type) {

case 'increment':

return state + 1;

case 'decrement':

return state - 1;

case 'reset':

return action.payload;

default:

// 型チェックが漏れた場合にコンパイルエラーになる

const _exhaustiveCheck: never = action;

return state;

}

const [count, dispatch] = React.useReducer(counterReducer, 0);

React Navigation v7 の型付き Stack Navigator

@react-navigation/native-stack と @types/react-navigation（または付属の型定義）を組み合わせると、画面パラメータが正しく渡されているか をビルド時に検証できます。

# 必要なパッケージをインストール
npm install @react-navigation/native @react-navigation/native-stack
npm install --save-dev @types/react-native @types/react

# 必要なパッケージをインストール

npm install @react-navigation/native @react-navigation/native-stack

npm install --save-dev @types/react-native @types/react

// src/navigation/RootStack.tsx
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from '../screens/HomeScreen';
import DetailScreen, { DetailParams } from '../screens/DetailScreen';

export type RootStackParamList = {
  Home: undefined;
  Detail: DetailParams; // 別ファイルで定義した型
};

const Stack = createNativeStackNavigator&lt;RootStackParamList&gt;();

export default function RootStack() {
  return (
    &lt;Stack.Navigator initialRouteName=&quot;Home&quot;&gt;
      &lt;Stack.Screen name=&quot;Home&quot; component={HomeScreen} /&gt;
      &lt;Stack.Screen name=&quot;Detail&quot; component={DetailScreen} /&gt;
    &lt;/Stack.Navigator&gt;
  );
}

// src/navigation/RootStack.tsx

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

import HomeScreen from '../screens/HomeScreen';

import DetailScreen, { DetailParams } from '../screens/DetailScreen';

export type RootStackParamList = {

Home: undefined;

Detail: DetailParams; // 別ファイルで定義した型

};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function RootStack() {

return (

<Stack.Navigator initialRouteName="Home">

<Stack.Screen name="Home" component={HomeScreen} />

<Stack.Screen name="Detail" component={DetailScreen} />

</Stack.Navigator>

);

}

DetailScreen 側で受け取るパラメータは次のように型定義します。

// src/screens/DetailScreen.tsx
export type DetailParams = {
  id: string;
  title?: string;
};

type Props = NativeStackScreenProps&lt;RootStackParamList, 'Detail'&gt;;

const DetailScreen: React.FC&lt;Props&gt; = ({ route }) =&gt; (
  &lt;Text&gt;{`ID: ${route.params.id}`}&lt;/Text&gt;
);

// src/screens/DetailScreen.tsx

export type DetailParams = {

id: string;

title?: string;

};

type Props = NativeStackScreenProps<RootStackParamList, 'Detail'>;

const DetailScreen: React.FC<Props> = ({ route }) => (

<Text>{`ID: ${route.params.id}`}</Text>

);

この構成により、画面遷移時のパラメータミスがコンパイルエラーで即座に分かるため、実機テストの手間が大幅に削減されます。

デバッグ・ビルド・学習リソース

開発サイクルを高速化するには、リアルタイムプレビュー と 自動整形・検証ツール を組み合わせることが重要です。また、本格的な配布の前段階としてクラウドビルドサービス（EAS）を利用すればローカル環境に依存しない安定したバイナリ生成が可能です。

Expo Go と VSCode 拡張機能でのデバッグ

Expo Go が提供する QR コードスキャンだけで即座にアプリがスマホ上で動作します。VSCode では以下の拡張を入れると、コード品質・型安全・自動整形 がシームレスに行われます。

拡張機能	主な役割
ESLint	コーディング規約違反や潜在バグを検出
Prettier	行幅・インデントなどのコードフォーマットを統一
vscode-react-native	デバッグ実行、ブレークポイント設定が可能
TypeScript Hero (任意)	インポート自動整理と型情報の高速検索

作業フロー例

ターミナルで npm run start → Expo 開発サーバ起動
スマホにインストール済みの Expo Go アプリで QR コードをスキャン
VSCode でコードを編集すると、保存時に ESLint と Prettier が自動適用され、エラーは即座に Problems タブに表示

EAS ビルドによる iOS / Android 配布

2026 年現在、Expo のローカルビルドコマンド expo build:* は非推奨です。代わりに EAS (Expo Application Services) CLI を用いると、Apple Developer アカウントや Google Play Console が不要でもクラウド上でビルドが完了します。

# EAS CLI のインストール（グローバル）
npm install -g eas-cli

# 初回だけログイン・プロジェクト紐付け
eas login
eas init   # eas.json が自動生成されます

# iOS ビルド（Apple Developer アカウントが必要な場合は指示に従う）
eas build --platform ios

# Android ビルド
eas build --platform android

# EAS CLI のインストール（グローバル）

npm install -g eas-cli

# 初回だけログイン・プロジェクト紐付け

eas login

eas init # eas.json が自動生成されます

# iOS ビルド（Apple Developer アカウントが必要な場合は指示に従う）

eas build --platform ios

# Android ビルド

eas build --platform android

ビルド完了後は Expo のダッシュボードから .ipa と .aab がダウンロードでき、TestFlight や Google Play Internal Test にアップロードすればベータテストが開始できます。

ビルド設定のポイント

eas.json の production プロファイルに autoIncrement: true を入れるとビルド番号が自動で上がります。
iOS では App Store Connect に登録済みの Bundle Identifier が必要です。Android は package name が一致していれば問題ありません。

推奨学習リソースと情報収集方法

技術は日進月歩なので、公式ドキュメントと活発なコミュニティ を定期的にチェックすることが最も効率的です。

リソース	内容・特徴
React Native 公式サイト	API 変更や新機能のリリースノートが随時掲載
Expo Docs	EAS、Config Plugins、TypeScript テンプレートなど実装ガイドが充実
monotein – 「【2026年版】TypeScript入門完全ガイド」	基礎から高度な型テクニックまで網羅的に解説
Qiita「React Native 開発で必須となるツールと知識」	実務で直面しやすいトラブルとその回避策がまとめられている
Discord / Slack の React Native コミュニティ	最新パッケージのバグ情報やベストプラクティスがリアルタイムに共有

実践的な学習法：毎週 1 回は公式リリースノートを目を通し、気になる変更点は小さなサンプルプロジェクトで検証する。疑問が出たら上記コミュニティで質問すると、同様の課題に直面した開発者から具体的な助言が得られやすいです。

まとめ

Node.js 20 系列以上 + npm (10系) / Yarn をインストールし、バージョンを確認しておく。
Expo CLI で TypeScript テンプレート (expo-template-blank-typescript) を使用すれば、設定済みの開発環境が瞬時に構築できる。
interface・ユニオン型・enum などの基本構文を活用し、props と state に厳密な型付けを施すことで IDE 補完とコンパイルチェックが最大化する。
useState / useReducer のジェネリクス と React Navigation v7 の型付き Stack Navigator で、状態管理・画面遷移の安全性を担保。
Expo Go + VSCode 拡張 によるリアルタイムデバッグと、EAS ビルド によるクラウドビルドで、ローカル環境に依存しない高速な開発フローが実現できる。
公式ドキュメント・信頼できる技術ブログ・コミュニティを定期的にフォローし、2026 年以降も最新情報をキャッチアップする。

以上の手順とベストプラクティスに沿ってプロジェクトを進めれば、「React Native + TypeScript」 の開発が格段に楽になり、保守性・拡張性の高いモバイルアプリを迅速にリリースできます。ぜひ本ガイドを手元に置き、実装時の指針として活用してください。

スポンサードリンク

-ReactNative

comment コメントをキャンセル

: ReactNative

2024 React Native テンプレート構築ガイド | Expo & EAS Build

2024年のReact Nativeテンプレート構築方法を解説。Node.js導入からEAS Buildによるビルドフロー自動化まで、最新ツールchainでの開発効率向上術を紹介。

2024年Rust Webフレームワーク比較: Axum vs Actix Web

2024 React Native テンプレート構築ガイド | Expo & EAS Build