開発環境にはM3搭載のMac、Xcode、Android Studio、Visual Studio Codeを使いました。
Expo↗
React Nativeでアプリを作るとき、Expoを使うと開発が簡単になります。AndroidとiOSのアプリに必要な多くの設定をExpoが代わりに行います。無料で利用でき、ビルドと配布も手軽です。Expo Goをインストールすると、開発中のアプリを実機でリアルタイムに確認できます。
Expoを使うと、ビルドや配布が簡単になります。ただし、一部のライブラリが使えず、ネイティブ機能を追加できない場合があります。Expoで実現できないネイティブ機能を追加するなら、React Native CLIを使います。
プロジェクトの機能がExpoで使えるか確認し、対応しない場合はReact Native CLIを検討します。
1. Node.jsとnpmをインストールする 🔗
Node.jsはJavaScriptランタイムで、React Nativeの開発に必要です。公式サイトでLTS版をダウンロードしてインストールします。Macでは、Homebrewとnvmを使うと簡単です。次の記事を参照してください。
macOSにNode.jsをインストールする（Homebrew、nvm、npm）
インストール後は、ターミナルでnode -v、npm -vを実行し、バージョンを確認します。
2.1. Expoアカウントとプロジェクトを作る 🔗
Expoを使うにはExpoアカウントが必要です。公式サイトで登録してログインします。
Expo公式サイト↗
ログインするとExpoプロジェクトを作成できます。Create a new projectを押し、名前を入力するとプロジェクトが作られます。
Testプロジェクトを作成する
2.2. Expo CLIをインストールしてローカルプロジェクトを作る 🔗
必要に応じて、ターミナルでexpo-cliをグローバルにインストールします。
インストールしなくても、npx expoでプロジェクトを作成して実行できます。
npm install --global expo-cli
expo-cliを入れたら、expo initでプロジェクトを作ります。
npx create-expo-app@latest
yを入力して追加パッケージをインストールし、プロジェクト名を設定します。
✅ Your project is ready! と表示されたら成功
プロジェクトを実行する前にExpoへログインします。
npx expo login # expo 계정 입력
作成後は、プロジェクトフォルダーに移動し、Expo上のプロジェクトと接続します。プロジェクトIDは詳細ページで確認できます。
cd my-new-project
eas init --id {expo 프로젝트 id}
接続後、Expoプロジェクトを実行します。
起動後、aを押すとAndroid Studioのエミュレーター、wを押すとWebブラウザでアプリを確認できます。iを押すとXcodeのiOSシミュレーターで確認できます。この選択肢はmacOSに限られます。
2.3. Expo Goをインストールして接続する 🔗
ExpoとReact Native CLIは、プロジェクトに合う方を選びます。Expoは開発を簡単にしますが、使えないライブラリや追加できないネイティブ機能があります。Expoで実現できない機能を追加する場合は、React Native CLIやexpo ejectを使う方法があります。
アプリ設定ファイルを使い、ネイティブのソースコードを含むExpoプロジェクトを生成できます。
android/ と
ios/ が作られ、ネイティブコードを含むプロジェクトになります。
その後、次のコマンドでprebuildしたアプリを起動できます。
npx expo run:android
npx expo run:ios
Expoプロジェクトを作成する（macOS）
