React Native Academy · レッスン

Node、Expo CLI、シミュレーターのインストール

Node.jsとExpo CLIをセットアップし、iOS SimulatorまたはAndroid Emulatorを設定して、React Nativeアプリをローカルで実行できるようにします

「Node、Expo CLI、シミュレーターのインストール」はCoddyKit上の無料React Native Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Native Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Native Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Why Node.js Powers React Native

React Native runs on Node.js — it powers the Metro bundler that turns your JSX into an app. Install the LTS version for stability, ideally via the nvm version manager.

# Install nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Then install the latest LTS Node
nvm install --lts
nvm use --lts

# Verify installation
node --version   # e.g. v20.12.0
npm --version    # e.g. 10.5.0

Installing the Expo CLI

The Expo CLI lets you create, run, and build apps without touching native code. Pair it with the Expo Go app to scan a QR code and see your app on a real phone instantly.

# Install Expo CLI globally
npm install -g expo-cli

# Verify the installation
expo --version

# Alternatively, use npx (no global install needed)
npx create-expo-app --version

Setting Up iOS Simulator on macOS

For the iOS Simulator you need a Mac with Xcode installed. Open Xcode once to accept its license, then add the command line tools. Expo can launch a simulator with one keypress.

# Install Xcode Command Line Tools
xcode-select --install

# Open a simulator from the terminal
open -a Simulator

# List available simulator devices
xcrun simctl list devices

Setting Up Android Emulator

For Android you need Android Studio. Install the SDK and emulator, create a virtual Pixel device, and set the ANDROID_HOME variable so Expo can find everything. See the code.

# Add to ~/.zshrc or ~/.bashrc
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Reload shell config
source ~/.zshrc

# Verify adb is found
adb --version

Understanding the Metro Bundler

Starting a project launches Metro, the bundler that watches your files and reloads instantly with Fast Refresh. If things get stale, clear its cache with the --clear flag.

# Start Metro and clear cache
npx expo start --clear

# Metro outputs a QR code and key shortcuts:
#  i → open iOS Simulator
#  a → open Android Emulator
#  r → reload the app
#  m → toggle the developer menu

Java Development Kit for Android

Android builds need a Java Development Kit — Expo recommends JDK 17. Install it, then run java --version to confirm it's on your PATH. The code installs it via Homebrew.

# Install JDK 17 via Homebrew (macOS)
brew install --cask temurin@17

# Verify Java version
java --version
# Expected: openjdk 17.x.x

# On Windows: download installer from
# https://adoptium.net/temurin/releases/

Verifying Your Full Setup

Once everything's installed, run npx expo-env-info (or react-native doctor) to scan your setup. It flags anything missing, so fix those issues before your first project.

# Check your environment with Expo
npx expo-env-info

# Or use the React Native community CLI doctor
npx react-native doctor

# Install Watchman for better file watching (macOS)
brew install watchman

Watchman: Faster File Watching

Watchman is a file-watcher from Facebook that makes Metro detect changes much faster, especially on macOS. Install it via Homebrew before you start building.

# Install Watchman on macOS
brew install watchman

# Verify installation
watchman version

# If Metro has stale Watchman state, reset it
watchman watch-del-all

Environment Variables and PATH

Many setup headaches come down to a missing PATH entry — your shell can't find adb or the emulator. Add the paths to ~/.zshrc, then reload it. The code shows exactly what.

# Example ~/.zshrc additions for React Native
export JAVA_HOME=$(/usr/libexec/java_home -v 17)
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Apply changes
source ~/.zshrc

Expo Go App on a Real Device

The fastest way to test on a real phone is the Expo Go app. Run expo start, then scan the QR code, and your app loads over Wi-Fi. Perfect for quick development. 📱

# Start Expo development server
npx expo start

# Expo prints a QR code in the terminal.
# Scan it with:
#   iOS: Camera app → tap the banner
#   Android: Expo Go app → Scan QR Code

# Or press 's' to switch to Expo Go mode
# if using a dev build by default

Troubleshooting Common Setup Issues

Most setup snags are predictable: a busy port 8081, a stale Metro cache, the wrong Node version, or a missing ANDROID_HOME. And always read the red error screen carefully.

# Common fixes

# Clear Metro cache
npx expo start --clear

# Kill process on port 8081
lsof -ti:8081 | xargs kill -9

# Check connected Android devices
adb devices

# Restart adb server if devices not showing
adb kill-server
adb start-server

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

You built your toolchain: Node and nvm run the JavaScript, Expo CLI scaffolds and serves your app, and Watchman plus the SDKs power simulators. Next: your first project! 🎉

よくある質問

「Node、Expo CLI、シミュレーターのインストール」レッスンは無料ですか？

はい。「Node、Expo CLI、シミュレーターのインストール」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Native Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Native Academyコースには全4レッスンが含まれています。

「Node、Expo CLI、シミュレーターのインストール」で何を学びますか？

Node.jsとExpo CLIをセットアップし、iOS SimulatorまたはAndroid Emulatorを設定して、React Nativeアプリをローカルで実行できるようにしますブラウザで直接実行するハンズオンコードでReact Native Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Native Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Native Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Node、Expo CLI、シミュレーターのインストール」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Native Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Native Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Native Academyに戻る