Skip to content

Commit

Permalink
Update tutorials
Browse files Browse the repository at this point in the history
  • Loading branch information
kalupas226 committed Oct 15, 2023
1 parent 7c776cd commit 8a167ad
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
前のチュートリアルでは、Tree-based navigation API である `navigationDestination(store:state:action:destination)` を利用することで、リポジトリ一覧画面からリポジトリ詳細画面への Push 遷移を表現しました。
しかし、iOS 16 からは `NavigationStack` API の登場により Stack-based navigation という新しい Navigation の選択肢が SwiftUI に増え、これによっても Push 遷移を表現できるようになりました。

このチュートリアルでは、リポジトリ詳細画面への Push 遷移を Stack-based navigation に書き換えることを通して、TCA における Stack-based navigation の実装方法および Tree-based navigation・Stack-based navigation の違いについて学ぶことができます
このチュートリアルでは、リポジトリ詳細画面への Push 遷移を Stack-based navigation に書き換えることを通して、TCA における Stack-based navigation の実装方法を学ぶことができます
}

@Section(title: "Stack-based navigation API を用いた Reducer の書き換え") {
Expand All @@ -30,7 +30,7 @@
次に `RepositoryList` Reducer と `Path` Reducer の繋ぎこみを行っていきます。
まずは、`State` の実装を行いましょう。
Stack-based navigation API においては、`StackState` というものを利用することになります。
`StackState` は前述したように、Collection として実装されているため、これに `append` などの操作をすることで画面の Stack を表現できるようになっています
`StackState` は前述したように、Collection として実装されているため、これに `append` などの操作をすることで Push 遷移の実行を表現できるようになっています
`StackState` は Generics を指定する必要があるため、そこに先ほど定義した `Path.State` を指定する形で実装します。

@Code(name: "RepositoryListView.swift", file: 07-01-code-0003.swift)
Expand All @@ -40,7 +40,7 @@
`Action` では `StackAction` という API を利用します。
`StackAction` は Generics として `State` と `Action` を満たすことを要求します。
そのため、ここでも先ほど定義した `Path` の `State`, `Action` を利用して `StackAction` を持った case を定義しましょう。
`StackAction` は後で実際に利用しますが、これによって Stack 上の要素と簡単にやり取りを行うことができるようになります
`StackAction` は後で実際に利用しますが、これによって Stack 上に表示されている各画面と簡単にやり取りを行うことができるようになります

@Code(name: "RepositoryListView.swift", file: 07-01-code-0004.swift)
}
Expand Down Expand Up @@ -75,7 +75,7 @@
@Code(name: "RepositoryListView.swift", file: 07-02-code-0001.swift, previousFile: 07-02-code-0001-previous.swift)
}
@Step {
次に Pure SwiftUI の API である `NavigationStack(root:)` を Stack-based navigation 用の API である `NavigationStackStore(_:root:destination)` に置き換えます。
次に Pure SwiftUI の API である `NavigationStack(root:)` を TCA の Stack-based navigation 用の API である `NavigationStackStore(_:root:destination)` に置き換えます。
この API の第一引数には、先ほど定義した `StackState`, `StackAction` を利用した `store.scope` を渡します。
`root` は Pure SwiftUI に指定するものと同じで `NavigationStack` の Root 画面として表示したいもの、今で言うと List をここに渡します。
最後の `destination` 引数については次に説明しますが、空の状態で実装だけしておきましょう。
Expand All @@ -86,18 +86,18 @@
`destination` 引数についての説明を後回しにしましたが、最後にその実装を行います。
`destination` は、`RepositoryList.Path.State` が提供される closure となっており、その `Path.State` を switch などで分岐させて、各 case に対応した Push 遷移先を表現できるものとなっています。
現在 `Path.State` には、`repositoryDetail` しか存在していないため、`state` が `repositoryDetail` だった時に `RepositoryDetailView` を提供するようなコードを書けば良いです。
その際には、TCA に用意されている `CaseLet` という API を利用して、ある case に応じた View を提供できます。
その際には、TCA に用意されている `CaseLet` という API を利用して、特定の case に応じた View を提供できます。

@Code(name: "RepositoryListView.swift", file: 07-02-code-0003.swift)
}
@Step {
ここまで実装すれば、Tree-based navigation でリポジトリ詳細画面への Push 遷移を表現していた時と同じ挙動を実現できていることが確認できると思います
ここまで実装すれば、Tree-based navigation でリポジトリ詳細画面への Push 遷移を表現していた時と同じ挙動を Stack-based navigation で実現できていることが確認できると思います
実際にアプリを起動して確認してみましょう!

@Image(source: "07-02-image-0004.gif", alt: "Stack-based navigation で Push 遷移が表現できている図")

> ここまでで TCA における Tree-based navigation と Stack-based navigation の表現方法を簡単に紹介してきましたが、詳細に紹介できたわけではないため、それぞれの詳細やどのように使い分けるべきかなどが掴みきれていないかもしれません
> TCA には今回紹介した二種類の Navigation についての詳しいドキュメントがあるため、気になる方は [Navigation](https://pointfreeco.github.io/swift-composable-architecture/main/documentation/composablearchitecture/navigation) を参照して頂けると良いと思います
> ここまでで TCA における Tree-based navigation と Stack-based navigation の表現方法を簡単に紹介してきましたが、それぞれの詳細やどのように使い分けるべきかなどは紹介できていません
> TCA には今回紹介した二種類の Navigation についての詳しいドキュメントがあるため、気になる方は [Navigation](https://pointfreeco.github.io/swift-composable-architecture/main/documentation/composablearchitecture/navigation) を参照して頂けると、さらに理解を深めることができると思います
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
- UserDefaults からの値の取得・保存などのアクセスを管理するための `UserDefaultsClient` という struct を作成し、Reducer からそれを `@Dependency` として扱えるようにする
- `UserDefaultsClient` は `UserDefaultsClient/Client.swift` で実装されること

`UserDefaultsClient` の実装については、Point-Free が開発している TCA 製のゲームアプリである [isowords のコード](https://github.com/pointfreeco/isowords/tree/40d59a899bbe54810bb0d7af0f3b72379c56bafb/Sources/UserDefaultsClient) に参考になる部分があると思います。
`UserDefaultsClient` の実装については、Point-Free が開発している TCA 製のゲームアプリである [isowords のコード](https://github.com/pointfreeco/isowords/tree/40d59a899bbe54810bb0d7af0f3b72379c56bafb/Sources/UserDefaultsClient)に参考になる部分があると思います。

また、現状 `GitHubAPIClient` は GitHub の PAT を `Bundle.main.infoDictionary` から直接取得する実装となっていますが、この取得部分も `@Dependency` として管理することができます。取得部分を `BuildConfig/Client.swift` に実装してみましょう。
さらに、[この Discussion](https://github.com/pointfreeco/swift-composable-architecture/discussions/1858) などを参考に、作成した `@Dependency` を `GitHubAPIClient` で利用するように修正してみましょう。
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@Article(time: 30) {
@Intro(title: "様々な Unit Test の実装") {
最後は TCA の強みである Testability をもっと理解するために、様々な Unit Test を自分の力で実装してみましょう。
最後は TCA の強みである Testability をさらに理解するために、様々な Unit Test を自分の力で実装してみましょう。
}
@ContentAndMedia {
## テストの実装
Expand Down

0 comments on commit 8a167ad

Please sign in to comment.