Contents
前提環境の確認とセットアップ
React Native + TypeScript の開発をスムーズに開始するには、ローカルマシンに 正しいバージョン が揃っていることが最も重要です。このセクションでは、Node.js・npm/yarn・Xcode・Android Studio といった必須ツールのインストール手順と、実際に動作確認を行うためのコマンド例を示します。全体像を把握した上で各項目を順番にチェックすれば、環境依存エラーの発生率が大幅に低減します。
Node.js 20 系列以上・npm/yarn のインストールとバージョン確認
Node.js 20 は 2023年10月に LTS が開始 したバージョンで、React Native CLI と Expo が公式に推奨する最低要件です。LTS が開始された年度を正しく認識しておくことで、古いドキュメントによる誤情報を防げます。
- 公式サイトからインストーラを取得
-
https://nodejs.org/ja/ で「LTS」ラベルが付いた 64‑bit インストーラ（macOS または Windows）をダウンロードします。
-
インストール後にバージョンを確認
|
1 2 3 4 5 6 7 |
# Node のバージョン確認 node -v # → v20.x.x が表示されれば OK # npm（または yarn）のバージョン確認 npm -v # → 10.x 系以上が推奨 yarn -v # → 1.22 系以上（使用する場合） |
ポイント
-nvm（Node Version Manager）を併用すると、複数バージョンの切り替えがシームレスに行えます。
- npm は Node 本体に同梱されるため、個別アップデートは基本的に不要です。
macOS: Xcode、Windows/macOS: Android Studio のインストール手順
macOS – Xcode（iOS 開発）
Xcode は iOS シミュレータやビルドツールを提供する必須環境です。以下の手順でインストールと動作確認を行います。
- Mac App Store から最新版 Xcode をダウンロード
- CLI ツールが有効か確認
|
1 2 |
xcodebuild -version # → Xcode 15.x が表示されれば OK |
- 必要に応じてデフォルトの開発者ディレクトリを設定
|
1 2 |
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer |
Windows/macOS – Android Studio（Android 開発）
Android Studio は SDK・エミュレータ・ビルドツールを一括管理できる公式 IDE です。
- 公式サイトからインストーラを取得
https://developer.android.com/studio -
SDK コンポーネントの確認
-
Android SDK Platform‑Tools -
Android SDK Build‑Tools (33.x 系列) -
環境変数を設定し、adb が認識できるかテスト
|
1 2 3 4 5 |
export ANDROID_HOME=$HOME/Library/Android/sdk # macOS の例 # Windows ではシステム環境変数に同等のパスを登録 adb version # → Android Debug Bridge version 1.0.41 以上が表示されれば OK |
ポイント
- macOS でも Android 開発を行う場合は、Android Studio のインストールとadbパスの通し忘れに注意してください。
- 両方の IDE が揃っていれば、物理端末・シミュレータ・エミュレータすべてでテストが可能です。
プロジェクト作成コマンド比較
Expo と純粋な React Native CLI はそれぞれ異なる開発体験とカスタマイズ性を提供します。この章では、TypeScript テンプレート付きの代表的コマンド を比較し、プロジェクト規模やチーム方針に合わせた選択指標を示します。
npx create-expo-app MyApp --template expo-template-blank-typescript の特徴とメリット
Expo は「設定不要で即開発」をコンセプトにしたフレームワークです。以下の表は、Managed Workflow をベースにした場合の主な特長をまとめたものです。
| 項目 | 内容 |
|---|---|
| セットアップ時間 | 1〜2 分で完了（依存パッケージ自動インストール） |
| 開発サーバー | expo start → QR コードで Expo Go に即時接続 |
| ビルド方式 | EAS Build が標準。iOS/Android のネイティブコードは抽象化され、CI/CD が容易 |
| 拡張性 | 必要に応じて「bare workflow」へ移行でき、カスタムネイティブモジュールも追加可 |
| 適したケース | プロトタイピング、社内ツール、非エンジニアが多いチーム |
結論
Expo は開発速度を最優先するプロジェクトに向いており、後からネイティブコードを差し込む柔軟性も備えています。
npx react-native init MyApp --template react-native-template-typescript の特徴と選択基準
React Native CLI は「フルコントロール」型のアプローチです。以下はネイティブコードへの直接アクセスが必要なケースに適したポイントです。
| 項目 | 内容 |
|---|---|
| セットアップ時間 | 3〜5 分（iOS/Android のネイティブ依存関係解決を含む） |
| 開発サーバー | npx react-native start（Metro） |
| ビルド方式 | Xcode / Android Studio で直接ビルド。カスタムネイティブモジュール追加が容易 |
| 拡張性 | Objective‑C、Swift、Java、Kotlin のコードを自由に組み込める |
| 適したケース | 大規模アプリ、パフォーマンス重視、独自ネイティブ機能が必須のプロジェクト |
結論
ネイティブ側への深い介入が求められる場合は CLI が唯一無二の選択肢です。
Expo + Vite + Tailwind CSS の統合手順
2026 年版スタックで注目されている Expo + Vite + Tailwind の組み合わせは、開発効率と UI カスタマイズ性を同時に高めます。ただし、単なる Web 用 PostCSS 設定だけでは React Native（Expo）上で機能しません。ここでは nativewind を用いた Tailwind の実装方法、Vite と Expo の連携プラグイン設定、さらに expo-router との併用例を順に解説します。
Vite 環境構築とプラグイン設定
まずは Vite 本体と React 用プラグイン、そして Expo 向けのエイリアスやポート競合回避策を整備します。
- Vite と公式 React プラグインをインストール
|
1 2 3 |
cd MyApp npm install -D vite @vitejs/plugin-react |
- Expo 用プラグイン（
vite-plugin-expo）と Router 用ユーティリティを追加
|
1 2 |
npm install -D vite-plugin-expo @expo/router |
vite.config.tsの雛形
以下の設定は、Metro が使用するポート 8081 と競合しないように Vite 側で3000を固定し、Expo のモジュール解決に合わせたエイリアスを定義しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import expo from 'vite-plugin-expo'; export default defineConfig({ plugins: [ react(), // Expo 用プラグイン：JSX の変換や asset 解決を自動化 expo(), ], resolve: { alias: { '@/components': '/src/components', '@/assets': '/src/assets', '@expo/router': '@expo/router', // expo-router の型解決用 }, }, server: { port: 3000, // Metro と被らないポート番号 strictPort: true, // HMR が正しく機能するようにホスト設定を明示（特に物理端末でデバッグ時） host: true, }, }); |
package.jsonにスクリプトを追加
|
1 2 3 4 5 6 7 8 9 |
{ "scripts": { "dev": "vite", // Vite の HMR サーバー起動 "start": "expo start", // Expo 開発サーバー（QR コード表示） "android": "expo run:android", "ios": "expo run:ios" } } |
ポイント
-vite-plugin-expoは内部でbabel-preset-expoを呼び出し、JSX/TSX の変換を Metro と同等に扱います。これにより Vite の高速 HMR が React Native コンポーネントでも有効になります。
- さらにexpo-router用のエイリアスを設定しておくと、ページベースのルーティングが Vite のビルド対象に正しく含まれます。
React Native 用 Tailwind（nativewind）の導入
Web 向け PostCSS 設定だけでは Expo アプリ上で Tailwind クラスが解釈されません。React Native 版 Tailwind ライブラリとして広く採用されている nativewind を利用します。
- パッケージをインストール
|
1 2 3 4 |
npm install nativewind # 必要に応じて型定義も取得 npm install -D @types/react-native |
tailwind.config.cjsの設定
content配列に React Native の JSX/TSX ファイルと、Expo Router が生成するページコンポーネントを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./App.{js,tsx}", "./src/**/*.{js,jsx,ts,tsx}", // expo-router が自動生成するページ "./node_modules/@expo/router/**/*.tsx", ], theme: { extend: {}, }, plugins: [], }; |
babel.config.jsに nativewind プラグインを組み込む
|
1 2 3 4 5 6 7 8 9 10 11 |
module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: [ // nativewind が Tailwind のクラス名を実行時に置換 'nativewind/babel', ], }; }; |
- エントリ CSS（
src/index.css）を作成し、App にインポート
|
1 2 3 4 |
@tailwind base; @tailwind components; @tailwind utilities; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// App.tsx import './src/index.css'; import { View, Text } from 'react-native'; import { Stack } from '@expo/router'; export default function App() { return ( <Stack> <View className="flex-1 items-center justify-center bg-gray-100"> <Text className="text-xl font-bold text-blue-600">Hello nativewind!</Text> </View> </Stack> ); } |
ポイント
-nativewindはビルド時に Tailwind のユーティリティクラスを React Native の StyleSheet に変換します。そのため PostCSS の実行は不要 です。
- Vite が提供する高速 HMR と組み合わせることで、スタイル変更が即座にシミュレータ／実機へ反映されます。
Expo Router と Vite の連携設定
expo-router は「ファイルベースのルーティング」を実現し、Web アプリ感覚で画面遷移を管理できます。Vite でも同様にページ単位でコード分割したい場合は、以下の手順で統合します。
- router 用パッケージをインストール
|
1 2 |
npm install @expo/router |
app/_layout.tsxとapp/index.tsxを作成（ファイルベースルーティングの基本構造）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// app/_layout.tsx import { Stack } from '@expo/router'; export default function Layout() { return <Stack screenOptions={{ headerShown: false }} />; } // app/index.tsx import { View, Text, Pressable } from 'react-native'; import { useRouter } from '@expo/router'; export default function HomeScreen() { const router = useRouter(); return ( <View className="flex-1 items-center justify-center bg-white"> <Text className="text-2xl font-semibold mb-4">Home</Text> <Pressable onPress={() => router.push('/details')} className="px-4 py-2 bg-indigo-600 rounded" > <Text className="text-white">Go to Details</Text> </Pressable> </View> ); } |
- Vite 側で
appディレクトリをエントリポイントに含める
vite.config.tsのresolve.aliasに@/appエイリアスを追加し、content設定でも./app/**/*.{tsx,ts}を忘れずに記述します。
|
1 2 3 4 5 6 |
alias: { '@/components': '/src/components', '@/assets': '/src/assets', '@/app': '/app', // ← ここを追加 }, |
- 開発サーバーの同時起動
npm run dev→ Vite が UI コンポーネントと Tailwind の HMR を提供。- 別ターミナルで
npm start（=expo start）を実行し、Metro が JavaScript バンドルを供給します。Vite と Metro はそれぞれ独立したポートで動作するため、競合は起きません。
まとめ
Vite の高速 HMR＋nativewind の即時スタイル反映、そして expo-router によるページベースのナビゲーションを組み合わせれば、Web 開発感覚で React Native アプリを構築できる環境が完成します。
TypeScript と VSCode 環境の最適化
型安全性と開発者体験はプロジェクト成功の鍵です。この章では tsconfig のベストプラクティス、VSCode 拡張機能、そしてチーム全員が同じ設定を共有できる方法を解説します。
tsconfig.json のベストプラクティス
以下は 2026 年版スタックに合わせた推奨設定です。strict モードの有効化 と paths エイリアス が特に重要です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "compilerOptions": { "target": "es2022", "module": "esnext", "lib": ["dom", "es2022"], "allowJs": false, "skipLibCheck": true, "strict": true, // 厳格モード全般を有効化 "noEmit": true, "isolatedModules": true, "jsx": "react-native", "moduleResolution": "node", "esModuleInterop": true, "resolveJsonModule": true, "baseUrl": ".", "paths": { "@/*": ["src/*"], // 例: import Button from '@/components/Button' "~app/*": ["app/*"] // expo-router 用エイリアス }, "typeRoots": ["./node_modules/@types", "./src/types"] }, "include": ["src/**/*.ts", "src/**/*.tsx", "app/**/*.tsx"], "exclude": ["node_modules", "babel.config.js"] } |
- strict:
noImplicitAny、strictNullChecks、exactOptionalPropertyTypesなどすべてのチェックがオンになるため、実装段階で潜在的バグを早期に検出できます。 - paths エイリアス: 大規模プロジェクトでは相対パス (
../../../) が読みにくくなるため、エイリアスでインポートをシンプル化します。
VSCode 推奨拡張機能と共有設定
| 拡張機能 | 主な役割 | 代表的な推奨設定 |
|---|---|---|
| React Native Tools | デバッグ、シミュレータ起動、expo start の自動検出 |
reactNative.debuggerPort: 8081 |
| ESLint | TypeScript 対応のコード品質チェック | "parser": "@typescript-eslint/parser" |
| Prettier - Code formatter | 自動整形（Tailwind クラスも対象） | prettier.singleQuote: true、trailingComma: "all" |
| Tailwind CSS IntelliSense | Tailwind クラス補完・ドキュメント表示 | tailwindCSS.experimental.classRegex: [["tw([^]*)"]]` |
| NativeWind Intellisense (2026年版) | nativewind のクラス補完とリアルタイム検証 | "nativewind.intelliSense.enabled": true |
| TypeScript Hero（メンテナンス継続） | インポート自動整理、エイリアス補完 | "typescriptHero.imports.organizeOnSave": true |
プロジェクト固有の VSCode 設定例
.vscode/settings.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "editor.formatOnSave": true, "eslint.validate": ["javascript", "typescript", "tsx"], "files.exclude": { "**/.git": true, "**/node_modules": true }, "tailwindCSS.includeLanguages": { "typescriptreact": "html" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } |
ポイント
-.vscodeディレクトリを Git に含めることで、チーム全員が同一のエディタ体験を共有できます。
エラー対処とビルド・デバッグフロー
実務で直面しやすい環境依存エラーは、原因特定→再現手順→解決策 の３ステップで体系的に切り分けると迅速です。この章では代表的なトラブルケースと、その対処フローをまとめます。
代表的な環境エラーと解決策
| エラー | 主な原因 | 推奨する解決手順 |
|---|---|---|
Unsupported Node version (node >=20 required) |
グローバルに古い Node が残っている、nvm の切り替え忘れ |
1. nvm install 20 && nvm use 20 2. ターミナルを再起動し node -v を確認 |
| adb: command not found | ANDROID_HOME が未設定、またはパスが古い |
1. 正しい SDK パスを環境変数に追加export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk2. source ~/.zshrc 後に adb version を実行 |
| Expo Go バージョンミスマッチ | Expo CLI と端末上の Expo Go が非同期に更新されている | 1. App Store / Google Play で最新の Expo Go をインストール 2. expo start -c（キャッシュクリア）を実行 |
| Vite HMR が効かない | ポート競合、または Metro の WebSocket が遮断されている | 1. vite.config.ts の server.port を 3000 に固定2. metro-config 側のポートを 8081 に明示（metro start --port 8081） |
| nativewind スタイルが適用されない | babel.config.js にプラグイン未登録、または content 設定漏れ |
1. babel.config.js に 'nativewind/babel' を追加2. tailwind.config.cjs の content 配列に全ての .tsx パスを網羅 |
実践的なトラブルシューティングフロー
- エラーメッセージを正確にコピー → Google / StackOverflow で検索し、公式 Issue がないか確認。
- 環境変数やパスの再設定 → ターミナル／シェルを完全に再起動してキャッシュが残らないようにする。
expo doctorの実行 → 依存関係全体の健全性レポートが得られ、見落としがちなミスマッチを検出できる。
ビルド・テスト手順：expo start, npm run ios, npm run android の使い分け
| コマンド | 用途 | 主な効果 |
|---|---|---|
expo start |
開発サーバー起動（QR コード表示） | Expo Go で即時プレビュー、-c オプションでキャッシュクリア |
npm run dev |
Vite の HMR サーバー起動 | UI コンポーネントと Tailwind の変更がミリ秒単位で反映 |
npm run ios / expo run:ios |
iOS シミュレータへデプロイ | Xcode が自動起動し、ビルドエラーを即座に確認可能 |
npm run android / expo run:android |
Android エミュレータ／実機へデプロイ | AVD Manager または USB 接続端末でテスト |
eas build --platform ios|android |
本番向けビルド（EAS） | OTA 更新や App Store / Google Play への配布が可能 |
推奨フロー例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
# 1. Vite の HMR を立ち上げて UI 調整 npm run dev # 2. 同時に Expo の開発サーバーを起動（別ターミナル） npm start # 3. iOS シミュレータで確認したいとき npm run ios # 4. Android 実機でテストする場合は端末を USB 接続し npm run android |
まとめ
-expo startがベースの開発サイクルに対し、Vite の HMR を併用すると UI 改修が格段に速くなります。
- ビルドはeas buildで行い、CI/CD パイプラインへ組み込むとリリース作業が自動化できます。
おわりに
本稿では Node.js 20（LTS が2023年開始） の正しい情報から始まり、Expo + Vite + nativewind という最新スタックの構築手順を詳細に解説しました。Vite の高速 HMR・エイリアス設定、nativewind による React Native 向け Tailwind、そして expo-router と組み合わせたページベースのナビゲーションは、Web 開発感覚でモバイルアプリを作れる大きなメリットです。
さらに TypeScript の strict 設定 と VSCode 拡張機能 を整えることで、型安全かつ快適な開発環境が完成します。エラー対処フローとビルド・デバッグ手順を併せて把握しておけば、実務でのトラブルにも迅速に対応できるはずです。
ぜひ本記事を手元に置きながら、最新スタックで React Native + TypeScript のプロジェクトをゼロから構築し、開発速度とコード品質の両立を実感してください。