Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native Beyond Prototype
Search
Seiji Takahashi
September 18, 2018
Programming
2
1.7k
React Native Beyond Prototype
The presentation slides at Roppongi.js #6
Seiji Takahashi
September 18, 2018
Tweet
Share
More Decks by Seiji Takahashi
See All by Seiji Takahashi
Go Backends for frontends with GraphQL and gRPC
timakin
6
4.1k
Design Pattern for Image and Text Composition in Go
timakin
5
6.7k
Golang API Testing the HARD way
timakin
13
6.7k
Head First Golang Image Package
timakin
2
10k
Performance Optimization on Google AppEngine
timakin
5
6.4k
testcache.pdf
timakin
1
160
How Go cache
timakin
1
97
How Go cache tests
timakin
1
3.2k
A/Bテスト機構がもたらす 大胆な開発体制及び ゆるやかなアプリ体験の変化 / Architecture and benefits of AB-test allocation system.
timakin
4
7.8k
Other Decks in Programming
See All in Programming
dynamic!
moro
9
4.9k
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
deka_morita
0
200
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.2k
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.2k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
140
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
850
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
550
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
420
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
71
11k
Building Applications with DynamoDB
mza
96
6.6k
Thoughts on Productivity
jonyablonski
70
4.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Become a Pro
speakerdeck
PRO
29
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Code Reviewing Like a Champion
maltzj
525
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
How GitHub (no longer) Works
holman
315
140k
Transcript
React Native beyond Prototype Roppongi.js #6 Seiji Takahashi |
@__timakin__
Seiji Takahashi 所属:Gunosy, Inc. メディア事業本部 ⾔語:Go, JavaScript(React), Swift etc timakin
@__timakin__ __timakin__
None
None
ΞδΣϯμ ʼ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とかそのあたりはネイティブとのブリッジが発⽣し てちょっと渋い • 採⽤⾯ • ネイティブ経験者なら1週間あればできる(てかそのくらいやりましょう)
「プロトタイプ」と本番運⽤の境⽬ • メンテナンス • React Native⾃体のバージョン上げとかはきついけど、基本問題なし • JSとしてのメンテナンスコストはある。 (コンポーネントが細分化されてないとか) •
技術的な天井 • リアルタイム通信、ARKitとかそのあたりはネイティブとのブリッジが発⽣して ちょっと渋い • 採⽤⾯ • ネイティブ経験者なら1週間あればできる(てかそのくらいやりましょう)
ͲΜͳػೳͰෆ҆ʹͳΓ͍͔͢@
本番のプロダクトで必要になってくる要件 • UIの機微 • プッシュ通知対応 • ディープリンク対応 • 課⾦処理 とか、ちょっと⼀歩踏み込んだ機能は、⼤変なのでは?という不安があった。
(結果、⼤丈夫だった。)
前提条件 • 開発環境 • スタックはTypeScript, MobX • デプロイはFastlane • Expoは動画周りとか課⾦周りとか、ちょっとネイティブモジュール絡んでき
そうで不安だったので利⽤せず。 • スキルセット • もともとSwift経験あり。Kotlinとかは皆無。 • Reactは超苦⼿意識あったがなんとかなった。
UIの機微 ⼤変だった機能はそんなにない。 けど、以下は調整が必要なことが多かった。 • ナビゲーション表⽰幅のズレ • シャドウ • 画像の⾮同期読み込み •
フォーム⼊⼒
ナビゲーションバー AndroidとiPhoneで表⽰域が違う。 いつもキモいなと思ってる。
シャドウの調整 シャドウを適⽤したい要素に対して、 影を表⽰したときのmarginの調整や、 iOS⽤にshadowOffset, Radius Android⽤に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#docsNav XCode, Android Studioそれぞれでスキーマ設定をした後、 トップのStackNavigatorにURLPrefixを指定して、 Screenごとにパスを設定すれば、意図したところに⾶べる。
ディープリンク対応 す ご く 実 装 が 少 な い
。 本 当 に こ れ で い い の か 心 配 に な る 。
課⾦処理 定期購読型課⾦だけ実装経験あり。 ⾊々ライブラリはあるけど、今はreact-native-iapが良い。 他のライブラリだと⽚⽅のOSしか対応してない、とかがある。
事前処理 起動時にIAPのインスタンスも 初期化しておく。 購⼊可能なアイテム⼀覧を 最初に取得しておかないと、 あとでエラーになるのが罠。 レシート検証は 個別にAPI実装が必要。
購⼊処理 buyItemとか buySubscriptionとか 直感的なインターフェースで iOS/Android共に アイテム購⼊ができる。
本番のプロダクトで必要になってくる要件 • UIの機微 • プッシュ通知対応 • ディープリンク対応 • 課⾦処理 とか、ちょっと⼀歩踏み込んだ機能は、⼤変なのでは?という不安があった。
(結果、⼤丈夫だった。) だいたい できたのでは?
·ͱΊ ʼ͍͍ͩͨຊ൪Ͱෆ҆ʹͳΔΑ͏ͳػೳ֦ு࣮ݱՄೳ ʼ3FBDU/BUJWFͰදݱՄೳͳػೳΛ͑ͨෳࡶੑʹΜͰΔͷ͔ɺ୯ʹ3FBDU/BUJWFΘ ͔ΒΜ͔Β͍ͨͭͯΔͷ͔ɺ͖ͬΓ۠ผ͠·͠ΐ͏ɻ ʼϓϩτλΠϓͱ͔ͪͬͪΌ͍ΞϓϦͱ͔࡞ͬͯ͠ΐ͏͕ͳ͍ͷͰྗΛݟͤΔͷ͕ྑͦ͞͏ ʼӡ༻͋Μ·ਏ͘ͳ্͍ʹ͍͍ͩͨͷΞϓϦͷػೳ࣮ݱՄೳͳͷͰɺϓϩτλΠϓͰ͔͠ ͑ͳ͍ͱ͍͏ݴઆ͕ྲྀ͢Δͷମແ͍ɻ ʼӡ༻Մೳͳຊ൪ϨϕϧͷϓϩμΫτΛ࡞ͬͯྗͰݴઆΛΑ͍ͯ͘͘͠ͱྑͦ͞͏ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ