React Native + Expoでスマホアプリを開発した感想【2021年】

はじめに

今年の4月からReact Nativeを触り始め、人生初のスマートフォンアプリ(島根大学生向けの情報収集アプリ)SUEPを開発・リリースしました。

私がこのアプリを開発する以前までに触ったことのあった言語は、

  • C (大学の講義で触っただけ)
  • Python (同上)
  • C# (Unityでちょっとしたゲームを作ったことがあるだけ)
  • Google Apps Script (ちょっとした処理ならそれなりのものを書ける)

です。React Native + Expo については人が使ってるのをチラ見したくらいで、1ミリもコードを書いたことはありませんでした。また、JavaScriptは1ミリも触った事がありませんでした。

プログラミングの経験がそこまで多くなくても、ある程度のアプリならReact Native + Expoで作れるので、これからアプリを作ろうと考えている方の参考になることを願って書き残しておきます。

選定理由

現在は私ともう一人のプログラマでアプリをメンテナンス・開発していますが、4月当初は私一人で開発していました。そのため、割とガチで自分が使ってみたかったから選びましたw

開発以前から、

  • React Native + Expoを使えばスマートフォンアプリを(比較的)簡単に作れるらしい
  • Reactと共通している部分もあり、React Nativeの構文に慣れれば、Reactベースのwebアプリも作りやすくなる(らしい)

ということを知っていました。これらの理由と、将来的にwebアプリケーションも作ってみたいな~と漠然と思っていたことが相まってこれしかないと思い開発を始めました。

残念ながら、iOSではKotlin, AndroidではJavaが有力で、クロスプロットフォームで開発するならFlutter, Unity etc. の選択肢があったことを知ったのはずっと後になってからでした。

React Native + Expoの良かったところ

React Native + Expoで良かったな~と思った点は次の3点です。

  • スマートフォンアプリを作る際の様々なコストが低い(Managed workflowに限る)
  • 実機デバッグの容易さ(Managed workflowに限る)
  • アプリリースに必要な手続きが少ない

スマートフォンアプリを作る際の様々なコストが低い(Managed workflowに限る)

私は現在、SUEPをManaged workflowで管理しています。機能としては、ツイートを自動で取得したり、島根大学の講義情報をオフラインで参照・表示したりと簡素なものです。

一方で、Firebase Analyticsのように「ネイティブの機能を必要とする場合」にはBare workflowへ移行する必要があると認識しています。

Managed workflowではExpoで使える様々なライブラリを使うことができ、開発スピードは間違いなく上がります。

一方で、皆さんが作るアプリの要件によってはBare workflowしか選べないこともあると思います。下記の記事を参照していただきたいのですが、Bare workflowではManaged workflowと比較し、特に

  • 開発時のライブラリの選定
  • リリース時の手続

の二点について、より考える必要があります。

実機デバッグの容易さ(Managed workflowに限る)

これまたManaged workflowに限った話ですが、Expoの一番の強みでもある「実機デバッグの容易さ」についても触れたいと思います。

expo startを実行し、出てきたQRコードを読み込むなりすればどの端末からでもデバッグをおこなえるため、開発スピードの高速化に与える影響は非常に大きいと思います。付随して、アプリのデモを簡単に表示できるという点も大きなメリットだと思います。

しかしながら、Bare workflowでは実機デバッグが多少面倒です。詳しくは下記のスライドを参照してください。

アプリリースに必要な手続きが少ない

これも非常に大きなメリットだと思います。特にExpoを使っている場合、OTAアップデートを行うことで(条件付きですが)ストアの審査を介さずにユーザーのアプリにアップデートをかけることができます。

また、特に初心者からすると、expo build:iosexpo build:androidコマンドのみでリリースに必要なファイルを用意してくれるのはありがたい点でした。

React Native + Expoだと辛かったところ

  • ggるとReact向けの記事が多く出てくる
  • Function Componentで記述された記事が少ない
  • OTAアップデートの仕様が複雑
  • (英語マニュアルが9割)

ggるとReact向けの記事が多く出る

開発経験を妨げる点として、React Nativeで利用したいライブラリの記事をggると大抵React用のライブラリの記事が出てくることが挙げられます。

検索の度にReactとReact Nativeの記事をフィルターするのが非常に面倒でした。

Function Componentで記述された記事が少ない

こちら↓の記事にある通り、React(およびReact Native)ではFunction Componentが推奨されています。

にもかかわらず、困ったときにggるとClass Componentのみで記載された記事が多すぎて正直禿げます。

Class Component → Function Componentの変換を行ってからプログラムを書いても良いのですが、結局1から自分で書いた方が早かった、みたいなことが何度もあって禿げました。

OTAアップデートの仕様が複雑

RN + Expoの良かった点として、OTAアップデートにも触れましたが、このOTAアップデートの仕様が結構分かりにくいです。

OTAアップデートの仕様についてはこちら↓を参照したのですが、expo buildコマンドでは自動的にexpo publishされるとかいう謎の仕様を知らず、危うくバグまみれのままリリースしてしまいそうになることがありました。

OTAアップデートは便利ですが、仕様を把握するのがそれなりにハードでした。

(英語マニュアルが9割)

これに関しては賛否両論だと思います。

私はある程度英語できる派の人間なのであまり感じないのですが、チーム開発を進めるにあたって一番の障壁はこの点にある(あった)と思っています。

英語圏のサイトやフォーラムの方が活発なので、React NativeやExpo関連の質問をする際や分からない問題をggった時、どうしても問題解決を円滑に行うには英語力が必要になります。

現在はアプリをチーム開発しているのですが、英語の記事・マニュアルを読む能力によって学習コストと開発スピードが大きく変わるなぁというのが正直なところです。

まとめ

私個人としては初めてのスマートフォンアプリ開発でReact Naitve + Expoを選んだのは正解だったと感じています。

引き続きReact Native + Expoでの開発を行うことで、今回のような話をより一般化された考察・意見に落とし込むことが出来るかな、と思っています。