【1回】Expo・ReactNativeの環境構築

このブログについて

• Expoを使いつつ､ReactNative のアプリ開発についてまとめていきます｡
• 必要に応じて､ライブラリなどの紹介します
• チャプターごとの状態を GitHub で管理するので､必要であればクローンしてください｡

こんな方にオススメ

• React､TypeScript などについては学んでいる
• スマホアプリケーションの開発に興味がある

前提ツールのバージョン

環境構築と起動

Mac と iPhone シミュレータを使った開発環境を構築します｡
ドキュメントに従って､ node と watchman ､ Xcode､ CocoaPods をインストールします｡

# nodeとwatchmanのインストール（brew）
$ brew install node
$ brew install watchman

# CocoaPodsのインストール（gem）
$ gem install cocoapods

Xcode は AppStore からインストールしてください｡
エディターですが､一緒にビルドツールやシミュレータも使えるようになります｡

AndroidはAndroid Studio（SDK）が必要になります｡別途インストールしてください｡

Expo プロジェクトの作成

Expoのプロジェクトを作成します｡next.jsやreactのプロジェクトを作成するように､CLIツールを使います｡

$ npx create-expo-app@latest
Ok to proceed? (y) 
What is your app named? ... {プロジェクト名}

アプリの起動

起動方法はいくつか種類があります｡今回は､Development Buildの方式で実行します｡

### ネイティブプロジェクトの作成
### ios､androidフォルダが作成される
$ npx expo prebuild --clean

### iOSの場合は､明示的に依存ライブラリをインストールする
$ cd ios
$ npx pod-install
$ cd ../
$ pnpm ios

### Androidの場合は､そのまま実行でよい
$ pnpm android

シミュレータ上にExpoのサンプルページが表示されれば完了です｡

Expo GoとDevelopment Buildについて

Expoでは､Expo Goというツールと､ビルド､インストールして起動する（Development Build）､いずれかの方式で開発を進めます｡
切り替えるには､起動したあとにターミナルで｢s｣を押すと切り替わります｡
Expo Goでは一部が使えない機能があるため､Development Buildで進めていきます｡

現在使われている方式は､ターミナルで以下のように表示されます

› Using development build

まとめ

• Expoのプロジェクト作成・サンプル表示までを解説しました｡
• Expoには2種類の起動方法がある
  • Expo Go
  • Development Build

参考資料

• Expo
• ReactNative