方針

• SwiftUI の公式のチュートリアルをやる
• 完璧にこなすことを目指さない
  • 内容に関して十分だと思ったら、完了していなくても切り上げる
• 面白そうな単元があったら優先して取り組む
  • 前提知識が足りなかったら、知識を補うチュートリアルに取り組む
• 実際にアプリを作りたくなったら、チュートリアルを切り上げる

Section 1 - Create a New Project and Explore the Canvas

SwiftUI での開発の基本のキっぽい内容

• SwiftUI のファイルの基本構成
  • View, PreviewProvider の二つで構成される
• Canvas View の出し方
• HotReload を体験

Section 2 - Customize the Text View

テキストの色々な表示方法について。チュートリアルやる人が、スコープが小さいところから開発手法を学んでもらう目的がありそうに感じました。

SwiftUI では XCode の色んな機能を組み合わせて開発することができる

• コード、インスペクタ、キャンバス,
  • SwiftUI のインスペクタは、キャンバス上で View 要素に対して「Control + Option +クリック」することで表示される

SwiftUI ではドットを繋げて View を編集する。modifier と呼ぶ

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            // .font で font を設定している
            .font(.title)
            .foregroundColor(.green)
    }
}

Section 3 - Combine Views Using Stacks

• DragAndDrop で Canvas にコンポーネントを入れたりできる。デザインツールみたいな感じでした。
• Inspector や Canvas からコンポーネントを追加したり編集できるのかなり楽しいです。
  • ソースも同時に編集されるから、⌘ + Z で戻すのも当然動きました。素晴らしい。

Section 4 - Create a Custom Image View

画像を取り込んで表示させて、円形に切り取って縁つけて影つける。やってみたけどすごいばっかり言ってます。

overlay モディファイアはちゃんと後で調べて理解したいです。

Section 5 - Use SwiftUI Views From Other Frameworks

MapKit を使って、地図を追加する項。MapKit が SwiftUI に対応しているから使える、ということなんですかね。

Section 6 - Compose the Detail View

最後の仕上げにこれまでに作ったコンポーネントを組み合わせる単元です。

DONE

感想 & 疑問点

• このチュートリアルしかやっていないですが、かなり開発環境として満足度高いです。
  • 大規模なアプリは不明
• 今回のチュートリアルではデバイスサイズが iPhoneX など、縦が長いデバイスだったけど、iPhone8 だとレイアウトが崩れました。
  • constraints や割合指定のレイアウトをどうやるのかが気になります

List の書き方は複数種類あるようでした。

• List に直接 array を受け渡す
• List の trailing closure で ForEach を受け渡す
  • 複数種類のリストを扱うときに役立つようです。

直接 array を受け渡す

List(filteredLandmarks){ landmark in
    NavigationLink(
        destination: LandmarkDetail(landmark: landmark)){
        LandmarkRow(landmark: landmark)
    }
}
.navigationTitle("Landmarks")

List の trailing closure で ForEach を受け渡す

List {
    Toggle(isOn: $showFavoritesOnly){
        Text("Favorites only")
    }
    ForEach(filteredLandmarks){ landmark in
        NavigationLink(
            destination: LandmarkDetail(landmark: landmark)){
            LandmarkRow(landmark: landmark)
        }
    }
}

アプリ全体で広く状態を共有する

XXXObject という名前が @StateObject, @EnvironmentObject, @ObservedObject...3種類出てきて混乱しましたが、以下の記事が丁寧に説明してくださっていてとてもわかりやすかったです。

https://swiftwithmajid.com/2020/07/02/the-difference-between-stateobject-environmentobject-and-observedobject-in-swiftui/

メモ：
上記の記事で紹介されていた以下の記事が面白そうだったので、あとで読もうと思います。
https://swiftwithmajid.com/2019/09/18/redux-like-state-container-in-swiftui/