本来ならばAndroid StudioやXcodeを導入しなければWorldにHelloすることも難しいReact Nativeですが、create-react-native-appを使うことでnpm/yarnのみで実行できる環境が構築できます。
この魔法のような環境づくりの立役者がExpoなわけですが、実はExpoにはWeb IDEがあることをご存知でしょうか。その名をExpo Snackと言います。
↓こんな感じでブラウザ上でコードを書くと、すぐに動作を確認することができます。
組み込みプレビューはappetize.ioが使われています。これも大概謎の技術なんですが、DeviceFarmとかRemote TestKitに類似の技術を使ってるんですかね。React Native for Webのようなイミテーションではなく、本当にネイティブのシミュレータや実機で動かしている画面をストリーミングしている形だと思います。
Web IDE
ちゃんとExpo Snackで開くと次のようなWeb IDEっぽい見た目になります。
左側のファイルエクスプローラからファイルを追加して、モジュールを作ることもできます。
また、package.json（モドキ）にdependenciesを追加することで、外部ライブラリも取り込めるので、かなり色々できそうです。今回のサンプルのReact Navigationも、後から追加したライブラリでした。
ただ、何でも追加できるというわけではなく @expo/ をプレフィックスに持つExpo向けライブラリや、JSのみで実現されているライブラリだけしか使えないことには留意してください。Expoをejectせずに使うときのルールと同じで、ネイティブコードを含むライブラリは適用できません。
実機での動作
create-react-native-appでExpoを使う時と同じように、QRコードとExpoアプリによる実機デバッグの手段も用意されています。Web IDEの右上から「QR Code」を押すことで呼び出せます。
ちゃんと実機で動いていますね。
裏側について考えてみる
これどうやって繋げとるん？と不思議になりましたが、Expoアプリの実行履歴を見る限りでは、expo.ioから持ってきているようです。実際、パソコンと同じネットワーク上に実機がいなくても、問題なく表示できました。サーバー側でビルドしてくれてるんですかね・・・
デバッグ中の実機をスリープさせたり復帰させたりすると、Web IDE側に通知が出てきているので、リアルタイムで更新をかけるための何かがありそうです。
DevToolsで見てみると、PubNubによるロングポーリングで通知を受け取っている感じでした。
PubNubってCorona SDKの全盛期に対戦ゲームとかの情報をリアルタイムに同期できて便利だよね的な、今でいうAWS CognitoとかFirebase Realtime Databaseみたいな文脈で使われてたやつだっけ・・・（うろ覚え）
ハンズオンに有用かも
ハンズオンイベントを開くと、多くの場合次のようなトラブルが起きます。
- Windowsでうまく動かない
- 事前にHelloWorld相当のところまで進めてきてねって言ってるのに何も準備してこない（そしてセットアップしてるうちにその日が終わる）
- みんながこぞってツールのインストールをするもんだからネットワーク帯域が枯渇する
- Windowsでうまく動かない
そもそもパソコンを持ってこない（実話）
何度か主催した経験で言うと、これらのトラブルは必ず起きるものなので、参加者の啓蒙やドキュメントの整備といった方向で撲滅しようとするのは（無駄ではないものの）割と無理筋な印象です。ハンズオンをどうしても成功させたいならば、次のどちらかの方法が良いと私は考えています。
- めっちゃ強いインフラと環境構築済みのパソコンを用意して使わせる（どうしても持参したい人は自己責任で頑張れ）
- Web上のIDEやコンソールだけを触ってもらう
前者は数万円払ってどこかのコンピュータ室で受講するOracleセミナーとかそういう感じのアレで見かけるやり方ですし、後者はGoogle Cloud Shellのハンズオンが典型的でしょうか。
さて、Expo Snackを使った方法は後者にあたります。Expoアプリが入ったAndroidかiOSの実機は必要になります*1が、まあこのご時世なのでスマホを持ってないという人もあまりいないでしょう。React Nativeハンズオンの勝算を高められる選択肢のように感じられます。
実はリリースまで持っていける
右上に「Export to XDE」というボタンがありまして、これを押すとExpoプロジェクトを手元にダウンロードできます。
試してないけど、XDEに読み込ませればアプリをexpo.ioにデプロイできそうですし、expコマンドでiTunes Connectにアップロード可能なバイナリを作るようなこともできるんじゃないでしょうか。
まとめ
Expo Snack使うと最低限の環境構築がめちゃくちゃ簡単にできるので、少なくともハンズオン目的でならガンガン使っちゃっていいと思います。
趣味のアプリ開発とかに実用できるかというと、補完とかあんまり効かないみたいなので、ちょっと苦しいのでは・・・という気持ち。でもそれはVSCodeとかと比べて不便というだけなので、頑張ればアプリ一本作れるのでは・・・？という感じもします。
RNの裾野を広げる良いツールだと思ったので、今後積極的に採用していきたいです。
宣伝
最近会社でReact Nativeを前提としたReactエンジニアの求人を始めたので、新潟でReact Native書くぜっていう稀有な方がいればよろしくお願いします。Reactが分かればAndroidやiOSの経験はなくても大丈夫です。
*1:今回試した限りではappetizeは利用制限がかかりやすかったのであまり期待しないほうがよさそうな気がしました