The presentation slides at Roppongi.js #6
React Native beyond PrototypeRoppongi.js #6Seiji Takahashi | @__timakin__
View Slide
Seiji Takahashi所属：Gunosy, Inc. メディア事業本部⾔語：Go, JavaScript(React), Swift etctimakin@__timakin____timakin__
ΞδΣϯμʼ3FBDU/BUJWFຊ൪ӡ༻ʹର͢ΔݟํʼͲΜͳػೳͰෆ҆ʹͳΓ͍͔͢ͱɺ֤࣮ํ๏
3FBDU/BUJWFຊ൪ӡ༻ʹର͢Δݟํ@
ʮReact Native͍·ͤΜ͔ʁʯ
React Nativeͷݟํw ϓϩτλΠϓɾݸਓϓϩμΫτʹ͍͍͔͠Εͳ͍͚ͲۀͰʜw 3FBDUͷֶशίετɺϝϯςφϯείετw ωΠςΟϒͰ͔࣮͠ݱͰ͖ͳ͍ػೳ͕ग़͖ͯͨΒʁw ·ͩະख़ͷίϛϡχςΟͰɺϥΠϒϥϦἧͬͯͳ͍ͷͰʁ
気持ちはわかる。 (´･_･`)
?で も A i r b n b と か F a c e b o o k が本 番 採 用 し て た の に 、い ま さ ら プ ロ ト タ イ プ で し か 採 用 で き な い と考 え る の は ち ょ っ と 違 う の で は ？
「プロトタイプ」と本番運⽤の境⽬• 中⻑期的に、ユーザーの要求に応じて柔軟に機能を追加・削除できるか（メンテナンス）• ⼩規模では可能だが、⼤規模・複雑な要件だと開発不可能な機能がないか（技術的な天井）• 学習コストを加味した上で、⼈員追加は容易か（採⽤⾯）
「プロトタイプ」と本番運⽤の境⽬• メンテナンス• React Native⾃体のバージョン上げとかはきついけど、基本問題なし• JSとしてのメンテナンスコストはある。（コンポーネントが細分化されてないとか）• 技術的な天井• リアルタイム通信、ARKitとかそのあたりはネイティブとのブリッジが発⽣してちょっと渋い• 採⽤⾯• ネイティブ経験者なら１週間あればできる（てかそのくらいやりましょう）
「プロトタイプ」と本番運⽤の境⽬• メンテナンス• React Native⾃体のバージョン上げとかはきついけど、基本問題なし• JSとしてのメンテナンスコストはある。 （コンポーネントが細分化されてないとか）• 技術的な天井• リアルタイム通信、ARKitとかそのあたりはネイティブとのブリッジが発⽣してちょっと渋い• 採⽤⾯• ネイティブ経験者なら１週間あればできる（てかそのくらいやりましょう）
ͲΜͳػೳͰෆ҆ʹͳΓ͍͔͢@
本番のプロダクトで必要になってくる要件• UIの機微• プッシュ通知対応• ディープリンク対応• 課⾦処理とか、ちょっと⼀歩踏み込んだ機能は、⼤変なのでは？という不安があった。（結果、⼤丈夫だった。）
前提条件• 開発環境• スタックはTypeScript, MobX• デプロイはFastlane• Expoは動画周りとか課⾦周りとか、ちょっとネイティブモジュール絡んできそうで不安だったので利⽤せず。• スキルセット• もともとSwift経験あり。Kotlinとかは皆無。• Reactは超苦⼿意識あったがなんとかなった。
UIの機微⼤変だった機能はそんなにない。けど、以下は調整が必要なことが多かった。• ナビゲーション表⽰幅のズレ• シャドウ• 画像の⾮同期読み込み• フォーム⼊⼒
ナビゲーションバーAndroidとiPhoneで表⽰域が違う。いつもキモいなと思ってる。
シャドウの調整シャドウを適⽤したい要素に対して、影を表⽰したときのmarginの調整や、iOS⽤にshadowOffset, RadiusAndroid⽤にelevationなど、異なるパラメーターが必要。
画像の⾮同期読み込み絶対やりますよね。読み込み速度を常に早くしたい場合、ImageBackgroundではなく、キャッシュが有効なFastImageを使いたい。が、背景画像として読み込むとき、FastImageだとプレースホルダーの設定に難があったりする。 読み込み完了イベントを元にstateを愚直に切り替える。
愚直なコード
フォーム⼊⼒⽇本語⼊⼒がv0.56.0とかまでバグってて、変換ができなかった。v0.54.0くらいまで落とすか、v0.57.0に上げるかで対応できる。正直これはマジかよという感じ。
プッシュ通知対応react-native-firebase使えば恐ろしく早く実装できる。TokenもFCMTokenで共通化できるし、よほど送信を意図的に遅延したい場合を除いてFCMで送ればよさそう。前までFCMはreact-native-fcmで実装するのがデファクトっぽかったけど、今は公式のreact-native-firebaseで⼗分できる。
復帰時と初期起動時のリスナーは分ける。
ディープリンク対応react-navigationがdeep-linkingの機構を持ってくれてる。参考: https://reactnavigation.org/docs/en/deep-linking.html#docsNavXCode, Android Studioそれぞれでスキーマ設定をした後、トップのStackNavigatorにURLPrefixを指定して、Screenごとにパスを設定すれば、意図したところに⾶べる。
ディープリンク対応す ご く 実 装 が 少 な い 。本 当 に こ れ で い い の か 心 配 に な る 。
課⾦処理定期購読型課⾦だけ実装経験あり。⾊々ライブラリはあるけど、今はreact-native-iapが良い。他のライブラリだと⽚⽅のOSしか対応してない、とかがある。
事前処理起動時にIAPのインスタンスも初期化しておく。購⼊可能なアイテム⼀覧を最初に取得しておかないと、あとでエラーになるのが罠。レシート検証は個別にAPI実装が必要。
購⼊処理buyItemとかbuySubscriptionとか直感的なインターフェースでiOS/Android共にアイテム購⼊ができる。
本番のプロダクトで必要になってくる要件• UIの機微• プッシュ通知対応• ディープリンク対応• 課⾦処理とか、ちょっと⼀歩踏み込んだ機能は、⼤変なのでは？という不安があった。（結果、⼤丈夫だった。）だいたいできたのでは？
·ͱΊʼ͍͍ͩͨຊ൪Ͱෆ҆ʹͳΔΑ͏ͳػೳ֦ு࣮ݱՄೳʼ3FBDU/BUJWFͰදݱՄೳͳػೳΛ͑ͨෳࡶੑʹΜͰΔͷ͔ɺ୯ʹ3FBDU/BUJWFΘ͔ΒΜ͔Β͍ͨͭͯΔͷ͔ɺ͖ͬΓ۠ผ͠·͠ΐ͏ɻʼϓϩτλΠϓͱ͔ͪͬͪΌ͍ΞϓϦͱ͔࡞ͬͯ͠ΐ͏͕ͳ͍ͷͰྗΛݟͤΔͷ͕ྑͦ͞͏ʼӡ༻͋Μ·ਏ͘ͳ্͍ʹ͍͍ͩͨͷΞϓϦͷػೳ࣮ݱՄೳͳͷͰɺϓϩτλΠϓͰ͔͑͠ͳ͍ͱ͍͏ݴઆ͕ྲྀ͢Δͷମແ͍ɻʼӡ༻Մೳͳຊ൪ϨϕϧͷϓϩμΫτΛ࡞ͬͯྗͰݴઆΛΑ͍ͯ͘͘͠ͱྑͦ͞͏ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
timakin
mackey0225
atinfinity
assu_ming
morux2
piyoppi
mipypf
akakou
fbei_ot
okuzawats
ivargrimstad
twada
trapezoid
ddemaree
zenorocha
rasmusluckow
lara
dougneiner
edds
eitanlees
geeforr
malarkey
maltzj
afnizarnur