Zenn
😬

[TCA] TCAにおけるNavigationの定義と、2つの実装方法

2024/09/01に公開
Swift
TCA
tech

概要

TCAにおけるNavigationの定義は、Appleの意味するNavigationとは異なる。
また、TCAにおけるNavigationには、2つの実装方法がある。
TCAのドキュメントを読み、上記の点を記事にまとめた。

TCAにおけるNavigationとは

Navigationが意味するものは人によって異なる。
ほとんどの人は、Navigationとは"Drill-down"な画面遷移を想像するはず。（e.g. NavigationStack）
また、Modal-PresentationはNavigationには含めない。(e.g. Alert, Sheet, fullScreenCover)

(drill downな画面遷移の例)

(Modal-Presentationの例)

しかし、TCAでは

Definition: Navigation is a change of mode in the application.
Definition: A change of mode is when some piece of state goes from not existing to existing, or vice-versa.

NavigationはアプリケーションのModeを変化させるものである。
Modeの変化とは、Stateの一部分が 新しく作成されたり、存在するStateが消されたりすることである

と定義している。
TCAでは"Drill-down"な画面遷移のほかに、Sheet, PopOver,FullScreenCoverやAlertなどのModal PresentationもNavigationとしてとらえる。

要点

Apple TCA
Drill-down な画面遷移 Navigationの定義に含む Navigationの定義に含む
Modal-Presentation Navigationの定義に含まない Navigationの定義に含む

TCAのNavigationには2つの実装方法がある

  • Tree-based Navigation
  • Stack-based Navigation

Tree-based Navigation

  • Optional型を利用して、画面やModalが表示されているかどうかの状態を制御する方法
    • non-nil: その画面やModalを表示中
    • nil: その画面やModalは表示されてない
  • 値がnilからnon-nilに変化することは、画面に遷移する/Modalを表示することを意味する。
  • 値がnon-nilからnilに変化することは、前の画面に戻る/Modalを閉じることを意味する。
@Reducer
struct DetailItemFeature {
  @ObservableState
  struct State {
    @Presents var editItem: EditItemFeature.State?
    // ...
  }
  // ...
}

Stack-based Navigation

  • パンくずリストのように、リストで画面やModalが表示されているかどうかの状態を制御する方法
    • Listに値がある： その画面やModalを表示中
    • Listに値がない： その画面やModalは表示されていない
  • 値をListに追加することは、画面に遷移する/Modalを表示することを意味する。
  • 値をListから取り除くことは、前の画面に戻る/Modalを閉じることを意味する。
let path: [Path] = [
  .detail(DetailItemFeature.State(item: item)),
  .edit(EditItemFeature.State(item: item)),
  // ...
]

要点

Tree-based Navigation Stack-based Navigation
Navigationの表現方法 Optional型 Collection型
次の画面への遷移、Modalの表示 Optional型に値を代入する Collectionに値をPushする
ひとつ前の画面の遷移、Modalを閉じる Optional型にnilを代入する Collectionから値をPopする

まとめ

TCAでは、Appleの定義とは違い、Navigationの定義にModal Presentationも含める。
TCAでは、Navigationの実装方法として、Tree-based NavigationとStack-based Navigationの2つがある。

  • Tree-based Navigation: Optional型の状態が、nilかnon-nilかで遷移の状態を管理する
  • Stack-based Navigation: Collection型の状態に、値をPush/Popすることで遷移の状態を管理する

Ref

Discussion