Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DMMオンラインサロンアプリのReactNative→Swift化への道のり

 DMMオンラインサロンアプリのReactNative→Swift化への道のり

Kaoru Tsutsumishita

December 15, 2021
Tweet

More Decks by Kaoru Tsutsumishita

Other Decks in Programming

Transcript

  1. © DMM.com DMM iOS meetup #2 (2021/12/15) DMMオンラインサロンアプリの ReactNative →

    Swift化への道のり 合同会社DMM.com 堤下薫
  2. © DMM.com 堤下薫(つつみん) 合同会社DMM.com CTO室 iOS, ReactNative あたりを主に触っています。 最近触れていないAndroidも ガッツリ触る機会も作っていきたい。

    自己紹介
  3. © DMM.com 目次 ・ReactNative を採用した理由 🙆 ・なぜSwift移行する? 🤔 ・フルSwiftへの移行計画とアプリ設計 ✍

    ・実際に移行を実行してみてどうか 💪
  4. © DMM.com ReactNativeを採用した理由 1

  5. © DMM.com ReactNativeを採用した理由 🙆 DMMオンラインサロンのコミュニティツールを作った当初は フロントエンドエンジニアが主軸に開発、Web,iOSで同じ技術を利用 2

  6. © DMM.com なぜSwiftへ移行する? 3

  7. © DMM.com 現在はiOSネイティブエンジニアが2人で開発を進めていて リッチなことを求めるほどフロント/ iOS 両方のスキルが必要 → 当初は良かったが現在では、デメリットの方が大きくなってきた → さらにReactNativeができる人の採用が難しい

    😢 なぜSwift移行する? 🤔 4
  8. © DMM.com なぜSwift移行する? 🤔 もし、ReactNativeで続けるとしても ReactNativeのアップデート + iOSネイティブ周りのアップデート(Xcode, Swift) +

    アップデートに追いつかないnpmライブラリの対応 が必要で、iOSエンジニアが本領発揮するのが難しい 😢 5
  9. © DMM.com フルSwiftへの 移行計画とアプリ設計 6

  10. © DMM.com 目的 ・ iOSエンジニアが本領発揮できる状態にする 💪 進め方 ・段階的にSwiftに移行する ・できるだけReactNativeの改修は少なくし、Swiftに置き換える フルSwiftへの移行計画とアプリ設計

    ✍ 7
  11. © DMM.com まずReactNativeをメインターゲットと別け 1つのモジュールとして動くようにする フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature

    (Module) 8
  12. © DMM.com ReactNativeFeatureから Swiftに機能毎に置き換えていく フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature

    (Module) ReactNativeBridge (Module) AFeature (Module) BFeature (Module) ・ ・ ・ 9
  13. © DMM.com ReactNativeFeatureで 持つ機能がどんどん小さくなり フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) ReactNativeFeature

    (Module) ReactNativeBridge (Module) AFeature (Module) BFeature (Module) ・ ・ ・ 10
  14. © DMM.com ReactNativeFeatureが消え フルSwiftなアプリになる フルSwiftへの移行計画とアプリ設計 ✍ App (Main Target) AFeature

    (Module) BFeature (Module) ・ ・ ・ CFeature (Module) 11
  15. © DMM.com フルSwiftへの移行計画とアプリ設計 ✍ 12

  16. © DMM.com 実際に移行を 実行してみてどうか 13

  17. © DMM.com ReactNativeのバージョンは0.62.3までアップデートすることで Xcode13.xでも動く状態になっている Xcodeのアップデートが行われると ReactNative + iOSネイティブな機能を持ったnpmライブラリ のアップデートが必要になることが多く、都度対応するしかない 🥺

    ライブラリの改修は npm の patch-package を利用して解決 ReactNativeのバージョン 14
  18. © DMM.com リファクタリングならリグレッションテストなどで担保できるが Swift移行はリアーキテクチャのようなもの ReactNativeで書いたテストをSwiftで動作させることはできない🤔 既存のReduxのStoreに流れてくるイベントなどの処理を追い 処理全体を一度シーケンス図に起こす + 主要な機能要件の洗い出し テストがない状態の移行について

    15
  19. © DMM.com アプリケーションのステート ReactNative (シングルステート):Swift (各画面でのステート) 画面毎の状態をテストしやすくなったのは良かった 😊 今まではアプリケーション内部で参照できていた値が、 APIを経由して再取得する必要が出てくる箇所があった

    😇 変更の少ないと想定されるAPIはレスポンスを 期限付きでキャッシュすることで対応 🕐 16
  20. © DMM.com ReactNativeとSwiftのやりとり この画面はReactNative ドロワーはSwift メニューをタップ RN to Swift トピックをタップ

    Swift to RN 17
  21. © DMM.com ReactNativeとSwiftの連携 ReactNativeとSwiftの橋渡しはBridgeModuleが行う ReactNativeから自動的に init() が呼び出される 18

  22. © DMM.com ReactNative → Swift ReactNativeからBridgeにイベントを送信 19

  23. © DMM.com ReactNative → Swift ReactNativeからBridgeのイベント購読で受け取る 20

  24. © DMM.com Swift → ReactNative SwiftからReactNativeへのイベント送信 21

  25. © DMM.com Swift → ReactNative SwiftからBridgeのイベント購読で受け取る 22

  26. © DMM.com ReactNative → Swiftの遷移 先程と同じようなイベントの流れで Swift移行されたFeatureのUIViewControllerをpresentで表示 ReactNativeとSwiftの画面遷移 23

  27. © DMM.com ReactNativeとSwiftの画面遷移 Swift → ReactNativeの遷移 UIViewController.dismiss後にReactNative側でpush遷移するような見慣 れない画面遷移が起こってしまうため、アプリの末端機能から移行 また、1アプリの中でReactNativeを複数インスタンスを起動させると意図し ない動作を起こす可能性がある🙅

    24
  28. © DMM.com ReactNativeとSwiftの画面遷移 (再掲) 25

  29. © DMM.com さいごに 26

  30. © DMM.com さいごに Swiftへの移行はまだまだ途中! ReactNativeでうまく実現できなかったところを Swiftネイティブで使いやすく作れてる実感あり👏 (ユーザーからも良くなった声💬も届いてました) ReactNative自体は良いもの ⭕ チームメンバー構成によっては移行は1つの手段として良い選択肢

    👌 27
  31. © DMM.com Thank you for listening ! 😁