🛠️

僕の考える最強のReact Native開発ライブラリ等(2020年11月末版)

4 min read 4

こんにちは、HALです。
React Nativeを使ったスマホアプリ開発を個人でやっているサラリーマンSEです。

空き時間のみを使った開発しかしていませんが、React Nativeを使い初めて1年半くらい経ったので、今の時点で1から開発を始めるならこの辺のライブラリを使うかな、と言うのを整理してみようと思います。

React Nativeのライブラリもたくさんあるので、これから開発はじめたいけどどのライブラリ使えば良いの?みたいな悩みを持たれている方の参考になれば幸いです。

開発補助系

Expo

これはやっぱり外せないかなぁと思います。
React Nativeの開発環境をサクッと整備してくれて、さらに良く使われるライブラリ類をまとめてくれている。
しかもiOSやAndroid独自の設定をラッピングしてくれるので、すぐに開発を始められるのが便利です。

https://docs.expo.io/

Expoを使うメリットは

  • expo init ProjectName だけですぐ開発を始められる
  • Expoのアプリを使って手軽に実機デバッグができる
  • 良く使うライブラリを用意してくれていて情報も結構あるので初心者に優しい

と言ったあたりがあります。
デメリットとしては、Nativeでしか使えない機能を使いたい場合にどうしようもない、と言うところがあります。
特に課金機能は実装できないので、課金を使う場合は選択肢から外れるのですが、その場合でも最初はExpoで作って、ExpoからEjectして素のReact Nativeとして開発を継続したりもできるので、最初はExpoで問題ないのでは?と思います。

Expoで開発開始→ある程度形が出来てNative機能が必要なところにきたらEject、みたいな進め方が楽かなぁと思っています。

Sentry

リリース後のクラッシュログなどを取るならSentryを使用します。
expoが推奨しているので使ってる、と言ったくらいで特に思い入れはありません。

https://sentry.io/welcome/
https://docs.expo.io/guides/using-sentry/

Firebase Crashlyticsでも良さそうなので、今度はこちらを使ってみようかなと思っていますが。

UI系

React Native Paper

UI系ライブラリだと、今はReact Native Paperが良いかなと思います。

https://callstack.github.io/react-native-paper/
React Native Paperのメリットは
  • マテリアルデザイン準拠(好みですが)
  • テーマへの対応
  • ダークモードへの対応

あたりがあります。
同様にUI系ライブラリでNativeBaseもあるんですが、こちらはテーマを使用しようとするとEjectしないといけないので、ちょっとハードルが上がります。
Expoでもテーマ切り替えに対応できるのは良いですね。

あとは、比較的開発が活発でちゃんと更新されている点もあります。
以前はNative Baseを使用していたのですが、どうも更新があまりされていない?ようで最新のReact Nativeと合わせると不具合が出たりします・・・。

https://nativebase.io/

React Native Super Grid

Grid表示をさせるならこちらを使います。

https://github.com/saleel/react-native-super-grid

フォトアルバムみたいな機能を作ろうとすると、どうしてもグリッド表示が必要になるんですが、1から実装しようとするとなかなか大変で、パフォーマンスも出なくなりがちなんですよね。
その点こちらはFlatListやSectionListみたいな使い勝手で簡単です。

あと、地味に使うのがタブレットを意識した場合ですね。
タブレットはどうしても横幅が広くなるので、スマホだと当たり前の縦一列のリストだと見栄えが悪くなります。
そんな時にこれを使うと、スマホだと1列、タブレットだと3〜4列、みたいなことも簡単に実装できます。

react-native-drag-sort

ただのGrid表示ではなく、表示されたものをドラッグで並べ替えたい、と言った場合はこちらを使います。
Gridでもリストでも並べ替えできるので便利ですね。

https://github.com/mochixuan/react-native-drag-sort

ただ、使い方にちょっと癖があるので、あんまり使いたくないです。
とはいえ、他に選択肢があまりないのですが・・・。

react-native-image-progress

https://github.com/oblador/react-native-image-progress

画像表示時の読み込み中表示を良い感じにやってくれます。
アルバム機能+firebase Storageみたいな時に、ダウンロード待ちが発生すると思うのですが、そんな時に良いですね。
大した機能ではないので自分で実装も可能ですが、手間をかけたい機能でもないので使ってます。

react-native-keyboard-accessory

https://github.com/ardaogulcan/react-native-keyboard-accessory

キーボード入力時に、キーボードのすぐ上に「閉じる」ボタンや「次・戻る」ボタンを付けたい時に使います。
特に1行入力では困らないのですが、複数行入力可能なコンポーネントがあった場合、キーボードを閉じる操作が標準キーボードではできないので(iOSの場合)、「閉じる」ボタンがあった方がいいです。

データストア系

mobx & mobx-persist

https://mobx.js.org/README.html
https://github.com/pinqy520/mobx-persist#readme

データストアの有名どころだとReduxだと思いますが、あれはちょっと大袈裟すぎるな、と言う印象なので、今はmobxを使用しています。
Reduxのdispatchだのactionだのって、個人開発だとかったるくてやってられないんですよね・・・。
比較的規模の小さいアプリであれば、mobxがちょうど良い気がします。
永続化もmobx-persistを入れれば勝手にやってくれますので。

ただ、1点気をつけなければいけないのは、mobx-persistを使って手軽に永続化して、アプリの再起動後も前の値を使ったりできるんですが、再起動時の読み出しに一瞬タイムラグがあるようで、読み出される前にstoreを呼び出したらundefinedでエラーになる、とか言うことがあります。
初期化処理の中でstoreを使うようなことがある場合はご注意を。

ちなみに、unstatedと言うのも気になってます。
こちらも軽量なGrobal State管理が可能なようですので、検討されても良いかもしれません。
自分はmobxで必要十分ですので、しばらく使わない予定ですが。

https://github.com/jamiebuilds/unstated

次期バージョンがある模様。

https://github.com/jamiebuilds/unstated-next

SQLite

mobx&mobx-persistは手軽なんですが、データを大量に保存しようとすると遅いです。
なので、ローカルにたくさんデータ保存がしたい場合はSQLiteを使います。

https://docs.expo.io/versions/latest/sdk/sqlite/

mobxかSQLiteか、みたいな二択ではなく、各画面で持ち回るデータ量が増えない設定値みたいなものはmobx、ユーザーが増やすことができるデータはSQLite、みたいな使い分けをすると良いかなと思います。

Cloud Firestore(Firebase)

React Nativeはクロスプラットフォームが売りなので、iOSとandroidでデータを共有したい、みたいなこともあると思います。
そんな時はFirestoreですね。

ちなみにReact Nativeでfirebaseを使おうとするとライブラリが二つあるんですが、Expoの場合はこちらです。

https://docs.expo.io/guides/using-firebase/

以下のものはExpoをEjectしないと使えない・・・と昔読んだ気がするのですが、その後調べてないので不明です。

https://rnfirebase.io/firestore/usage

いずれにせよ、クラウドDB使うなら、Firestoreが便利かなと思います。
AWSはやっぱり個人開発には大袈裟でかったるいのです・・・。

最後に

つらつらと、今後も使っていくだろうなと思うライブラリを書き連ねてみました。
強いてあげませんでしたが、ExpoのDocumentを見るといろいろなライブラリがあるのでその辺も結構使ってます。
ライブラリを探す時はExpo Doc→Googleって感じで探す方が、Expoとの相性に悩まなくて良いので楽です。
ただ、Expoのライブラリは痒いところに手が届かないことも多いので悩ましいです。

上であげたようなライブラリを駆使していくと、車輪の再発明を防いで開発効率もアップできます。
逆に、細かいところで使い勝手が悪く、思った機能が作れない、と言った制約も生まれたりします。

どこまで作らずに実現し、どこからは自分で作り込むのか、と言ったあたりを見極めながら、良い感じにアプリを作っていきたいですね。
「こんなことをしたい時には何使ってる?」などあれば、お気軽にコメントなど下さい。

Discussion

同じくReactNativeで開発しています。
触ったことのないライブラリも多いので大変参考になりました。
一点質問なのですが、画面遷移はどういったライブラリを使用されていますか?

ありがとうございます。
大事なものを書き忘れてましたね・・・。
画面遷移はReact Navigationを使用してます。
バージョン4を使ってましたが、最近すべてのアプリでバージョン5に切り替えました。

返信ありがとうございます。
同じくReact Navigationを使用しています。
やはり画面遷移に関しては頭ひとつ抜き出ていますよね。
※随分前にv3→v4の切り替えに苦労した記憶があるので、自分はまだv5には手を出していませんが・・・

情報も多いですから、現状はReact Navigation一択かな、という感じですね。
自分はv4からしか使っていないので比較はできませんが、v5は定義の仕方などが静的になってとても「React的」だなぁと感じるので、むしろ分かりやすくなったように思います。
TypeScriptの恩恵も受けやすくなっているので、v5はお勧めです。

ただまぁ、v4もしばらくメンテナンス続くようですから、今動いているものをあえてv5に置き換える必要があるかというと、絶対的に必要な理由はないかなぁというところですよね。

ログインするとコメントできます