【SwiftUI×SPM】SPMマルチモジュールでの画面遷移について

# 目的

- モジュールを疎結合にし、SPMマルチモジュール構成を採用するメリットを最大限享受できるようにすること。
    - モジュール同士がお互いの存在を知らずとも画面遷移可能な実装を示します
    - SPMマルチモジュール構成を採用したプロジェクトにおいて、画面遷移実装を行う際の検討材料になれば嬉しいです

<br>

**本記事のゴール**
`SPMマルチモジュール上` で [swift-dependencies](https://github.com/pointfreeco/swift-dependencies) を用いた、`疎結合な` `画面遷移` を実装すること

| 画面遷移 |
| ---- |
| <img width = 300 src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764557/8270da25-6998-d18f-c88e-57c7c8e11466.gif"> |


# 記事を書いた背景

SPMマルチモジュールのメリットである、`ビルド時間の短縮` のために、モジュール間を疎結合にすることがとても重要だと考えています。画面遷移は、工夫をしないと 依存関係に陥り、疎結合になります。
そのため、今回は モジュール間を疎結合にした SPMマルチモジュールにおける画面遷移の実装 を考え、提案することで、`ビルド時間の短縮` に貢献します。


# 結論

`MainAppにて画面遷移を実装` + `Swift-dependenciesを用いたモジュールへのDI` による実装が良いと考えています。

<br>


<details><summary>最終的なプロジェクト構成 (※SPMマルチモジュール構成採用済みの構成)</summary><div>


```全体.txt
.
├── App
│   ├── Package.swift
│   ├── Project名
│   └── Project名.xcodeproj
│
├── Package.swift
├── README.md
│
└── Sources
    ├── Core
    └── Feature
```

```App.txt
App
.
├── Routing
│   ├── Dependencies   // swift-dependencies を用いる
│   │   └── ViewBuildingClient+Impl.swift
│   └── Environment   // Environment を用いる
│       └── AppViewBuilding.swift
└── SwapWithMeApp.swift
```


```Sources.txt
Sources
.
├── Core
│   └── Routing
│       ├── Dependencies
│       │   └── ViewBuildingClient.swift
│       └── Environment
│           ├── Environment+extension.swift
│           ├── ModuleViewBuilding.swift
│           ├── ViewBuildingProtocol.swift
│           └── ViewType.swift
└── Feature
    └── Sample
        ├── FirstView.swift
        └── SecondView.swift
```

</div></details>



# 実装していきます

**以下のように順を追って理解しやすく説明していきます**

MainApp での単純な画面遷移 を行い、 Routerへの切り出し, DIの採用, SPMマルチモジュールへの導入 までを順に説明します。

## 準備体操

### MainApp にて画面遷移を実装
まずは、`最も単純な`画面遷移実装です
ContentView → WelcomeView への遷移を例に実装していきます。

```ContentView.swift
struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack(spacing: 40) {
                Text("Content View")
                    .fontWeight(.bold)

                // 画面遷移
                NavigationLink {
                    // 遷移先を指定 
                    WelcomeView()   // ! ContentViewが遷移先を知っており、密結合となっている
                } label: {
                    Text("to WelcomeView")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.orange)
        }
    }
}

#Preview {
    ContentView()
}
```

```WelcomeView.swift
import SwiftUI

/// 遷移先
struct WelcomeView: View {
    var body: some View {
        Text("Welcome View")
    }
}

#Preview {
    WelcomeView()
}
```


### Router を用いて疎結合な画面遷移を実装

SwiftUI と UIKit の画面遷移ロジックは異なります。(UIKit の場合は画面遷移の選択肢が多いのですが)今回はSwiftUIに限って話を進めていきます。
SwiftUI では、画面遷移が `NavigationView(Stack)` + `遷移先画面` によって行われます。
`遷移先画面` の呼び出しを変更することで、疎結合化 します。

<br>

遷移可能な画面を enum で定義します
```ViewType.swift
import Foundation

/// 画面遷移先を定義
enum ViewType {
    case contentView
    case welcomeView
}
```

次に、画面呼び出しする Router を実装します
```Router.swift
import SwiftUI

struct Router {
    /// 遷移先の画面を返すだけ, 画面遷移 はView側で行う
    func build(viewType: ViewType) -> AnyView {
        switch viewType {
        case .contentView:
            return AnyView(ContentView())
        case .welcomeView:
            return AnyView(WelcomeView())
        }
    }
}
```

Router を使い、`ContentView`の画面遷移実装を変更します。
```diff_swift
// ContentView.swift

struct ContentView: View {
+   private let router = Router()

    var body: some View {
        NavigationView {
            VStack(spacing: 40) {
                Text("Content View")
                    .fontWeight(.bold)

                // 画面遷移
                NavigationLink {
                    // Router経由で画面遷移
                    // ContentView が WelcomeView を知ることなく画面遷移可能
+                   router.build(viewType: .welcomeView)
                } label: {
                    Text("to WelcomeView")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.orange)
        }
    }
}

#Preview {
    ContentView()
}
```

これで疎結合な画面遷移が可能となりました 👍
`しかし` より疎結合にできます。実装を続けていきましょう。

<br>

### Protocol を用いて より疎結合にする

ContentView と Router を疎結合にするため、Protocolを用いて Routerの抽象化 を行います。
Protocol による抽象化のメリットとして、`テストでモックしやすくなる` や `DIの下準備`、`何を行う構造体なのか分かりやすくなる` 等があります。

<br>

**Routerの抽象化**
```diff_swift
// Router.swift

  // Router を抽象化
+ protocol RouterProtocol {
+    func build(viewType: ViewType) -> AnyView
+ }

+ struct Router: RouterProtocol {
    /// 遷移先の画面を返すだけ, 画面遷移 はView側で行う
    func build(viewType: ViewType) -> AnyView {
        switch viewType {
        case .contentView:
            return AnyView(ContentView())
        case .welcomeView:
            return AnyView(WelcomeView())
        }
    }
}
```

<br>

**Routerの依存関係を修正**
Routerを抽象化したことにより、デメリットとして `ContentView を呼び出す度にRouterを差し込む必要が出てきました`。
わざわざRouterを差し込むのは面倒です。次は、Environmentを用いて画面遷移を簡単にDIできるよう修正しましょう。

```diff_swift
// ContentView.swift

struct ContentView: View {
+    private var router: RouterProtocol

+    init(router: RouterProtocol) {
+        self.router = router
+    }

    var body: some View {
        // 〜〜〜
    }
}

#Preview {
+    ContentView(router: Router())   // 差し込み(1/3)
}
```

```diff_swift
// SPMViewTranslationApp.swift

import SwiftUI

@main
struct SPMViewTranslationApp: App {
    var body: some Scene {
        WindowGroup {
+            ContentView(router: Router())   // 差し込み(2/3)
        }
    }
}
```

```diff_swift
// Router.swift

// 〜〜〜

struct Router: RouterProtocol {
    /// 遷移先の画面を返すだけ, 画面遷移 はView側で行う
    func build(viewType: ViewType) -> AnyView {
        switch viewType {
        case .contentView:
+            return AnyView(ContentView(router: Router()))   // 差し込み(3/3)
        case .welcomeView:
            return AnyView(WelcomeView())
        }
    }
}
```

Protocol を用いることで、より疎結合になりました 👍
`しかし` 結合部分(DI)を修正することで、差し込むためのコードを減らした より良い実装を目指せます。実装していきましょう。

### Environment を用いて DIをより簡潔に

Environment は、(簡単にまとめると)環境変数を定義できるものです。
デフォルトでいくつかの機能が用意されています。その中にある `モーダルを閉じる`(@ Environment(\.dismiss) や `ダークモードの検知` (@ Environment(\.colorScheme)) を使ったことある方も多くいるのではないでしょうか。

https://developer.apple.com/documentation/swiftui/environment

https://ios-docs.dev/swiftui-environment/#i

今回、Environement を独自に定義することで、DIを実装していきます。

<br>

**Environment に画面遷移実装を登録**

```diff_swift
// Router.swift

import SwiftUI

// Router を抽象化
protocol RouterProtocol {
    func build(viewType: ViewType) -> AnyView
}

struct Router: RouterProtocol {
    /// 遷移先の画面を返すだけ, 画面遷移 はView側で行う
    func build(viewType: ViewType) -> AnyView {
        switch viewType {
        case .contentView:
            return AnyView(ContentView(router: Router()))
        case .welcomeView:
            return AnyView(WelcomeView())
        }
    }
}

+ // MARK: - DI
+ 
+ struct RouterKey: EnvironmentKey {
+     public static var defaultValue: RouterProtocol = Router()
+ }
+ 
+ extension EnvironmentValues {
+     var router: RouterProtocol {
+         get { self[RouterKey.self] }
+         set { self[RouterKey.self] = newValue }
+     }
+ }
```

<br>

**画面遷移のDIを修正**
Environment を用いた画面遷移が可能となりました。
これから、`ContentView を呼び出す度にRouterを差し込む必要が出てきた` というRouterの抽象化によるデメリットを解決していきましょう。

```diff_swift
// ContentView.swift

import SwiftUI

struct ContentView: View {
-    private var router: RouterProtocol
-
-    init(router: RouterProtocol) {
-        self.router = router
-    }
+    @Environment(\.router) var router

    var body: some View {
        NavigationView {
            VStack(spacing: 40) {
                Text("Content View")
                    .fontWeight(.bold)

                // 画面遷移
                NavigationLink {
                    // Router経由で画面遷移
                    // ContentView が WelcomeView を知ることなく画面遷移可能
                    router.build(viewType: .welcomeView)
                } label: {
                    Text("to WelcomeView")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.orange)
        }
    }
}

#Preview {
-    ContentView(router: Router())   // 差し込み(1/3)
+    ContentView()
}
```


```diff_swift
// SPMViewTranslationApp.swift

import SwiftUI

@main
struct SPMViewTranslationApp: App {
    var body: some Scene {
        WindowGroup {
-            ContentView(router: Router())   // 差し込み(2/3)
+            ContentView()
        }
    }
}
```

```diff_swift
// Router.swift

// 〜〜〜

struct Router: RouterProtocol {
    /// 遷移先の画面を返すだけ, 画面遷移 はView側で行う
    func build(viewType: ViewType) -> AnyView {
        switch viewType {
        case .contentView:
-            return AnyView(ContentView(router: Router()))   // 差し込み(3/3)
+            return AnyView(ContentView())
        case .welcomeView:
            return AnyView(WelcomeView())
        }
    }
}
```

これで準備体操はおしまいです。
MainAppでの画面遷移を 抽象化+DI修正 していきました。
次からは、MainApp と マルチモジュール の違いによって発生する問題点とその解決策を考えていき、より良い画面遷移を実装していきましょう。


## SPMマルチモジュール構成を導入する

記事を書きました。
以下の記事を参考にして導入してみてください。

https://qiita.com/Soccerboy_Hamada/items/50570c7ad937fc9a5281

マルチモジュール化を行えたら、以下のフォルダ構造にしてみてください。
また、コードも書いておきます。足並みを揃えたい人は参考にしてみてください。

<br>

<details><summary>(再)最終的なプロジェクト構成</summary><div>


```全体.txt
.
├── App(Project名の場合もあり)
│   ├── Package.swift
│   ├── Project名
│   └── Project名.xcodeproj
│
├── Package.swift
├── README.md
│
└── Sources
    ├── Core
    └── Feature
```

```App.txt
App
.
├── Routing
│   ├── Dependencies   // swift-dependencies を用いる
│   │   └── ViewBuildingClient+Impl.swift
│   └── Environment   // Environment を用いる
│       └── AppViewBuilding.swift
└── SwapWithMeApp.swift
```


```Sources.txt
Sources
.
├── Core
│   └── Routing
│       ├── Dependencies
│       │   └── ViewBuildingClient.swift
│       └── Environment
│           ├── Environment+extension.swift
│           ├── ModuleViewBuilding.swift
│           ├── ViewBuildingProtocol.swift
│           └── ViewType.swift
└── Feature
    └── Sample
        ├── FirstView.swift
        └── SecondView.swift
```

</div></details>


<details><summary>FirstView.swift</summary><div>

```FirstView.swift
import SwiftUI

public struct FirstView: View {

    public init() {}

    public var body: some View {
        NavigationView {
            VStack(spacing: 24) {
                Text("First View")
                    .foregroundStyle(.white)
                    .font(.system(size: 48, weight: .bold, design: .rounded))

                NavigationLink {
                    // SecondView の呼び出し
                } label: {
                    Text("to Second View")
                        .foregroundStyle(.blue)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.red.opacity(0.6))
        }
    }
}

#Preview {
    FirstView()
}
```

</div></details>


<details><summary>SecondView.swift</summary><div>

```SecondView.swift
import SwiftUI

public struct SecondView: View {
    public init() {}

    public var body: some View {
        NavigationView {
            VStack(spacing: 24) {
                Text("Second View")
                    .foregroundStyle(.white)
                    .font(.system(size: 48, weight: .bold, design: .rounded))

                NavigationLink {
                    // FirstView の呼び出し
                } label: {
                    Text("to First View")
                        .foregroundStyle(.red)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.blue.opacity(0.6))
        }
    }
}

#Preview {
    SecondView()
}
```

</div></details>


## マルチモジュールでの画面遷移

### まず、単純な画面遷移を実装してみる

```FirstView.swift
import SwiftUI
import FeatureB   // Package.swift で依存関係を明示的に指定する必要あり

public struct FirstView: View {
    public init() {}

    public var body: some View {
        NavigationView {
            VStack(spacing: 40) {
                Text("First View")
                    .fontWeight(.bold)

                // 画面遷移
                NavigationLink {
                    SecondView()
                } label: {
                    Text("go SecondView")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.yellow)
        }
    }
}
```

単純な画面遷移では、以下のような問題が発生します。そのため、より疎結合にするために実装を続けていきましょう。

**問題点**
モジュール間が密になってしまう
→ 遷移するためにモジュール同士が互いの`モジュールの存在`を知る必要があるから

<br>


### モジュール間を疎結合にし、画面遷移する

**`疎結合` = `遷移先のモジュール を import せずに、画面遷移する`** とします。

疎結合に向けての方針として、**MainAppで画面遷移を実装** + **MainAppからモジュールへのDI** を立てました。

<br>

**MainAppで画面遷移を実装**

モジュールへDIするため、`Router.swift` を少し修正します。
`RouterProtocol` をMainAppから削除していきます。
削除した理由は、MainAppで定義したものをモジュールから参照できないから です。
今回の実装では、モジュールでも`RouterProtocol`を使用して画面遷移のDIを行うため、`RoterProtocol`をモジュール内で定義します。(→ 次の項目で実装)

```diff_swift
// Router.swift

-  // Router を抽象化
- protocol RouterProtocol {
-    func build(viewType: ViewType) -> AnyView
- }

struct Router: RouterProtocol {
    /// 遷移先の画面を返すだけ, 画面遷移 はView側で行う
    func build(viewType: ViewType) -> AnyView {
        switch viewType {
        case .firstView:
            return AnyView(FirstView())
        case .secondView:
            return AnyView(SecondView())
        }
    }
}
```

<br>

**モジュール内にインターフェイス実装**

MainApp 上から RouterProtocol を削除済み です。
モジュール上に画面遷移のインターフェイスを作るためにも、モジュールに改めて RouterProtocol を定義していきます。
また、DIするための空実装として ModuleRouter も実装しておきます。

```RouterProtocol.swift
import SwiftUI

// Module へ MainAppの画面遷移実装 を差し込むために定義
public protocol RouterProtocol {
    func build(viewType: ViewType) -> AnyView
}
```

```ModuleRouter.swift
import SwiftUI

// DIするために 空実装
// 将来 MainAppのViewBuilding を差し込む
public struct ModuleRouter: RouterProtocol {
    public func build(viewType: ViewType) -> AnyView {
        return AnyView(EmptyView())
    }
}
```

<br>

**MainAppからモジュールへのDI**

モジュールへのDIを可能にするため、カスタムEnvironment を用いて実装していきます。

```Environment+extension.swift
import SwiftUI

// MARK: - DI

struct RouterKey: EnvironmentKey {
    // デバッグ時 MainAppのViewBuilding を差し込む
    public static var defaultValue: any RouterProtocol = ModuleRouter()
}

extension EnvironmentValues {
    public var router: any RouterProtocol {
        get { self[RouterKey.self] }
        set { self[RouterKey.self] = newValue }
    }
}
```

MainAppからモジュールへ、画面遷移をDIする
(画面遷移:  struct Router{~~~})

```diff_swift
// FirstView.swift


import SwiftUI
- import FeatureB   // Package.swift で依存関係を明示的に指定する必要あり

public struct FirstView: View {
    public init() {}

+   // 受け手
+   @Environment(\.router) var router

    public var body: some View {
        NavigationView {
            VStack(spacing: 40) {
                Text("First View")
                    .fontWeight(.bold)

                // 画面遷移
                NavigationLink {
-                   SecondView()
+                   router.build(.secondView)
                } label: {
                    Text("go SecondView")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.yellow)
        }
    }
}
```

```diff_swift
// SPMViewTranslationApp.swift

import SwiftUI

@main
struct SPMViewTranslationApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
+               .environment(\.router, Router())   // 差し替え
        }
    }
}
```

これで、モジュール間を疎結合にした画面遷移が可能となりました 👍

`しかし` Environment を使った画面遷移やDI には、以下に示すようないくつかの問題点があります。

**問題点**
- インターフェイス用の空実装(ModuleRouter)を行う必要があること
    - Environment を使用した場合には、MainApp と モジュール を繋ぐため必要なものですが、可能であればなくしたい実装
- 依存の差し替えをする必要がある
    - `.environment(\.router, Router())` を用いて、Router() の差し込みを行っているが、可能であればなくしたい実装

**これらの問題に対し、`swift-dependencies`を用いて解決します**


## swift-dependencies を用いた実装

swift-dependencies とは、pointfree が提供している DIライブラリ です。

https://github.com/pointfreeco/swift-dependencies

結論から言うと、swift-depdendecies を使うことにより、モジュール用のインターフェイス実装がなくなります。これによって、上で示した**問題点**を解消できます。

実装を考えていきましょう。


### モジュールにDI用の実装を追加する

モジュールで画面遷移を呼び出せるようDIは使用し続けます。しかし、DI用のライブラリとして swift-dependencies を使用するため、実装を追加する必要があります。
`Routingモジュール`に、以下の `ViewBuildingClient.swift` を新規作成します。

```ViewBuildingClient.swift
import Dependencies
import SwiftUI

public struct ViewBuildingClient {
    public var firstView: @Sendable (_ id: Int) -> AnyView
    public var secondView: @Sendable () -> AnyView

    public init(
        firstView: @escaping @Sendable (Int) -> AnyView,
        secondView: @escaping @Sendable () -> AnyView
    ) {
        self.firstView = firstView
        self.secondView = secondView
    }
}

// MARK: - Dependnecies

extension ViewBuildingClient: TestDependencyKey {
    public static let testValue: ViewBuildingClient = .init(
        firstView: unimplemented(),
        secondView: unimplemented()
    )
}

extension DependencyValues {
    public var viewBuildingClient: ViewBuildingClient {
        get { self[ViewBuildingClient.self] }
        set { self[ViewBuildingClient.self] = newValue }
    }
}
```

### MainApp に画面遷移の実装を追加

```ViewBuildingClient+Impl.swift
import Dependencies
import SwiftUI

import Routing   // ViewBuildingClient を呼び出すため


extension ViewBuildingClient: DependencyKey {
    public static var liveValue: ViewBuildingClient {
        return .init(
            firstView: { id in
                return AnyView(FirstView())
            },
            secondView: {
                return AnyView(SecondView())
            }
        )
    }
}
```

### 画面遷移の確認

swift-depdencies を用いることで、依存の差し替えを行う必要がなくなりました。
また、どの画面からでも`@Dpendency` を使い機能の呼び出しが可能です。

```diff_swift
// SPMViewTranslationApp.swift

import SwiftUI

@main
struct SPMViewTranslationApp: App {
    var body: some Scene {
        WindowGroup {
            FirstView()
-               .environment(\.router, Router())   // 差し替え
        }
    }
}
```

```diff_swift
// FirstView.swift


import Dependencies
import Routing
import SwiftUI

public struct FirstView: View {
-    @Environment(\.viewBuilding) var viewBuilding
+    @Dependency(\.viewBuildingClient.secondView) var secondView

    public init() {}

    public var body: some View {
        NavigationView {
            NavigationLink {
-                AnyView(viewBuilding.build(viewType: .secondView))
+                secondView()
            } label: {
                Text("to Second View")
            }
        }
    }
}
```

これにより、SPMマルチモジュール構成上での疎結合な画面遷移実装が完了しました 👍

以上でSPMマルチモジュール構成を採用した際の画面遷移の説明は終わりです。
**良いSPMマルチモジュールライフを！**

## まとめ

今回、マルチモジュール構成を採用しない場合の画面遷移を実装し、問題点と解決策を示しながらより良い画面遷移の実装を考えていきました。
僕は結論として、`MainAppにて画面遷移を実装` + `Swift-dependenciesを用いたモジュールへのDI` が良いと考えています。
SPMマルチモジュール構成を採用した場合に生じる `モジュール は MainApp を参照できない` という前提があり、今回の実装が必要となりました。

<br>

本記事の改善点をどんどん募集しています。ぜひコメントお願いします！ 🙏