この記事はReact Native 全部俺 Advent Calendar 2日目の記事です。
このアドベントカレンダーについて
このアドベントカレンダーは @itome が全て書いています。
基本的にReact NativeおよびExpoの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はXにお願いします。
Expoとは何か、どう使うべきか
今回はReact Nativeアプリを開発する際に避けては通れないExpoについて解説します。特に過去にReact Nativeを使っていた人はExpoについて「あくまでシンプルなアプリを作るときに使うものであって、複雑なケースには向かない」と思っている人も多いと思うので、Expoの現在の機能と立ち位置について詳しく説明したいと思います。
ExpoはReact Nativeとどう違うのか
ExpoはReact Nativeの代替ではなく、React Nativeで作ったアプリをビルドするためのツールチェインです。
React Nativeだけを使ってアプリを開発する場合、iOS/Androidそれぞれのビルド環境を用意し、ネイティブコードの設定を行う必要があります。一方でExpoを使うと、すべての設定をJavaScriptで書けるようになり、ネイティブの知識がなくてもアプリを開発できます。
このアドベントカレンダーでは特に理由がない限りExpoを前提とした開発をしていきます。
Expoを使う利点
ネイティブコードを全く触らなくて良い
Expoを使うと、アプリの設定はすべてapp.jsonに書くことができます。例えば以下のように書くだけで、アプリのアイコンや起動画面、パーミッションの設定などを行えます。
{
"expo": {
"name": "My App",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"backgroundColor": "#ffffff"
},
"plugins": [
[
"expo-camera",
{
"cameraPermission": "Allow $(PRODUCT_NAME) to access your camera."
}
]
]
}
}
豊富なライブラリが使える
以前のExpoでは、ネイティブコードを含むライブラリを使う場合はexpo ejectコマンドを使って通常のReact Nativeプロジェクトに変換する必要がありました。
しかし現在ではCNG(Continuous Native Generation)という概念とその実装であるExpo Prebuildによってこれらの問題はほぼ解決しています。
また、ExpoチームがメンテナンスしているSDKには40以上のライブラリが含まれており、カメラやプッシュ通知、位置情報など、よく使う機能は標準で提供されています。
簡単な実機デバッグ
通常のモバイル開発であればデバッグのためにアプリのビルド→インストール→デバッグという流れが必要です。コードのビルド時間には多くの場合数十秒から数分かかってしまう上に、iOSの実機デバッグにはApple Developに登録して証明書の準備が必要で、慣れない人にはハードルが少し高いです。
一歩Expoでは、AppStoreやPlayStoreで配布されている「Expo Go」アプリを使って、アプリのビルドなしに実機デバッグをすることができます。
プロジェクトでexpo startコマンドを実行するとすぐに開発サーバーが立ち上がって以下のようにQRコードが表示されます。
このQRコードをExpo Goで読み込めば開発中のアプリが立ち上がります。
expo startはNext.jsの開発サーバーのようなもので、Javascriptのビルドしか行いません。そのため立ち上げも数秒で済みます。
ExpoとEASの関係
EAS (Expo Application Services) は、Expoが提供するビルド・デプロイサービスです。従来のCI/CDサービスを使う場合と比べて以下のメリットがあります：
- iOS/Androidのビルド環境を用意する必要がない
- コード署名の設定が簡単
- OTAアップデートが標準でサポートされている
フリープランもあるので、個人開発で試してみたいだけでも登録することをお勧めします。
まとめ
現在のExpoは、React Nativeアプリ開発の標準的なツールチェインとして十分な機能を備えています。特に：
- シンプルなアプリをJavaScript(Typescript)だけで開発したい場合
- Expo Prebuildを使ってでネイティブコードも書きたい場合
それぞれのユースケースに応じて柔軟に使い分けることができます。
これからReact Nativeを始める人は、Expoを使うことを強くお勧めします。
Discussion