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
400
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
460
20180918_エンジニア学生 x リブセンス Drinkup #2
roana0229
0
390
Other Decks in Programming
See All in Programming
ML.NETで始める機械学習
ymd65536
0
230
Rubyと自由とAIと
yotii23
6
1.8k
CloudNativePGを布教したい
nnaka2992
0
120
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
340
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
Swift Testingのモチベを上げたい
stoticdev
2
140
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
140
GoとPHPのインターフェイスの違い
shimabox
2
210
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
220
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
930
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Site-Speed That Sticks
csswizardry
4
410
Embracing the Ebb and Flow
colly
84
4.6k
Building an army of robots
kneath
303
45k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Music & Morning Musume
bryan
46
6.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Facilitating Awesome Meetings
lara
53
6.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Statistics for Hackers
jakevdp
797
220k
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 ! 😁