150
136

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

react-native初学者が学習を始める前に知っておくべき6のtips

Last updated at Posted at 2017-12-21

alt

##1 Expoとreact-native-cliの正しい選択。

まず2つの違いは簡易版か、本格版かということ。
Expoは環境構築にかかる時間がほぼゼロで、エミュレーターをPCにインストールすることなくスマホにExpoというアプリをインストールするだけで開発を開始できる。しかもreact-nativeの機能を全て使える。パフォーマンスも悪くない。
初学者が触るならこれだ。
しかし、jsのみで開発をしなければならないという制約があり、使用できるプラグインに大きな制限がかかる。が、通常のアプリではExpoで十分!特にスタートアップは、Expo一択。
react-native-cliを使うのは出来れば止めよう。非常にライブラリが壊れやすい。
しかし、ios、androidのライブラリが使えるので手触り感を重視する場合はcliを使ってもいい。

結論 Expoで開発しよう。Expoで必要十分。cliで開発するとネイティブの機能を制限なしに使えるが、cliはxcodeを頻繁に触る必要がある。
expoは証明書を用意する必要なく、プッシュ通知も、コードプッシュもデフォルトでついてくるので、まず、expoから業務で使い始めることを強くお薦めする。

##2 IDE

割りと色々ある。が、atomにnucluidプラグインを入れる以外の選択肢はない。
facebook公式IDEであり、機能が増えていくし、メンテナンスもされ、最新のreact-nativeにももちろんfacebookが対応してくれる。
と思って使い初めたが、結論から言うとめっちゃゴミだった。使いにくい、重い、バグが多い。の三重苦。

結局軽くて、typescript, flowと相性抜群なvscodeに落ち着いた。デバッグはreact-native-debuggerではなく、chromeのdevtoolを使用する。chromeの標準機能で、ブレークポイントを設定出来、debuggerとコード内に記述することで コードがストップする。

react nativeはエラー表示が難解なので、pritterというコード自動整形プラグインも必須。

2018年でjsを書く人の1/2はvscodeを使っているそうです。事実軽いし、機能も豊富です。

結論 vscodeかjetBrain社のide.オススメはvscode.

##3 navigation 画面の切り替えについて

今は公式がオススメしている react navigationで一択だろう。若干扱いづらさを感じることもあるが、情報量が桁違いに多く、何と言ってもメンテナンスが止まることがない。Expoが公式で採用しているのもポイント
何よりも素晴らしいのがjsだけで構築されたライブラリだということ。他のライブラリと違い、objective-cやjavaで書かれた箇所がない。

react-native-router-fluxというゴミを使うのはやめよう。(単純に情報量が少ない)

RNAF = お手軽、記述量多い(複雑なことは出来ない)
react navigation = 大規模向け(公式推し)

結論 まあreact navigationを使っておけば間違いがない。

##4 デザイン

デザインはnativeBaseを使うのがお手軽。bootstrapとほぼ思想が一緒で、webからの人は、一番ラクに開発できる。むしろreact-nativeよりnativeBaseの機能を使ったほうが開発が早い。オープンソースなのもポイントが高い。
リストを使うと、デザインが崩れてしまう時があるので、その時はreact-nativeのScrollViewを使うといい。
ただリストが微妙なので、リストは使わない。ラジオボタンも微妙なので使わない。

似た様なものとしては、準公式が開発する、react-native-elementがある。デザインのライブラリではreact-nativeのプラグインの中で頭一つ抜けて良い。拡張しやすく、elementの名の通り、ワンポイントだけ使いたいという時に優れている。

UIライブラリはまだまだ品質が低いので、react nativeに慣れた人ほど、UIライブラリは使わなくなる傾向がある。

##5 Redux必要ない
react naitveは小規模アプリやプロトタイプ制作に使われることが多く、reduxは大規模向けなので適していない。
unstatedという、とても実践的で、シンプルなライブラリがあるので、これを強くオススメする。
超軽量state管理ライブラリで、テストもしやすい。
また、context Apiというreact 公式のstate管理のやり方もあり、こちらはさらにシンプルで学習コストが低い。
小規模なアプリを爆速で開発する。これがreact nativeの強みだ。
そのため、スケールはしやすいが、プロトタイプの完成が遅くなるreduxは適していない。

ただ、reduxとreact nativeの相性は抜群なので、redux経験者はreduxを使った方が開発は早い。
おそらく個人開発ではreduxは必要ないのでお気軽にreact native入門しちゃいましょうー

##6 react-nativeへの幻想

開発速度は早い。

が、androidとios両方書けるから開発速度が二倍だーやったーと思うのは早計だ。
片方のみのOSで発生するバグ、プラグインの不安定さ、情報量の少なさ、頻繁なreact-nativeバージョンアップの手間がある。結局、周辺機能が揃ってない。(flutterとか、ionicとかと比べると最高に揃ってるけど)

二週間に一度のバージョンアップなど、キャッチアップは大変だ。
更に学習コストがとてもとても高い。多分今一番学習に時間が掛かるフレームワークだ。
react + redux + ios + android + react-native
どの知識も必要になるし、プロジェクトによってはフロントエンドの技術(関数型プログラミングとかtypescriptとか)が必要になる。

ただ、react出身者はすぐに馴染める。(テストツール、デバックツール、ES6とreactは共通のため。)
つまり、react習熟者ならvue.jsを学ぶよりReactNativeを学習する方が、学習コストは低い。
axios, redux-saga, three.jsなど、reactで使えるものの全てがreact nativeで使える。
最初からjs in cssだし、babelやwebpackから解放される。特にbabelをいほぼじらなくて良いのは大きい。
エディターも今まで使っていたのでいいし、デバッガもchromeを使っている人はそのまま持ち越せる。デザインパターンも設計の仕方もreactそのものだ。テストはjestやchaiで書ける。cliコマンドですら、reactそのままだ。

react経験者ならReactNtiveはほぼ学習コストなしに習得出来る

声を大にして言いたい。
react-nativeは最高だ。
誰よりも愛してる。
react-native今年のクリスマスは君と過ごす。

えっっ???

150
136
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
150
136

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?