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
570
20180918_エンジニア学生 x リブセンス Drinkup #2
roana0229
0
410
Other Decks in Programming
See All in Programming
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
2
1.2k
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
310
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
250
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Rancher と Terraform
fufuhu
2
200
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
1.4k
Improving my own Ruby thereafter
sisshiki1969
1
150
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
370
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
190
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Docker and Python
trallard
45
3.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Invisible Side of Design
smashingmag
301
51k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Code Review Best Practice
trishagee
70
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Music & Morning Musume
bryan
46
6.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Become a Pro
speakerdeck
PRO
29
5.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
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 ! 😁