UIkit経験者がSwiftUIを始める際に参考になる情報のまとめ

書籍

1人でアプリを作る人を支えるSwiftUI開発レシピ

WWDCのセッションの内容がコンパクトにわかりやすくまとまっているので、これだけでも十分と言えますが、SwiftUIに関連するXcodeの使い方は載っていないので、そこはWWDCやチュートリアルで補完すると丁度良くなります。

Apple公式

チュートリアル

WWDC

2021

• What's new in SwiftUI
• Direct and reflect focus in SwiftUI

2020

• What's new in SwiftUI
• Introduction to SwiftUI
• Data Essentials in SwiftUI
• App essentials in SwiftUI
• Stacks, Grids, and Outlines in SwiftUI

2019

• Building Custom Views with SwiftUI
• Data Flow Through SwiftUI
• Introducing Combine
• Combine in Practice
• SwiftUI Essentials
• Structure your app for SwiftUI previews

サンプルアプリ

サンプルアプリの中にXcode14が必要なものがあるので、事前にインストール推奨
https://developer.apple.com/tutorials/sample-apps

ドキュメント

SwiftUIで何が出来るか引き出しをたくさん用意すると便利なので、索引でもいいのでさらっと流し読み
https://developer.apple.com/documentation/swiftui/

記事関連

SwiftUIはバージョンアップごとに大きな変更が入っているので、記述が変わっているという前提で読むとよいでしょう。

Qiita

• 個人的に有用だと感じたテクニック集を『Effective SwiftUI 候補（仮説）』として公開しました。
• PublishedがどのようにSwiftUIのViewを更新するのか
• 動作原理から理解するSwiftUI
• EnvironmentValuesを制するものはSwiftUIを制する
• SwiftUIのViewはなぜクロージャでselfを書いても循環参照しないのか
• SwiftUIをジェネリクスでプレビューしやすくする
• SwiftUIのListでスクロール末尾で次のデータを読み込み表示する方法
• Sketchと1対1を目指すAtomic designなSwiftUIの作り方
• SwiftUIとUIKit、結局どっちを使えば良いのかを考える
• SwiftUIのSubViewは画面更新ごとに生成と破壊を繰り返す
• SwiftUIにおける拡張。そして再発明の危険性
• SwiftUIアプリケーション開発の不足を補うSwiftUIX
• SwiftUIのAlignment Guide まとめ
• え、onAppearまだ使ってるの？！
• SwiftUI の Preference の基礎
• SwiftUIの不思議な機能を実現する変数展開"()"について調べた
• SwiftUIのsheet（ModalView）を出し分ける
• SwiftUI 時代の依存関係逆転のプラクティス [beta]
• Combine+Alamofire+SwiftUIでAPI実行
• Combineを使ってMVVMでNotificationCenterを実装する
• もっともシンプルな SwiftUI - MVVM
• SwiftUI+Combineの備忘録とMVVM with Combineチュートリアル for iOSを模倣してQiita記事取得サンプル作ってみた
• SwiftUI + Combine で MVVM & Clean Architecture な設計を考えてみた

アーキテクチャ

MVVM

• ラクマでのSwiftUI導入方針とTips
• SwiftUIで使うViewModelのInputsとOutputsを表現したい

VIPER

• SwiftUI を活用した「レシピ」×「買い物」の新機能開発
• SwiftUIでVIPERのiOSアプリをつくってみた
• SwiftUIアプリをVIPERアーキテクチャーで作り画面遷移処理をまとめる
  
• VIPERアーキテクチャでSwiftUIを利用するサンプルコードを動かして理解したい

view.bodyの組み方について

そこそこの画面をbodyに直接書いてしまうと、読みにくいのでコンポーネントごとにviewを組み立てるようにするのを推奨。
UIkitの頃はカスタムViewを用意して、awakeFromNib()などに装飾コードを書いたりすることが多くなりがちですが、bodyにそれを書いてしまうとわかりにくくなるのでコンポーネントにする。
アトミックデザインを頭の片隅におきつつ、ある程度整理整頓できていれば良いかなと個人的に思います。
モバイルアプリ開発において宣言的UIフレームワークを利用する際のコンポーネント粒度についての考察

プレビューをどこまで整備するか

こんな感じにプレビュー用のViewModelを用意し、中身をAPIが返すデータに差し替えたりすると現実に即したプレビューができる反面、APIが変更になった時にデータ修正が必要になってくるので注意。スタブ用のVMを用意せずとも実VMを使っても良い（ただし、欲しいデータが必ずしも取得できるとは限らない）

モックデータはPreview Assets.xcassetsに入れとくとプレビューの時だけ使えるようにできるのでおすすめ。

protocol ViewModelProtocol {
  var items: [Item] { get }
}

struct SampleViewModel: ViewModelProtocol {
  @Published items...実APIから取得
}

struct SampleViewModelStub: ViewModelProtocol {
  @Published items...Preview用のjsonを変換したのを返す
}

struct ContentView: <ViewModel: ViewModelProtocol>: View {
    @ObservedObject private var viewModel: ViewModel
    
    var body: some View {
        Text("Hello")
    }
}

struct SampleView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(SampleViewModelStub())
    }
}

UI Debug

view.bodyに直接printは書けないので、以下を参照
https://zenn.dev/bannzai/articles/20557106b4ba7b
https://ameblo.jp/kamekame0912/entry-12567283588.html

TIPS

• ViewDidLoadModifier
• onApperで不審な動き？
• UIkitのviewWillApperなどをSwiftUIで使う

SwiftUIにおけるテスト

推奨iOSバージョン

iOS13/14をサポートする場合、UIkitで当たり前に使える機能が標準実装されていなく、15から色々使えるようになってきているので特段の理由がなければ15からが推奨

• 非同期画像ロードに困る(AsyncImageが使えない)
• present/dismissの使用に癖がある
• UIにフォーカスを当てられない(よくあるTextFiledに最初からフォーカス合わせるとか）
• Navigation周りにバグが多い。
• Pull to Refreshがない

UIkitとSwiftUIのチートシート

https://qiita.com/hcrane/items/eb847ca7fb7a0b9e8073
https://fuckingswiftui.com/

RxSwiftとCombineのチートシート

RxSwift経験している人向けにCombineだとどれだっけの対応表
https://github.com/CombineCommunity/rxswift-to-combine-cheatsheet