Slide 1

Slide 1 text

React Native 
 beyond Prototype Roppongi.js #6 Seiji Takahashi | @__timakin__

Slide 2

Slide 2 text

Seiji Takahashi 所属:Gunosy, Inc. メディア事業本部 ⾔語:Go, JavaScript(React), Swift etc timakin @__timakin__ __timakin__

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ΞδΣϯμ ʼ3FBDU/BUJWFຊ൪ӡ༻ʹର͢Δݟํ ʼͲΜͳػೳͰෆ҆ʹͳΓ΍͍͔͢ͱɺ֤࣮૷ํ๏

Slide 6

Slide 6 text

3FBDU/BUJWFຊ൪ӡ༻ʹର͢Δݟํ@

Slide 7

Slide 7 text

ʮReact Native࢖͍·ͤΜ͔ʁʯ

Slide 8

Slide 8 text

React Native΁ͷݟํ w ϓϩτλΠϓɾݸਓϓϩμΫτʹ͸͍͍͔΋͠Εͳ͍͚Ͳ ۀ຿Ͱ͸ʜ w 3FBDUͷֶशίετɺϝϯςφϯείετ w ωΠςΟϒͰ͔࣮͠ݱͰ͖ͳ͍ػೳ͕ग़͖ͯͨΒʁ w ·ͩະ੒ख़ͷίϛϡχςΟͰɺϥΠϒϥϦ΋ἧͬͯͳ͍ͷ Ͱ͸ʁ

Slide 9

Slide 9 text

気持ちはわかる。 (´・_・`)

Slide 10

Slide 10 text

? で も A i r b n b と か F a c e b o o k が 本 番 採 用 し て た の に 、 い ま さ ら プ ロ ト タ イ プ で し か 採 用 で き な い と 考 え る の は ち ょ っ と 違 う の で は ?

Slide 11

Slide 11 text

「プロトタイプ」と本番運⽤の境⽬ • 中⻑期的に、ユーザーの要求に応じて柔軟に機能を追加・ 削除できるか(メンテナンス) • ⼩規模では可能だが、⼤規模・複雑な要件だと開発不可能 な機能がないか(技術的な天井) • 学習コストを加味した上で、⼈員追加は容易か(採⽤⾯)

Slide 12

Slide 12 text

「プロトタイプ」と本番運⽤の境⽬ • メンテナンス • React Native⾃体のバージョン上げとかはきついけど、基本問題なし • JSとしてのメンテナンスコストはある。(コンポーネントが細分化されてな いとか) • 技術的な天井 • リアルタイム通信、ARKitとかそのあたりはネイティブとのブリッジが発⽣し てちょっと渋い • 採⽤⾯ • ネイティブ経験者なら1週間あればできる(てかそのくらいやりましょう)

Slide 13

Slide 13 text

「プロトタイプ」と本番運⽤の境⽬ • メンテナンス • React Native⾃体のバージョン上げとかはきついけど、基本問題なし • JSとしてのメンテナンスコストはある。
 (コンポーネントが細分化されてないとか) • 技術的な天井 • リアルタイム通信、ARKitとかそのあたりはネイティブとのブリッジが発⽣して ちょっと渋い • 採⽤⾯ • ネイティブ経験者なら1週間あればできる(てかそのくらいやりましょう)

Slide 14

Slide 14 text

ͲΜͳػೳͰෆ҆ʹͳΓ΍͍͔͢@

Slide 15

Slide 15 text

本番のプロダクトで必要になってくる要件 • UIの機微 • プッシュ通知対応 • ディープリンク対応 • 課⾦処理 とか、ちょっと⼀歩踏み込んだ機能は、⼤変なのでは?という不安があった。 (結果、⼤丈夫だった。)

Slide 16

Slide 16 text

前提条件 • 開発環境 • スタックはTypeScript, MobX • デプロイはFastlane • Expoは動画周りとか課⾦周りとか、ちょっとネイティブモジュール絡んでき そうで不安だったので利⽤せず。 • スキルセット • もともとSwift経験あり。Kotlinとかは皆無。 • Reactは超苦⼿意識あったがなんとかなった。

Slide 17

Slide 17 text

UIの機微 ⼤変だった機能はそんなにない。 けど、以下は調整が必要なことが多かった。 • ナビゲーション表⽰幅のズレ • シャドウ • 画像の⾮同期読み込み • フォーム⼊⼒

Slide 18

Slide 18 text

ナビゲーションバー AndroidとiPhoneで表⽰域が違う。 いつもキモいなと思ってる。

Slide 19

Slide 19 text

シャドウの調整 シャドウを適⽤したい要素に対して、 影を表⽰したときのmarginの調整や、 iOS⽤にshadowOffset, Radius Android⽤にelevation など、異なるパラメーターが必要。

Slide 20

Slide 20 text

画像の⾮同期読み込み 絶対やりますよね。 読み込み速度を常に早くしたい場合、ImageBackgroundではなく、 キャッシュが有効なFastImageを使いたい。 が、背景画像として読み込むとき、FastImageだと プレースホルダーの設定に難があったりする。 読み込み完了イベントを元にstateを愚直に切り替える。

Slide 21

Slide 21 text

愚直なコード

Slide 22

Slide 22 text

フォーム⼊⼒ ⽇本語⼊⼒がv0.56.0とかまで バグってて、変換ができなかった。 v0.54.0くらいまで落とすか、 v0.57.0に上げるかで対応できる。 正直これはマジかよという感じ。

Slide 23

Slide 23 text

プッシュ通知対応 react-native-firebase使えば恐ろしく早く実装できる。 TokenもFCMTokenで共通化できるし、よほど送信を 意図的に遅延したい場合を除いてFCMで送ればよさそう。 前までFCMはreact-native-fcmで実装するのがデファクトっぽかったけど、 今は公式のreact-native-firebaseで⼗分できる。

Slide 24

Slide 24 text

復帰時と 初期起動時の リスナーは分ける。

Slide 25

Slide 25 text

ディープリンク対応 react-navigationがdeep-linkingの機構を持ってくれてる。 参考: https://reactnavigation.org/docs/en/deep-linking.html#docsNav XCode, Android Studioそれぞれでスキーマ設定をした後、 トップのStackNavigatorにURLPrefixを指定して、 Screenごとにパスを設定すれば、意図したところに⾶べる。

Slide 26

Slide 26 text

ディープリンク対応 す ご く 実 装 が 少 な い 。 本 当 に こ れ で い い の か 心 配 に な る 。

Slide 27

Slide 27 text

課⾦処理 定期購読型課⾦だけ実装経験あり。 ⾊々ライブラリはあるけど、今はreact-native-iapが良い。 他のライブラリだと⽚⽅のOSしか対応してない、とかがある。

Slide 28

Slide 28 text

事前処理 起動時にIAPのインスタンスも 初期化しておく。 購⼊可能なアイテム⼀覧を 最初に取得しておかないと、 あとでエラーになるのが罠。 レシート検証は 個別にAPI実装が必要。

Slide 29

Slide 29 text

購⼊処理 buyItemとか buySubscriptionとか 直感的なインターフェースで iOS/Android共に アイテム購⼊ができる。

Slide 30

Slide 30 text

本番のプロダクトで必要になってくる要件 • UIの機微 • プッシュ通知対応 • ディープリンク対応 • 課⾦処理 とか、ちょっと⼀歩踏み込んだ機能は、⼤変なのでは?という不安があった。 (結果、⼤丈夫だった。) だいたい できたのでは?

Slide 31

Slide 31 text

·ͱΊ ʼ͍͍ͩͨຊ൪Ͱෆ҆ʹͳΔΑ͏ͳػೳ֦ு͸࣮ݱՄೳ ʼ3FBDU/BUJWFͰදݱՄೳͳػೳΛ௒͑ͨෳࡶੑʹ೰ΜͰΔͷ͔ɺ୯ʹ3FBDU/BUJWFΘ ͔ΒΜ͔Β΋͍ͨͭͯΔͷ͔ɺ͸͖ͬΓ۠ผ͠·͠ΐ͏ɻ ʼϓϩτλΠϓͱ͔ͪͬͪΌ͍ΞϓϦͱ͔࡞ͬͯ΋͠ΐ͏͕ͳ͍ͷͰ࿹ྗΛݟͤΔͷ͕ྑͦ͞͏ ʼӡ༻͋Μ·ਏ͘ͳ্͍ʹ͍͍ͩͨͷΞϓϦͷػೳ͸࣮ݱՄೳͳͷͰɺϓϩτλΠϓͰ͔͠ ࢖͑ͳ͍ͱ͍͏ݴઆ͕ྲྀ෍͢Δͷ͸໪ମແ͍ɻ ʼӡ༻Մೳͳຊ൪ϨϕϧͷϓϩμΫτΛ࡞ͬͯ࿹ྗͰݴઆΛΑ͍ͯ͘͘͠ͱྑͦ͞͏ɻ

Slide 32

Slide 32 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ