React Nativeと半年間戦ってわかったコト / What I learned after fighting React Native for half a year

Meguro.es #22 (2019/08/08) at メルカリの発表資料です。

Transcript

1. React Nativeと
 半年戦って分かったコト 2019/08/08 Kota Nonaka @ Meguro.es
2. 自己紹介 • 名前
 野中 滉太(のなか こうた) • 所属
 Fringe81株式会社 
 (2月からインターン/4月に新卒入社) • Twitter
 @mogamin3 • 好きな技術
 TypeScript/React Native
3. 自己紹介 • 名前
 野中 滉太(のなか こうた) • 所属
 Fringe81株式会社 
 (2月からインターン/4月に新卒入社) • Twitter
 @mogamin3 • 好きな技術
 TypeScript/React Native 業務で触ってたら好きになったので布教しにきました
4. 作っているアプリ • 従業員同士が少額の給与と感謝のことばを贈り合う
 「Unipos」のスマホアプリ(Android/iOS) • https://unipos.me/ja • 技術スタック • TypeScript • React Native • Redux • Firebase
5. 戦って感じたメリット4選
6. ①Reactの知識が転用できる • パフォーマンスチューニングの手法 • 状態管理の方法 • コンポーネントの粒度 • Hooksどう使う? この辺に関する知見や悩みはReactでもReact Nativeでも変わらず。
7. ▲つい最近新しくなったReact Native公式サイト
8. マジか？ 結局分岐だらけになるのでは？ ▲つい最近新しくなったReact Native公式サイト
9. マジか？ 結局分岐だらけになるのでは？ ▲つい最近新しくなったReact Native公式サイト 動きや起動が遅いんじゃないの?
10. ②意外とちゃんとクロスプラットフォームだった。 • 疑ってごめんなさい
 ちゃんとクロスプラットフォームでした • 動きも軽快です • (少なくとも弊社アプリは)
 iOS/Android両OS同じコードで動いている • 一部のStyleにおいて Platform.OS を使って微調整したりしてるくらい
11. ③StyleがCSSっぽく書ける! • React NativeはCSSとほぼ同じ感じで画面のレイアウト組みや装飾を行う
 プロパティ名がキャメルケースになったりするくらいの差 import React, { Component } from 'react'; import { View } from 'react-native'; export default class FlexDirectionBasics extends Component { render() { return ( <View style={{flex: 1, flexDirection: 'row'}}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ); } };
12. ④ライブラリもたくさん • ブラウザAPIやNode.js組み込みのライブラリを叩くものでなければ
 npmのJSライブラリが普通に使える • OSネイティブの機能を使いたいときも探すと大体ある
13. 戦って感じたデメリット4選
14. ❶JavaScriptの知識だけでOK…ではない • 基本的に開発中はJSやReact/React Nativeの知識があれば困らない • ただし、ビルドやネイティブの依存ライブラリ管理(CocoaPods/gradle)に 対する知識は必要… • Expoを使うことでこの辺ももしかしたら要らなくなる…?
 (UniposアプリはExpoを使っていないReact Nativeアプリ)
15. ❷React Nativeバージョン追従辛い問題 • React Native本体は結構頻繁にアップデートされる。
 現在の最新は0.60(2019/08/06現在) • まだまだ破壊的な変更が頻繁に起きる。 • 0.57 -> 0.59のアップデートは1日弱かかりました
16. ❷React Nativeバージョン追従辛い問題 • rn-diff-purgeというリポジトリやupdateコマンドを使って
 バージョン間のテンプレート差分を見ながら手修正したりする必要がある
17. ❸OSによって挙動違う問題 • 端末やOS間でたまに同じスタイルなのに表示が違ったりする。 InputにborderRadius & borderColor
 当てるとおかしくなる。 でも、Viewなら大丈夫。 この手のバグはたまにある。アップデートで勝手に直ったりする。 (コントリビュータの方々に感謝)
18. ❹見た目はよしなにしてくれない • Reactは見た目をよしなにするライブラリではない。
 React Nativeも最低限の見た目を制御する方法を提供しているだけ。 • 「サクッとそこそこの見た目のアプリを作りたい」
 みたいな用途には向かない。 • そのへんは多分Flutterの得意分野。 • デザイナがいるからいいものの個人開発だと大変そう…。
19. 1. Reactの知識が転用できる 2. ちゃんとクロスプラットフォーム 3. CSSっぽいStyle 4. ライブラリ充実 1. JavaScript外の知識が必要 2. バージョンアップ辛い 3. OS間の挙動差異など 4. 見た目はよしなにしてくれない メリット デメリット
20. 言いたいコト • 良し悪しは当然ある。
 でも僕はReact Nativeを推したい⚡ • React Native自体の表現力不足で開発を諦めるケースは発生していない • Android/iOSアプリの開発を少人数チームで問題なく開発できている • なにより、Webしかやってこなかった人(僕)が
 すんなりJoinしてやっていけてる
21. ご静聴ありがとうございました