この記事はReact Native 全部俺 Advent Calendar 3日目の記事です。
このアドベントカレンダーについて
このアドベントカレンダーは @itome が全て書いています。
基本的にReact NativeおよびExpoの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はXにお願いします。
エディタの設定
React Native開発では、好みのエディタを選んで大丈夫です。WebStorm、Vim、Atomなど、Reactの開発ができるエディタであれば何を使っても問題ありません。
ただし、VSCodeを使う場合は、VSCode Expoという便利な拡張機能があります。この拡張機能をインストールすることで以下のような機能が使えるようになります：
- app.jsonやapp.configの入力補完
- Expoの設定値のバリデーション
- マニフェストファイルの自動生成
- アプリアイコンのプレビュー
特にExpoの設定ファイルを頻繁に編集する場合は、この拡張機能があると便利です。
他のエディタを使う場合でも、ESLintとPrettierの設定は必須です。コードの品質を保ち、チーム開発をスムーズに進めるために、これらのツールは必ず導入しましょう。
expoの公式サポートはないものの、biomeやoxcといった選択肢もあります。しかし慣れていなければeslintとprettierを採用するのがまだ無難です。
Nodejsのインストール
Node.jsはvoltaを使ってインストールすることをおすすめします。
voltaを使うと、プロジェクトごとにNode.jsのバージョンを管理できます。
# voltaのインストール
curl https://get.volta.sh | bash
# Node.jsのインストール
volta install node
# バージョンの確認
node -v
Expo CLIの設定
ExpoはReact Nativeの開発をより簡単にするフレームワークです。
以下のコマンドで新しいプロジェクトを作成できます：
# プロジェクトの作成
npx create-expo-app my-app
cd my-app
# 開発サーバーの起動
npx expo start
開発方法の使い分け
Expo Go
Expo Goは最も手軽に開発を始められる方法です。
-
メリット
- セットアップが簡単
- Hot Reloadが速い
- 追加の設定なしでOTA updateが使える
-
デメリット
- ネイティブモジュールが制限される
- パフォーマンスが本番環境と異なる可能性がある
Development Build
より本番に近い環境で開発したい場合はDevelopment Buildを使います。
# Development Buildの作成
npx expo prebuild
# iOSビルド (EAS使用)
eas build --profile development --platform ios
# Androidビルド (EAS使用)
eas build --profile development --platform android
Expo Application Services (EAS)を使うと、WindowsやLinuxマシンでもiOSアプリの開発が可能です。
これは個人開発や小規模チームにとって大きなメリットになります。
まとめ
React Native開発は環境構築が難しいと思われがちですが、Expoを使えば比較的簡単に始められます。
特に最近はEASの機能が充実してきているので、開発環境の選択肢が広がっています。
Discussion