JavaScript
reactnative
expo

React Nativeの実は使ってはダメなライブラリ素晴らしいライブラリ(随時更新)

alt


ダメなライブラリ。


redux

reduxはstate管理の素晴らしいライブラリだ。

世界で一番愛用され、情報量も多く、大規模システムに向いている。

しかし、react nativeを採用するのはほとんどがスタートアップだ。

学習コストが高い+プロトタイプ開発スピードが遅いのでreduxはスタートアップにははっきり適さない。

reduxの代わりにunstatedを使おう。Expo+unstated+react-native-router-flux+web版のfirebaseがスタートアップでの最適解だと思う。


react-native-cli

cliでなくExpoを使おう。cliはライブラリのアップデートの際に莫大な手間がかかる。要するにnativeライブラリのメンテナンスに手間がかかりすぎるので、Expoをオススメする。(スタートアップでは特に)私はcliもexpoも現在実務で使っているが、体感expoのが1.5倍早く開発出来る。androidやios経験がない人は、expoを選択


cocoapod

iosのライブラリ管理ツール。

何があっても使うべきではない。公式や、有名ライブラリが使うのを推奨している。

しかし何があっても使ってはならない。代わりにreact-native linkを使おう。

cocoapodを使っていると、依存関係が増えてビルドの時に地獄を見ることになる。

これは個人的な意見だが、ライブラリ管理はreact-nativeのやり方で行なうべきであり、iosのやり方で行うのはよくないと感じる。

facebook公式のreact naitve linkの記事を読もう。15分ぐらいでcocoapodを使わないiosのライブラリ管理の仕方がわかるはずだ。

https://qiita.com/loverails/items/7c68520500e1ea334ce8


AsyncStorage

react native標準のkey valueデータベース。

公式はなぜかこのライブラリを推しているが、このライブラリには、致命的な欠点がある。

それは、stringしか保存できないこと。つまり、boolean, integer, arrayなどを保存しようとすると、自分でstringに変換するラッパーを書くことになる。

なので大抵の場合、react-native-storageまたはRealm-jsを使った方が幸せになれる。

単純なものには、recat-nativeーstorage

クエリが必要ならrealm-jsがおすすめ(ただしreact-native linkが必要)。


react-native-firebase

firebaseの準公式のreact native対応SDK

絶対に使うことになるが、絶対に使いたくないライブラリの一つ。

なにもかもが壊れやすく、地獄の苦しみを与えてくる。

私の作業時間の1/7はこのライブラリのみにとられている気がする。

極力firebaseに依存しない作りにしたい。

逆に、node.js向けfirebaseはとても使いやすく、壊れにくい。

パフォーマンスはreact-native-firebaseより若干悪いが、node向けfirebaseを使うことを強くお薦めする。analyticsが使えないこと以外は実用レベル。

node向けfirebaseは依存関係が、firebaseSDK, react-nativeの二種類だが、react-native-firebaseは依存関係が、firebaseSDK, ios, android, react-nativeの四種類だ。単純に考えると、バージョンアップの時にreact-native-firebaseはnode向けfirebaseの二倍壊れやすい。


react-native-router-flux

お手軽さが人気のルーティングライブラリ。

様々な独自ルールがあり、ドキュメントが充実していないためハマりやすい。

何より、ルーティングをJSXで管理するためコードが肥大化しやすい。

が、小規模なら割と適していて、ルーティングライブラリの中でアニメーションは一番好き。

公式のドキュメントが貧弱なことを除けば実務で全然使える。

react-navigationのがいいけど。

JSXでルーティングを記述するといえば、冗長さが伝わるだろうか?


yarn

なぜかnpmだと動いて、yarnだと動かないなどがある。

全てのライブラリはyarnよりnpmを重視している。不安定なライブラリが多いreact nativeでyarnを使うと、ハマりやすい。npmは安定感がある。npm ciもあり、速度は昔ほど気にならない。

...正直チームで統一されていればどっちでもいい。


react-native-fcm

お手軽にfcmを実装する。

単純にライブラリの品質が低い。が、expoを使っているとこれを使う羽目になる。

react-native-firebaseと言う、使い方が一緒で安定感のあるライブラリを使おう。


atom

エディタ

遅い。とにかく遅い。

性能はいい。しかし、勉強会に来るReactNativeを書く人の7割はvscodeを使っている。

nuclideは正直言ってゴミ。(使い込まなかったが)


light table

超軽量エディタ。

インラインコード評価。chromeのdeveloppertoolが標準で使えるなど、vscodeより(低機能、だが動作がめちゃくちゃ軽い。)

ただ、足りない機能もある。(複雑な検索など)私はあんなに愛していたvscodeから乗り換えた。

reactには対応しているがreact nativeには対応していない。辛すぎる。

結局vscodeに戻った。


fetch

httpライブラリ

基本的にゴミなのでaxiosなどを使う。

これ以上ないぐらい使い勝手が悪いが、react nativeのチュートリアルではよく見かける。


react-native-vector-icon

かなりバグりやすい。いつもなんらかのバグを抱えている。しかし、他のライブラリにとてもよく使われるため、必ず使うことになるライブラリの一つ。小規模開発なら使わないことを検討したいが、無理そう。

問題が発生したらissueを見る。世界中の悲鳴がそこには書き込まれている。


vscodeのdebugger

vsceodeにはreact-native-toolsというエクステンションがあり、その中の機能のdebuggerは、

単純に、重い、安定しない、使いにくいの三重苦。しかし、多くのエンジニアがこれを使うことを推奨している。(機能は素晴らしいが、debuggerとしては重すぎる。)正真正銘の使えないデバッガ

chrome-devtoolを使おう。


react-native-debugger

React Nativeの一番有名なデバッガ。設定がいらず、お手軽にデバッグ出来る。が、出来ることはchromeのdev toolと全く同じ。chromeの方が軽いので、react-native-debuggerを使うのはやめよう。


react-native-device-info

react-native-vector-iconほどではないが、エラーの元。Dimensionを使い、縦横比で、機種を特定できないか試してみよう。しかし、大抵の場合はこのライブラリを入れる必要がある。


react-native-rename

プロジェクト名をrenameしてくれるcli。結論から言うと、全部手動でやったほうが早い。ゴミ。


react-native-motion

マテリアルデザインのTransitionライブラリ。

Flutterとかで使われるにゅっとしたアニメーションが可能に。

ただ、このライブラリは、react-navigationと使えないので産業廃棄物

react-navigation-fluid-transitionsというドキュメントが充実していて、react-navigationと一緒に使えるライブラリを使おう。


素晴らしいライブラリ


UI


react-native-responsive-screen

レスポンシブデザインを導入する。

レスポンシブなcssが書けるようになるライブラリ。実はiosとandroidで、1ピクセルの差異があり、どうしてもデザインが崩れてしまう。

上記の理由から

width: width * 0.5

という書き方をしてもどうしてもデザインが崩れる。

だが、このライブラリを使うと、1ソースで、全く同じ見た目のUIが作れるようになる。1ピクセルにこだわるデザイナーがいる場合は、必須ライブラリ。


native base

最も有名なUIライブラリ。デザインは悪くないと見せかけて、ラジオボタンなどがとてもダサい。

コードが著しく汚染され、独自のgridシステムであるright,leftと言うJSXタグが使いづらい。

が、bootstrapと似ているのでweb出身の人はとても使いやすく、ドキュメントもとても充実している。

しかし、問題が起こることも多く、おすすめ出来ない。(特にリスト周り)

要するに独自gridシステムのせいでボタンを一個つけるだけでも

<Container style={{backgroundColor: 'transparent'}}>

<Content style={{backgroundColor: 'transparent'}}>
<Button title="hello world" />
</Content>
</Container>

のようになってしまいがち。ただし小規模の開発にはとてもとても適していて、情報量も多い。


react-native-elements

素晴らしいUIライブラリ。

react-native-trainingと言うReactNative最大コミュニティが作っている。

そのシンプルさとelementsと言う名の通り、ちょっとだけUIライブラリを使いたいと言う時にとても重宝する。

エンジニア向けに作られていて、カスタマイズすることを前提に作られているためデザインはシンプル。

native baseよりスターが多い。


shoutem

素晴らしいUIライブラリだが割と知名度がない。シンプルでおしゃれなUIが簡単に出来る。新しいアプリを作る時はぜひ使ってみよう。画像を大量に見せるアプリと相性が良さそう。逆にボタンとかが多いと相性が悪そう。


react-native-paper

マテリアルデザインのライブラリ。expo snack標準搭載。

react nativeでmaterial designを実装するにはこれ一択。

なぜならreact naitve linkしないで使える唯一のmaterial designライブラリだから(泣)

フッターはとても素晴らしい。

...フッターだけが素晴らしい。そもそもreact nativeでmaterial designは早いかもしれない。

追記 時が経ち、かなり使いやすいです。マテリアルデザインを使う時はこれを使いたい(使うしかない?) ただ、若干native base, react-native-elementと比べるとデザインが残念だし使いづらい。

例えば、ヘッダーにタイトル以外の文字列が入れられない。フォームをタップした後他の箇所をタップしてもフォームが選択されたままになる。など細かいバグも多い。(使い勝手はかなり悪いがlinkせずにすむmaterial designのライブラリがこれしかない)


react-native-material-ripple

materialデザインのタップアニメーションを実装

react-native-paperのTouchableRippleはゴミなのでこちらを使う。


react-native-animatable

とにかくお手軽にanimationを実装するときはこれ。お手軽なので性能もそこそこと思いきや、かなり複雑なアニメーションを作れる。学習コストはかなり低く、アニメーションの動作は素晴らしい。

react-native make it rainで検索するとそのすごさが分かる。


react-native-modal

モーダルを実装する。

ReactNativeTrainingが作っている。

標準のmodalと使い方が一緒だが、こちらのが表示速度が早い。

安定感もあり、標準のモーダルを使うくらいならこのライブラリでモーダルを作りたい。

react-native-animatableを内部利用しているので、ゴリゴリのアニメーションも出来る。


デバッガ


reactotron

設定が複雑と言うことを除けば最高のデバッグツール。

実機テストや、sagaなどライブラリを追加するごとに設定が必要になるが、

やはり使いやすく、開発速度が上がる。


chromeのdeveloper tool

React Nativeの標準debugger。よはり使いやすい。web出身の人は、変にサードパーティーのdebuggerを使わずにこれ一つでいいと思う。

どのデバッガより軽くて、性能がいい。最近react-native-debuggerから乗り換えた。


周辺ツール


Prettier

コード自動成形ツール

vscodeにいれて使う。

これがあればeslintがいらなくなる。

standard版もあり、学習コスト0なので即導入したい。


vscode

microssoft製エディタ

typeScript/Flowと相性がいいので、js忍者ならこのエディタ。

なのでReactNativerも必然的にvscodeを使い始める。

Flowかtypescriptみんな使うでしょw


fastlane

react-nativeでも証明書は必要になる。


state管理


unstated

超軽量state管理ライブラリ。学習コストめちゃくちゃ低い。

2019年のstate管理はこれだ。

 わずか 200行で書かれたreact context APiの薄い拡張だ。

テストもしやすくベテランエンジニアにこそオススメしたい。

欠点は HOCを使わないとcomponentDidmoutなどでstate管理が行えないこと。

後redux-persistの代わりのunstated-persistが性能が悪いので、素のAsyncStorageを使う必要があること。


mobx

state管理のnpmライブラリ

まあ、使いたいならどうぞ。パフォーマンスはreduxよりいい。


データベース


react-native-storage

react-native公式のAsyncStorageの薄いラッパー

多分、2019年で、react-nativeでのデータベースのデファクタスタンダード

AsyncStorageは扱いにくいことで有名。(number、配列、objectは保存できず、文字列のみ保存できるなど)

ちょっと大きいデータを保存するときは、react-native-storageを使おう。

androidとiosに対応しているのがポイント


必須ライブラリ


Expo

OSS化されたことで大幅に性能が向上した。基本的にexpoを使った方がいい。

ただejectの壁が辛すぎる。

現時点ではflutterの上位互換。

大規模でも行けるか?というとこまで来ている。


react-navigation

facebookおすすめのルーティングライブラリ。低レベルなvavigationライブラリ。react色が強く学習コストが高い。

とにかく公式の情報が豊富。(ios Xの対応について既に公式ドキュメントがある!)

堅牢で、reduxと使いやすいので大規模に向いている。

迷ったらコレ。ただRNRFも悪くない。(小規模なら)

大規模向け。小規模開発でこれを使う意味はない。(だいぶ癖がある。)

例えば、Container の中のcomponentの中で、navigationしたい時は、navigate propsをcontainerからcomponentに渡さないとnavigate出来ないなど。

jsだけで書かれておりnativeコードを一切使っていないのもポイント


axios

http通信ライブラリ

http通信を「よきにはからえ」してくれる。正直使わない理由はない。reactotronの作者が作った拡張番のapisauceもおすすめ


genymotion

軽量androidエミュレータ

expo公式がオススメしている。android studio付属のエミュレータはゴミすぎるのでさっさと乗り換えよう。とにかく軽い。


flow language Support

vscodeのflowのextension。

stgingの掛け算など、ちょっとした間違いをエディタ上で表示してくれる。

// @flow

と書かなくても動作するのが気に入っている。

型の定義をcode上で書かなくてもOcamelのように型推論してくれるので、入れておいて特に損はない。

型を書いていないプロジェクトでこそ使うべき。


テスト


jest

テストツール

react nativeに標準で付いてくる。snapshotテストは革命。テストにかけるコストを大きく減らすことができる。ただ別のテストツールになれている人は、わざわざ乗り換えるほどでもないかも。

正直react nativeのviewのテストは、メンテナンスコストと学習コストが高く辛い。

私はビジネスロジックの単体テストとapiのスナップショットテストのみ行なっている。

apiのスナップショットテストはとても便利。以下の記事が参考になる。

https://daveceddia.com/snapshot-testing-apis-with-jest/

オススメはtoJsonではなく、JSON.stringifyを使うこと。JSONをワンライナーでスナップショットとして保存してくれる。

最近はexpoに標準で付属してくるのでテストはjestを使っておけば間違いがない。

ただ、react-native-cliを使うなら、jestのセットアップは大変なので、avaを使って楽したい。


ava

セットアップがいらないtestツール。

jestって、セットアップ難しいよね。avaは標準でbabel7に対応しているのでsetupなしにテストを書き始められる。

シンプル、高速、学習コストが低いと三拍子揃っている。

jestほど高機能ではないが、必要十分。

小規模アプリならjestよりavaの方がはっきり適している。

jestは捨ててavaを使おう。