KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

【前編】React Native + Expoで1年以上運用したCTOが集まってみた

こんにちは、エンジニアの Miho です!キッチハイクでは React Native でのアプリ開発が3年目を迎えましたが、みなさんは Expo についてどのような印象を抱いていますか?いざ、React Native でアプリ開発!と思って調べてみると、セットで紹介されていることが多いかと思います。

私自身、「Expo を使うとなんとなく開発が楽になりそうだな...🤔」という理解レベルでした。

* キッチハイクは Expo を採用せず、素の React Native(Vanilla React Native)で開発しています。

Expo を採用して1年以上運用したCTOが、上野に集結

そんな、多くのエンジニアが気になっている「Expo 実際どうなの?」に答えてくれる、頼もしいCTO達がキッチハイクオフィスに集まってくださいました!非常に充実した2時間で、とてもひとつの記事にまとめきれず...!前・後編と、対談形式でお送りします!

f:id:izmipo:20190707121442j:plain
オフィスの真向かいにある、お洒落なブックカフェに集結!

メンバー紹介(敬称略)

康 裕三 / @kangyoosam

ワンディー株式会社 CTO。 歯科医療者向けSNSアプリ 1D(ワンディー) を中心に、ほぼ1人で6つのネイティブアプリを運用している。Expo 開発歴は約半年。

筑井 友啓 / @two2q

ecbo株式会社。荷物預かりのシェアリングサービス ecbo cloak に携わる。Expo 開発歴は約1年。

和田 崇彦 / @takahi5

株式会社 maricuru CTO。花嫁向けコミュニティアプリ maricuru に携わる。Expo 開発歴は約1.5年。

渡邊 雄 / @hmktsu

株式会社 g&h CTO。 ストリートダンサー向け動画アプリ Weddy Weddy に携わる。Expo 開発歴は約3年。

藤崎 祥見 ( Shoken ) / @shoken0x

株式会社キッチハイク CTO。 食べ歩きが趣味になるグルメアプリ キッチハイク に携わる。この座談会のファシリテーター。Expo 開発は未経験。


おさらいしたい、Expo のこと

藤崎 祥見(以下、S):この会、僕の想像ですが相当盛り上がると思って(笑)既に第2回のテーマを考えてます。早速ですが、まずは改めて Expo が何者なのか、教えていただけますか?

f:id:izmipo:20190707155050j:plain

渡邊 雄(以下、渡邊):Expo(Expo SDK)は、React Native製のアプリ開発を支援してくれるライブラリ群ですね。React Native のバージョンをbundleしているので、開発だけでなく、我々が苦しめられがちな React Native のバージョンアップもあまり悩まないです。

S:Expo SDK を採用しているのが、和田さんと康さんですよね。

康 裕三(以下、康):ですね。ビルドも publish も本当に楽です。僕は渡邊さん執筆の #1人チーム本 に書いてあったビルドスクリプトをめっちゃ参考にしてます。

渡邊:照れるなー(笑)

和田 崇彦(以下、和田)完全に Expo SDKを通しての開発になるので、僕らは JavaScript を書くだけです。大半の機能はデフォルトで用意してくれているモジュールでまかなえますが、ネイティブレイヤーに直接アクセスすることができないので、サービスの段階によってはつらみが出てきますね。

f:id:izmipo:20190709200142j:plain
Vanilla React Native の概念図

【 React Native💡】

JavaScriptレイヤーのコンポーネントやライブラリの他に、直接ネイティブレイヤーにアクセスすることが可能。

f:id:izmipo:20190709200159j:plain
Expo SDK の概念図

【 Expo SDK💡】

完全にJavaScriptで書かれたコンポーネントやライブラリ以外は、すべて Expo を通してのみアクセスすることが可能。

S:そういうタイミングが訪れると、Expo SDKを eject した ExpoKit を採用することになるんですね。切り替えを決断した背景はまた後でお聞きするとして、ExpoKit はどういう仕組みなんでしょうか。

筑井 友啓(以下、筑井):ExpoKit を採用すると、先ほど話にあったネイティブレイヤーに直接アクセスできないという制限が外れます。ただ、Expo アプリでの実行ができなくなるので、ネイティブでビルドができる環境が必要です。

f:id:izmipo:20190709200301j:plain
ExpoKit の概念図

【 ExpoKit💡】

Expo SDK が React Native や iOS / Android SDK をラップしている状態から、ひとつのモジュールとしての役割を果たすようになったもの。直接ネイティブレイヤーにアクセスすることが可能。

S:その違いって、結構大きいんでしょうか。

筑井:ビルドにかかる時間は結構違いますね〜...。あと、Expo SDK だとアプリの配布がQRコードで出来るのが、すごく楽なんですよ。エンジニア以外のメンバーにも最新版をすぐチェックしてもらえたり。便利さは、やっぱり変わりますね。

渡邊:もともと使ってなかったモジュールを削除することができる、っていうメリットはありますよね。

筑井:ありますね。うちは expo-face-detector とか使わなくて。Expo SDK は全部入りなので。そのぶん、アプリのサイズは減りましたね。


いつ eject するべき?

S:先ほど話に上がった Expo SDK から ExpoKit の移行について、背景をもうちょっと詳しくお聞きしたいです。筑井さんはリリース後3ヶ月で eject を判断したそうですが、どうですか?

筑井:うちが入れたかったサードパーティのアナリティクス系SDKを Expo がサポートしていなかったことと、Push通知の機能を作り込みたくなったことが大きいですね。あとは Intercom を使っていて、Expo でも使えないことはないんですが、自分のサービスとの相性があまり良くなくて。主にその3つが理由ですね。

f:id:izmipo:20190707154750j:plain

S:エンジニアだけだったら問題ないかもしれないけれど、サービスの成長段階とか、他部署との連携とかね。

筑井:ほんとに、プロダクトはエンジニアだけのものじゃないんで。eject せざるを得ない状況はくると思いますね。それでも、OTAアップデートとかの恩恵は受けたいので、うまく共存させていくという方法をとってます。

【OTAアップデート💡】

Over The Air アップデートの略。無線ネットワークを経由してソフトウェアをアップデートすることで、つまりAppleの審査を通すことなく、最新のJSバンドルだけを差し替えることができる。
既存のユーザーは、アプリを再起動するタイミングで最新版が反映される。

和田:うちは eject なしでやってますが、筑井さんがおっしゃる通り、広告・マーケ系の制限は課題です。ほんとうは Google Analytics for Firebase とか Repro とか、アナリティクス系SDKを入れたいんですけど...我慢、みたいな。

f:id:izmipo:20190709202637j:plain

S:ちなみに、今はどうされてるんですか?

和田:Expo SDK に元から入っている Amplitude で蓄積したデータを、BigQuery にエクスポートする基盤を自前で用意してます。今はそれで、まだ頑張れそうですね。


まとめ:ExpoKit を採用するユースケース

サービスの成長段階によって、機能要件と Expo SDK のカバー範囲にギャップが生じたタイミングが、eject を決断するキーワードになりそうです。

具体的なユースケースを、以下にまとめてみました!

1. Expo がサポートしていない、サードパーティのアナリティクス系SDKを採用したくなったとき
2. Push通知、バックグランドでのオーディオ再生や位置情報取得 etc の機能を作り込みたくなったとき
3. その他、ネイティブ層のコードを直接触りたくなったとき

補足:Expo SDK では使えないライブラリ例

* 以下は一例です。

1. アナリティクス系
- Google Analytics for Firebase
- Repro
2. アプリ内課金系
- react-native-in-app-utils
- react-native-billing


react-native-unimodules から覗く、これからの動向

渡邊:僕は最近、react-native-unimodules を推してますね。

f:id:izmipo:20190707154943j:plain

S:初めて聞きました!詳しく教えてください(笑)立ち位置的にはどんな感じなんですか?

渡邊:ほぼ ExpoKit と同列ですね。Expo SDK を導入して eject した状態から使える、という感じです。Vanilla React Native 製のアプリに、後から入れることもできます。これからは、モジュールを都度 import する流れになるみたいで。公式では "bare" workflow って言ってますね。

f:id:izmipo:20190709200322j:plain
react-native-unimodules の概念図

【 react-native-unimodules💡】

立ち位置としては ExpoKit と同じだが、Expo SDK の状態から eject するプロセスが必要なく、後から追加することが可能。ExpoKit と比較すると、まだ使用できない機能がある。

S:ああ、イメージできてきました!package.json でいうと、 react-native , react-native-unimodules , あとはサードパーティのパッケージがいくつか入っているような状態でしょうか。

渡邊:ですね。導入も簡単だし、今後は ExpoKit と同様の機能を搭載して、eject の際に react-native-unimodules が入るような動きに進んでる感じです。

補足:react-native-unimodules にまだない機能例

* 以下は一例です。詳細は 公式のドキュメント を参照

- OTAアップデート
- BackgroundFetch
- Linking
- StoreReview


S:なるほどー。ちなみに、これから導入を検討する側として、Expo にデフォルトで入っている代表的なモジュールを教えていただいてもいいですか?

筑井:camera, asset, facebook, permissions... あとはセンサー系とか。

渡邊:image-picker も代表的じゃないですかね。image-manipulator も持ってます。

:haptics もありますよね!iOS でよく使われてる、あのバイブの。

S:ありがとうございます!すごく参考になるなぁ。


React Native + Expo で1年以上運用した所感

S:Expo を採用してこれまで運用し続けてみて、実際どうでしょうか?

渡邊:当初は機能が色々足りないと言われてたんですけど、着実にサポートは充実してきてますね。何よりも、Expo が我々の声をちゃんと拾ってくれている感があります。

和田:導入当初の不安って、やっぱり Expo に殆ど乗っかるっていう部分ですよね。それって、Expo が頑張らなくなったら絶望的じゃないですか。それでも、今のところ取り越し苦労な感じで。

筑井:何より、 JavaScript のエコシステムが偉大だ、という安心もありますよね。

S:Expo コミュニティは、React Native コミュニティ自体とは独立しているんですね。なんだか新鮮。

:僕は和田さんと ReactNativeにゆかりのあるスタートアップが集う会 を主催しているわけですけど、互いのサービスを効率よく成長させたくて、知見共有の場をつくっている感じです。本家を刺激したい、という気持ちもありますね(笑)

f:id:izmipo:20190707155010j:plain

S:React Native じゃなくて、Expo の独自コミュニティ、っていうのが非常に興味深いですよね。Expo コミュニティや、React Native の思想についても、ぜひ後ほどセッションしましょう!


後編は、今まさに成長中の Expo コミュニティについて、より掘り下げていきたいと思います!お楽しみに!


We’re Hiring!

キッチハイクでは、React Native でどんどん開発したいエンジニアを大募集中です!

www.wantedly.com

www.wantedly.com

www.wantedly.com