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
DMMオンラインサロンアプリのReactNative→Swift化への道のり
Search
Kaoru Tsutsumishita
December 15, 2021
Programming
0
430
DMMオンラインサロンアプリのReactNative→Swift化への道のり
https://dmm.connpass.com/event/232977/
発表資料
Kaoru Tsutsumishita
December 15, 2021
Tweet
Share
More Decks by Kaoru Tsutsumishita
See All by Kaoru Tsutsumishita
Compose Multiplatform for iOS でiOSアプリを作る - DMM.swift#2
roana0229
0
580
20180918_エンジニア学生 x リブセンス Drinkup #2
roana0229
0
410
Other Decks in Programming
See All in Programming
私の後悔をAWS DMSで解決した話
hiramax
4
210
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
Testing Trophyは叫ばない
toms74209200
0
890
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
Reading Rails 1.0 Source Code
okuramasafumi
0
250
速いWebフレームワークを作る
yusukebe
5
1.7k
はじめてのMaterial3 Expressive
ym223
2
900
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
570
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.6k
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
We Have a Design System, Now What?
morganepeng
53
7.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
KATA
mclloyd
32
14k
Typedesign – Prime Four
hannesfritz
42
2.8k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Cult of Friendly URLs
andyhume
79
6.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Designing for humans not robots
tammielis
253
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Transcript
© DMM.com DMM iOS meetup #2 (2021/12/15) DMMオンラインサロンアプリの ReactNative →
Swift化への道のり 合同会社DMM.com 堤下薫
© DMM.com 堤下薫(つつみん) 合同会社DMM.com CTO室 iOS, ReactNative あたりを主に触っています。 最近触れていないAndroidも ガッツリ触る機会も作っていきたい。
自己紹介
© DMM.com 目次 ・ReactNative を採用した理由 🙆 ・なぜSwift移行する? 🤔 ・フルSwiftへの移行計画とアプリ設計 ✍
・実際に移行を実行してみてどうか 💪
© DMM.com ReactNativeを採用した理由 1
© DMM.com ReactNativeを採用した理由 🙆 DMMオンラインサロンのコミュニティツールを作った当初は フロントエンドエンジニアが主軸に開発、Web,iOSで同じ技術を利用 2
© DMM.com なぜSwiftへ移行する? 3
© DMM.com 現在はiOSネイティブエンジニアが2人で開発を進めていて リッチなことを求めるほどフロント/ iOS 両方のスキルが必要 → 当初は良かったが現在では、デメリットの方が大きくなってきた → さらにReactNativeができる人の採用が難しい
😢 なぜSwift移行する? 🤔 4
© DMM.com なぜSwift移行する? 🤔 もし、ReactNativeで続けるとしても ReactNativeのアップデート + iOSネイティブ周りのアップデート(Xcode, Swift) +
アップデートに追いつかないnpmライブラリの対応 が必要で、iOSエンジニアが本領発揮するのが難しい 😢 5
© DMM.com フルSwiftへの 移行計画とアプリ設計 6
© DMM.com 目的 ・ iOSエンジニアが本領発揮できる状態にする 💪 進め方 ・段階的にSwiftに移行する ・できるだけReactNativeの改修は少なくし、Swiftに置き換える フルSwiftへの移行計画とアプリ設計
✍ 7
© DMM.com まずReactNativeをメインターゲットと別け 1つのモジュールとして動くようにする フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature
(Module) 8
© DMM.com ReactNativeFeatureから Swiftに機能毎に置き換えていく フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature
(Module) ReactNativeBridge (Module) AFeature (Module) BFeature (Module) ・ ・ ・ 9
© DMM.com ReactNativeFeatureで 持つ機能がどんどん小さくなり フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature
(Module) ReactNativeBridge (Module) AFeature (Module) BFeature (Module) ・ ・ ・ 10
© DMM.com ReactNativeFeatureが消え フルSwiftなアプリになる フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) AFeature
(Module) BFeature (Module) ・ ・ ・ CFeature (Module) 11
© DMM.com フルSwiftへの移行計画とアプリ設計 ✍ 12
© DMM.com 実際に移行を 実行してみてどうか 13
© DMM.com ReactNativeのバージョンは0.62.3までアップデートすることで Xcode13.xでも動く状態になっている Xcodeのアップデートが行われると ReactNative + iOSネイティブな機能を持ったnpmライブラリ のアップデートが必要になることが多く、都度対応するしかない 🥺
ライブラリの改修は npm の patch-package を利用して解決 ReactNativeのバージョン 14
© DMM.com リファクタリングならリグレッションテストなどで担保できるが Swift移行はリアーキテクチャのようなもの ReactNativeで書いたテストをSwiftで動作させることはできない🤔 既存のReduxのStoreに流れてくるイベントなどの処理を追い 処理全体を一度シーケンス図に起こす + 主要な機能要件の洗い出し テストがない状態の移行について
15
© DMM.com アプリケーションのステート ReactNative (シングルステート):Swift (各画面でのステート) 画面毎の状態をテストしやすくなったのは良かった 😊 今まではアプリケーション内部で参照できていた値が、 APIを経由して再取得する必要が出てくる箇所があった
😇 変更の少ないと想定されるAPIはレスポンスを 期限付きでキャッシュすることで対応 🕐 16
© DMM.com ReactNativeとSwiftのやりとり この画面はReactNative ドロワーはSwift メニューをタップ RN to Swift トピックをタップ
Swift to RN 17
© DMM.com ReactNativeとSwiftの連携 ReactNativeとSwiftの橋渡しはBridgeModuleが行う ReactNativeから自動的に init() が呼び出される 18
© DMM.com ReactNative → Swift ReactNativeからBridgeにイベントを送信 19
© DMM.com ReactNative → Swift ReactNativeからBridgeのイベント購読で受け取る 20
© DMM.com Swift → ReactNative SwiftからReactNativeへのイベント送信 21
© DMM.com Swift → ReactNative SwiftからBridgeのイベント購読で受け取る 22
© DMM.com ReactNative → Swiftの遷移 先程と同じようなイベントの流れで Swift移行されたFeatureのUIViewControllerをpresentで表示 ReactNativeとSwiftの画面遷移 23
© DMM.com ReactNativeとSwiftの画面遷移 Swift → ReactNativeの遷移 UIViewController.dismiss後にReactNative側でpush遷移するような見慣 れない画面遷移が起こってしまうため、アプリの末端機能から移行 また、1アプリの中でReactNativeを複数インスタンスを起動させると意図し ない動作を起こす可能性がある🙅
24
© DMM.com ReactNativeとSwiftの画面遷移 (再掲) 25
© DMM.com さいごに 26
© DMM.com さいごに Swiftへの移行はまだまだ途中! ReactNativeでうまく実現できなかったところを Swiftネイティブで使いやすく作れてる実感あり👏 (ユーザーからも良くなった声💬も届いてました) ReactNative自体は良いもの ⭕ チームメンバー構成によっては移行は1つの手段として良い選択肢
👌 27
© DMM.com Thank you for listening ! 😁