React Nativeを業務で使ってみた感想を、メリットとデメリットを中心に述べてみる

業務で「React Native」を使っています。ここ最近、React Native漬けの日々を送りました。

ちなみに、非Expo環境です。ネイティブ連携が必要なことが予め予想されていたので、Expoは最初から使いませんでした。

感想を共有しつつ、良かったこと・難しかったこと、メリット・デメリットを中心に話していきたいと思います。

メリット

レイアウトがやりやすい

React Nativeは、Flexboxによるレイアウト(見た目の配置)が、凄くやりやすいです。開発中は、チートシートを机の上に置きながら、常に参照しつつ行ないました。

www.webcreatorbox.com

私は元々iOSのエンジニアでしたが、XcodeのAuto Layoutとは比べ物にならないくらい快適です。

CSSライクだから、コードレビューがやりやすい
CSSライクだから、使い回しがやりやすい
ホットリロード(Hot reloading)機能を使えば、瞬時に見た目が更新される

レイアウトのやりやすさにとても感動したので、Flexboxだけでも使う価値は十分にあります。

大部分のコードを共通化できる

iOSとAndroidで書き分けをしているコードは、現時点では数箇所しかありません。それくらい共通化できます。

WebAPI通信も、iOSだったらAlamofireで、Androidだったら...となるところを、fetch関数ひとつで共通化できます。

// https://facebook.github.io/react-native/docs/network
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

なんだかんだ言って、書き分けは必要なんだろうなぁと思っていたのですが、これは嬉しい誤算でした。

リロード機能による開発効率の向上

Xcodeで開発していた時は、Swiftのコードを変更したら、アプリを再コンパイルする必要がありました。

React Nativeの場合、リロードという機能を使うことで、瞬時にJSコードの修正を反映することができます。これはかなり、開発速度の向上に役立ちました。

f:id:konosumi:20180822015922p:plain

デメリット

ネイティブ連携を必要とするライブラリのインストールが大変

例えば、地図のライブラリではデファクトスタンダードである「react-native-maps」をインストールするとします。

その場合、JS(npm)、iOS、Androidのそれぞれで、インストール作業を行なう必要があります。

react-native-maps Installation
https://github.com/react-community/react-native-maps/blob/master/docs/installation.md

こうやって、ネイティブ側のインストールが必要なライブラリが増えてくると、将来のメンテナンスがどんどん大変になります。仮にライブラリのバージョンを上げるとしてもJS(npm)、iOS、Androidの全てが対象となってくるのです。

「React Native製アプリのクオリティを上げるために工夫した事」で言われている「ネイティブ拡張モジュールは出来るだけ使わない」には、このような理由があったのかと、身をもって理解しました。 blog.craftz.dog

エラーメッセージが分かりにくい

React Nativeは、エラーメッセージが分かりにくいです。下記の「ゆるふわ技術日誌」様の記事にもありますが、エラー箇所を特定するのが大変なのです。

現状はバグが起きた場合、丹念にトレースしながら、地道にエラー箇所を特定したりして解決しています。

yurufuwa-tech.hatenablog.com

マシンリソースが必要

私のMacBookは、2017年モデル、Core i7でメモリが16GBです。このスペックが良いか悪いかはともかくとして、普通にパソコンが唸ります。

私の場合、React Nativeの開発では以下の4つを立ち上げている事が多いです。

metro bundler(React Nativeの開発では必須で、必ず立ち上げておく必要があります)
iOSシミュレーター
Androidエミュレーター
VirtualBox(開発用アプリから接続するWebApiサーバー)

上記に加えて、Google ChromeやらSlackやらを立ち上げると、既にパソコンがギリギリになります。非力なマシンでのReact Nativeの開発は、あまりオススメできません。

(注釈：これは別にReact Nativeだからと言うわけではなく、Androidアプリ(Android Studio)の開発でもパソコンのスペックが求められるので、モバイルアプリ開発全般の課題かもしれません)

リリースするためには、ネイティブの知識が必要である

最低限、XcodeとAndroid Studioの基本的な使い方くらいは知っておいた方が良いです。それに加えて、最終的にはリリース用のビルドをした上で、ストアにアプリを提出する必要があります。例えば、iOSでは証明書関連の作業が必要です。

私は、iOSがメインのエンジニアですが、簡単なアプリであればAndroidでも作れるので、Android Studioの操作は問題ありませんでした。ただ、Androidのリリースビルド周りでは、社内のAndroidエンジニアにだいぶ助けてもらってます。

さいごに

Expoが注目されている理由は、React Nativeのネイティブ周りの大変さから解放されるからです。Android、iOSいずれかのエンジニアであれば、最初から非Expo環境での開発も出来ると思いますが、そうでない場合は、ExpoでのReact Nativeアプリ開発から入門したほうが無難です。

ただ、Expoも完璧ではなくて、用意されたモジュール以外とのネイティブモジュール連携が出来ません。Expoをやめることをejectというのですが、ejectを回避できるかどうかは、アプリの要件次第です。

bagelee.com

Expoも勢力の拡大を続けておりまして、FirebaseなんかもExpoから叩けるようになりました。

この記事を開いているという事は、間違いなくReact Nativeに興味がある方かと思います。来週に「React Native+Expo」の本も出るみたいですので、まずはそれで感覚を掴んでみてはいかがでしょうか？