React Native + Expoでアプリ作ってみて、採用するならこんな感じの時かな〜という記事

どうも @nabettu です。 フロントエンドエンジニアとして、Webサイト作ったりスマートフォン向けのアプリを作ったりしています。

仕事でも個人としてもReact Native + Expo でアプリを作ってiOSとAndroidの両対応したりしてます。

たまに、新しく作るアプリや既存のアプリの方針転換の相談とかうけるんですが、とにかく 技術選定って難しい・・・

Swift/Kotlin使ってネイティブで作るのか、React NativeかCordovaか、はたまたFlutterか

考えること多いんですよね。適当に「Flutter流行ってるからFlutterでいんじゃね？」とか気軽に言えないじゃないですか。

前提として「iOSとAndroid両対応のアプリを出す」ってのは確実にあるとします。

そしてまず相談受けた時にこのあたりのことをざっくりヒヤリングしたり、一緒に考えたりします。

• サービスの今後の展開予定
• 企業の予定規模・予算
• 既存メンバーのレベル感
• 採用する技術に関する人材の採用しやすさと平均単価
• 現在確定してる仕様と不確定要素の洗い出し
• アプリ開発に導入できる人数と予算、期間
• メンテナンスの必須期間

などなど、、、

その上でですね、 あくまでざっくり React Native + Expoを使ったほうがいいかな〜って場合の話と、メリットとデメリットを書こうと思います。

React Native + Expoを採用する理由

こうゆう状況だと積極的に採用してもいいかも

• 割と開発陣が仕様をコントロール可能
• めちゃ細かいインタラクションを詰めるレベルではない
• 載せる機能が基本的にWebとそんなに変わらない・Webでやれる範疇をあまり超えない（ARとかOSの決済とかBTとかない）
• 既存のWebがある・今後Web版を作る予定がある
• ↑がReact.jsだとなおよし
• ↑のメンバーが兼任する（JSエンジニアがいる）
• アプリが頓挫してPWAという方針になるかも（なっても採用したJSエンジニアはWeb版やれるんじゃないかな）

と、Webとの共通化の話題が多いですが、Expoでは今βでReact Native for Webが導入されているようです。

blog.expo.io

それを使って、Expoの中心メンバーであるEvanさんがinstagramクローンをexpoで作ってWebで公開するというのをやっていました。

Check out my @expo and React Native for web Instagram clone: https://t.co/N9L8171kL5
source: https://t.co/U9UOHyWqRr

...

It's got some bugs 😅 pic.twitter.com/CPu2gavFu3

— Evan Bacon 🥓 (@Baconbrix) 2019年5月18日

今後はこれを使って頑張ればソースの一本化がかなり進みそうです。全部一つにはできないけど共通化出来る部分はかなり増えそうです。

私も最近個人でアプリを作ってから、それのWeb版（PCのみ）を作ったんですが↓

tabmemo.com

結局データ管理するmodel部分は共通化して、View部分は別々で普通に作りました。React Nativeなら少なくともそういう感じで頑張れば結構共通化できます。（React Native for WebにExpoが正式対応したらそっちに移行したい。。。笑）

Expo使うメリット

ただのReact Nativeでなく、Expoを使った開発についてです。

• Node.jsの資産が使える
• OTAを使ってAppStoreを通さずにバグ修正が出来る（OTAでの機能の変更はAppleに怒られるだろうからbugfixにとどめておこう）
• ExpoでやるとOTAのサーバーの運用やPushサーバーを立てる工数がグンと減る。Hot Reloadとかもすぐできる。
• Expoでやる分にはiOSで作ったアプリのAndroid対応工数がプラス0.2倍くらいで済む肌感（Expo無しのReact Nativeなら、完全JSで作っといてライブラリ選定ミスらなければ0.5くらいかな〜）
• ビジネス要件が変わってネイティブSDK導入が必須になっても普通のReact Nativeにejectしつつ、作りによってはExpoの便利機能（OTAなど）も使って開発を続けられる場合がある（これが意外とデカい）

注意するところ

• ビルドは楽なんだけど、結局証明書とかストア申請とかはネイティブの知見ゼロだとキツい（アドバイスもらえる人が近くにいると良い）
• 困ったらWebviewで切り抜ける気合いが大事（結局Webフロントの知識が必要）
• 市場にReact Nativeエンジニアが少ないので直接的なエンジニア採用しづらい（ただ、すでにReact.js出来るWebエンジニアならある程度気合でなんとかなるとは思う）

他の言語・フレームワークとざっくり比較すると、、、

ネイティブ（Swift/Kotlin）

• 比較的エンジニアが採用しやすい（絶対数が多い）
• それぞれ作るので工数はほぼ２倍だけど確実
• ネイティブSDKが必要になっても問題なし、ビジネス要件に柔軟に対応可能
• Webとの共通化なんて夢は見ない

Cordova（Ionicなど）

• 同じくJSで書ける（Angular大好きマンならこれだ！）
• Web版との共通化はこれが一番いい
• ネイティブSDKとかが必要になったときにしんどいのは同じ
• OTAとか出来るけどExpoほどは足元が整ってない

Flutter

• firebase使うなら組み合わせやすそう
• まだDartの資産・事例が少ない
• 少なくともAndroidの開発だけみたらこっちのがDX良いかも（React NativeはiOS中心に作ってる感が否めないのでAndroid側で足を引っ張る場面がたまにある）
• イケイケなので話題になりそう（やりたい！って人がいるので意外とエンジニア採用できるかも？）

（Flutter for Web は今後どうなるんでしょうね・・・ワクワク）

まとめ

技術選定は会社の状況にかなり左右されるので、詳細を聞かないと「これだ！」とは言えないですが、なんとなくこのあたりの情報をもとに決めるといいのかな〜という話でした。参考になれば幸いです。

以上です。