雑にReactNative触ってみた感想

Native開発しかしたことがない人がReactNativeに触ってみた感想です。

話すこと

AndroidiOSといったNative開発しかしていない人が、ReactNativeを触ってみた感想、いわゆる First Impression をAndroid, iOSそれぞれと比較しながら雑に話します。

しっかりしたものが読みたい方は、きりみんさんの記事を参考にしてください。

medium.com

ちなみに作ったものはGithubに上げているので、見ていただけるとありがたいです。

github.com

Screen

Deck Swipe Chat

良いと思った点

画面とその他のViewとの違いがなく楽

AndroidだとActivity, FragmentiOSだとUIViewControllerといった様な、画面全体とその他のViewが区切られておらず、

画面全体もその他のViewもComponentという単位で考えるため学ぶことが少なくて楽。

とりあえず、render()にレイアウトをぶち込めば描画してくれる。

ListViewをReact Nativeで作ってみるとView関連は以下の様になる。

簡単。onCreateViewHolder()でViewをinflateしたりだとか、func tableView(_: ,cellForRowAt:)とかでtableView.dequeue()とかしなくて良い。

XMLに似たレイアウトを記述したものをreturnするだけ。

また、view.setOnClickListenerとかaddTarget(), addGestureRecognizer()とかしないで良い。

クリックイベントを発生させたいものを<TouchableOpacity></>で囲んで関数を渡すだけ。

学習コストが低い、簡単に作れる

上で述べたものとかぶるが、学習コストがかなり低い。

公式のチュートリアルを進めていくだけで、なんとなく実装できる。

facebook.github.io

今回作ったものは、ライブラリのExampleをコピペしたものを組み合わせただけで大した事はしていないが、それでも1日とそこらでこれくらいのものを作れるのはすごいと思った。

JavaScript未経験、React Native未経験でReact Nativeのタスクを振られたときは厳しいと思ったが、

割とすぐに画面ができて楽しかった。

ビルドが早い

Web系の特徴でもあるが、ビルドがとにかく早い。

Android, iOSだとビルド時間が1分以上かかることがざらにあるが、React Nativeだと10秒待つ方が少ないくらい。

ノンストレスで開発ができるのはとても良いことだと思う。

良くないなと思った点

UIパーツの実装方法が多すぎる

Viewのライブラリが豊富で嬉しいと思う反面、ListView使いたいんだけど...と調べると結構な種類が出てくる。

「どれが今使うのに適しているか」と考えて様々なライブラリを巡って、実装の仕方を調べるのは少し億劫になる。

遷移がやや面倒

遷移について考えると、

AndroidだとIntentを使う。iOSだとNavigationControllerpushpresentを使う。

となるが、React Nativeだとそうはいかない。

遷移にも様々なライブラリがあり、実装の仕方も人によりけりな所がある。

今回はList画面からChat画面に遷移するときに、Tabを無くしたかったのだが、その遷移を実装するのに手間取った。

結果、新しい画面を生やす(iOSでいうpresent)のではなく、スタックした画面を作って(iOSでいうpush)、遷移の際にTabを非表示とする形になった。

それぞれのOSでの表示崩れ

UIのライブラリを使ったときに、『iOSでは上手く表示されているのにAndroidでは上手く表示されない』ということがあった。

また、Android Oreoでは表示崩れを起こしているのに、Android Pieでは綺麗に表示されたりもした。

これはクロスプラットフォームで開発する際には必ず起こる問題だと思う。

綺麗に映すにはNativeでの開発が結局良いと思われる。

終わりに

軽いものや、今後長く使わない、アプリが大きくなる予定がないものであれば、React Nativeはとても良い選択だと思う。

しかし、デザインがしっかりと決まっていてAndroid, iOSそれぞれちゃんと描画しないといけないとなると、まだまだ厳しいと思われる。

やはり、用途に合わせてNative, React Nativeと切り替えていくのが良いと感じた。