独自のアーキテクチャとSwiftUI×Swift Concurrencyへのリファクタリングのリアル

独⾃のアーキテクチャと SwiftUI×Swift Concurrencyへの リファクタリングのリアル ウェルスナビ株式会社 深来 ⽇菜 リファクタリングで解決するモバイルアプリ開発のリアル 1

⾃⼰紹介 深来 日菜 （Fukagi Hina）~ひなっこ ~ ウェルスナビ株式会社 サービス機能開発 / iOS エンジニア ウェルスナビでは ● 2025年3⽉⼊社 ● WNのモバイルアプリ開発・テックブログ運営 ひとこと ● ウェルスナビに入社する前は銀行で営業をしていました！ 2 @2025 WealthNavi Inc.

資産運用ロボアドバイザー 「 WealthNavi 」 3 ※ ⼀般社団法⼈⽇本投資顧問業協会「契約資産状況（最新版）（2024年9⽉末現在） 『ラップ業務』『投資⼀任業』」を基にネット専業業者を⽐較 ウエルスアドバイザー 社調べ（2024年12⽉時点） ※ 画⾯はイメージです。

アジェンダ 1. 独自のアーキテクチャについて 2. SwiftUI × Swift Concurrencyへのリファクタリング 3. 新メンバーでも開発しやすいような工夫 4. まとめ 4 @2025 WealthNavi Inc.

1. 独自のアーキテクチャについて 2. SwiftUI × Swift Concurrencyへのリファクタリング 3. 新メンバーでも開発しやすいような工夫 4. まとめ 5 @2025 WealthNavi Inc.

アプリアーキテクチャの背景 <課題> 複数の画⾯ごとにアーキテクチャがバラバラ → メンテナンスコスト増加 → 新メンバーの学習コスト増加 → コードの可読性低下 MVP Clean Architecture MVVM 6 etc … @2025 WealthNavi Inc.

アプリアーキテクチャの改善 <解決策> 独⾃のアーキテクチャに統⼀ 「単方向で予測しやすい状態管理ができる」 アーキテクチャ 7 @2025 WealthNavi Inc.

アーキテクチャの全体像 UIKit + RxSwiftベース 単⽅向データフローのアーキテクチャ ※ 現在はSwiftUI + Swift Concurrency へ移⾏中 VCAS(View, Command, Action, State) 1) イベントに対して Command発⾏ 2) データを読み書き 3) Action発⾏ ※State更新あり 4) Effect発⾏ ※State更新なし 5) Effectをハンドリング 6) 新State⽣成 7) Stateをハンドリング 8 @2025 WealthNavi Inc.

「単⽅向で予測しやすい状態管理ができる」と何がいいか？ あるデータに対する変更を集約して、流れを追いやすくできる → お客様のお⾦を扱う以上、⾦額表⽰や⾦額⼊⼒等に間違いがあってはいけない +100,000ボタン を押す “出金希望額”データ ＋ 100,000 再描画 ※画面はイメージです 9 @2025 WealthNavi Inc.

独⾃のアーキテクチャのメリット ● 画面の状態とビジネスロジックが切り離されている ○ ● 同じStateを流せば必ず同じ画面になる ○ ● ViewStoreのモックが非常にシンプルに Stateを用意してあげるだけでスナップショットテストが作れる SwiftUIとの相性が良い 10 @2025 WealthNavi Inc.

1. 独自のアーキテクチャについて 2. SwiftUI×Swift Concurrencyへのリファクタリング 3. 新メンバーでも開発しやすいような工夫 4. まとめ 11 @2025 WealthNavi Inc.

SwiftUI×Swift Concurrencyへのリファクタリング 背景と課題 ① 画面レイアウト (Auto Layout設定)のみ Storyboard/XIB で実装している ● Storyboard上でUIの確認ができない ● レビューがしにくい ● 1コンポーネントに対して2ファイル( .swift, .xib)追加するためファイルが肥大化する ② 非同期処理をRxSwiftで実装している ● 外部のフレームワークに依存する ● 習得難度が高い 12 @2025 WealthNavi Inc.

SwiftUI×Swift Concurrencyへのリファクタリング ● ViewStore ○ ● state ○ ● PublishRelay → AsyncStreamに Middlewaresとのやり取り ○ ● 実装側で@Publishedに effect ○ ● ObservedObjectに準拠 RxSwift(Single型) →Swift Concurrencyに ViewController ○ ○ HostingController + SwiftUI.Viewに HostingControllerはViewへのDIと画面遷移を受け持つ 13 @2025 WealthNavi Inc.

SwiftUI×Swift Concurrencyへのリファクタリング 結果 ● SwiftUI化することによりViewの実装が集約された ○ 子Viewが扱いやすい ● Swift Concurrencyにすることにより非同期処理が簡潔になった 14 @2025 WealthNavi Inc.

1. 独自のアーキテクチャについて 2. SwiftUI×Swift Concurrencyへのリファクタリング 3. 新メンバーでも開発しやすいような工夫 4. まとめ 15 @2025 WealthNavi Inc.

新メンバーが開発を始める際の課題 ● 独自のアーキテクチャは習得難度が高そう... ● SwiftUIへのリファクタリングでチームメンバーで共通認識を揃え るのは難しそう... �� 16 @2025 WealthNavi Inc.

テンプレートファイルの⽣成 17 @2025 WealthNavi Inc.

共通デザインシステムの作成 デザインシステムをパッケージ化 ● TextStyle ○ 文字のスタイルを共通化 ● Color ○ 色を共通化 ● ButtonStyle ○ ボタンを共通化 ● カスタム View ○ Viewを共通化 18 @2025 WealthNavi Inc.

CI/CDの充実 ● テストやビルド‧配信はBitriseを使⽤ ○ SlackからBitriseのワークフローをSlash Commandsで実⾏できるようにすることで、 エンジニア以外でもテスト⽤ビルドの配信をできるようにしている ● GitHub ActionsでDanger-Swift + SwiftLintによるPRの⾃動チェック ○ チームメンバーでコードフォーマットを揃える ■ SwiftLintカスタムルールで独⾃のコード規約にも適⽤ ○ リリースに必要なビルド番号とバージョンの更新の確認 ○ 画⾯に対応するスナップショットテストが作成されているかの確認 19 @2025 WealthNavi Inc.

スナップショットテストの導⼊ 「画面レイアウトに焦点を当てたテスト」 ● UIKit: ios-snapshot-test-case ○ ● Facebook製(Uberがメンテ) SwiftUI: swift-snapshot-testing ○ Point-Free製 メリット ● アプリを起動しなくても画面の確認・比較をすることができる ● モックのデータを差し込めるので、安定した同じデータを用い、Viewのテストが可能 20 @2025 WealthNavi Inc.

まとめ ● 単⽅向データフローのアーキテクチャ（VCAS）に統⼀ ○ ● SwiftUI×Swift Concurrencyへのリファクタリングを進める ○ ● SwiftUIと相性が良く、テストがしやすい Viewの実装を集約し、⾮同期処理を簡潔に 新メンバーでも開発しやすいような⼯夫 ○ テンプレートファイルの生成 ○ 共通コンポーネントの作成 ○ CI/CDの充実 ○ スナップショットテストの導入 21 @2025 WealthNavi Inc.

【重要な注意事項】 ● 本資料は、断定的判断を提供するものではなく、情報を提供することのみを⽬的としており、いか なる種類の商品も勧誘するものではありません。最終的な決定は、お客様⾃⾝で判断するものと し、当社はこれに⼀切関与せず、また、⼀切の責任を負いません。 ● 本資料には将来の出来事に関する予想が含まれている場合がありますが、それらは予想であり、ま た、本資料の内容の正確性、信頼性、完全性、適時性等を⼀切保証するものではありません。本資 料に基づいて被ったいかなる損害についても、当社は⼀切の責任を負いません。また、当社は、新 しい情報や将来の出来事その他の情報について、更新⼜は訂正する義務を負いません。 ● 本資料を利⽤することによりお客様に⽣じた直接的損害、間接的損害、派⽣的損害その他いかなる 損害についても、当社は⼀切の責任を負いません。 商号等：ウェルスナビ株式会社 金融商品取引業者 関東財務局長（金商） 第2884号 加入協会：日本証券業協会 一般社団法人日本投資顧問業協会 22 @2025 WealthNavi Inc.

ご清聴ありがとうございました 23 @2025 WealthNavi Inc.

Appendix 1 定期的にWealthNaviの開発（技術‧組織）に関する情報を発信しています。 開発者ブログ ● 技術広報に関する お問い合わせ先 ● https://zenn.dev/p/wn_engineering ブックマーク追加や記事への「いいね」していただけると嬉しいです ウェルスナビ 技術広報チーム（[email protected]） 24 @2025 WealthNavi Inc.

• https://zenn.dev/p/wn_engineering

Appendix 2 ウェルスナビでは複数の開発系ポジションで採⽤を強化しています。 主な採⽤中職種 ● ● ● ● ● モバイル開発エンジニア エンジニアリングマネージャー バックエンド開発エンジニア QAエンジニア データエンジニア 採⽤情報詳細 ● 下記URL（QRコード）よりご確認ください。 https://recruit.wealthnavi.com/ 採⽤に関する お問い合わせ先 ● ● 「カジュアルに話を聞いてみたい」という温度感でも構いません。 ウェルスナビ採⽤チーム（[email protected]）までご連 絡お待ちしております。 25 @2025 WealthNavi Inc.

• https://recruit.wealthnavi.com/