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
420
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
550
20180918_エンジニア学生 x リブセンス Drinkup #2
roana0229
0
410
Other Decks in Programming
See All in Programming
AI Ramen Fight
yusukebe
0
110
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
27
8k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
140
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
190
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
1
370
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
690
コーディングエージェント概観(2025/07)
itsuki_t88
0
130
効率的な開発手段として VRTを活用する
ishkawa
1
180
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Language of Interfaces
destraynor
158
25k
How to train your dragon (web standard)
notwaldorf
96
6.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Faster Mobile Websites
deanohume
308
31k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The World Runs on Bad Software
bkeepers
PRO
70
11k
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 ! 😁