【SwiftUI】1-2 Building Lists and Navigation を噛み砕いていく【チュートリアル】

実行環境

• MacOS 10.15.3
• Xcode Version 11.3.1

---

最初の章「SwiftUI Essentials」は以下の3章からなってます

• Creating and Combining Views
• Building Lists and Navigation (今回)
• Handling User Input

今回はAppleさんがスタートファイルを用意してくれているので、プロジェクトファイルをダウンロードして「starting point -> 〜.app」から始めてください

該当ページからプロジェクトファイルをダウンロードしないと、できない演習がありますので、毎回必ずダウンロードしてからチュートリアルを進めてください。

今回解説するBuilding Lists and Navigationは全部で8編あります
　　

1. データの扱い方
2. 行表示の基本とデータの引用
3. 行表示をプレビュー構造体ないで操作し表示する
4. リストを行表示する方法
5. リストを作る方法
6. 2〜6の知識をまとめて1つのUIを作ってみよう
7. 子viewにデータを渡す
8. 色々な機器でプレビューする方法

S1 データの扱い方と今回使うデータの確認

要点…ファイルの内容と連携を確認する。今回はデータ内容を.jsonで管理し.swiftでデータの型や利用を宣言するという内容でした

用語

※注…今後の演習でこれらの関係が把握できてないと演習で困るので頭に入れておいてください(チュートリアルにも書いてる)

Landmark.swift...データの型や扱いを宣言しているファイル。プレビューはない
landmarkData.json…データの詳細が記述されてるファイル。Landmark.swiftで宣言された型と一致したデータが格納されている。
LandmarkDetail.swift…プレビューはここでする。前回のチュートリアルで使ったLandmark.swiftと同じ。

S2 行表示の基本とデータの引用

要点…bodyで必要なデータを宣言して今回のファイルで扱う方法と、プレビューでそれを反映する。

LandmarkRow.swift

struct LandmarkRow: View {
    var landmark: Landmark

とチュートリアルで宣言しますが「landmark」と「.json (引用したいデータ)」という表現が頻出します。
「landmark」は好きな名前で宣言しても大丈夫ですが、：の後はファイル名なので一致しないとエラーを吐きます。

LandmarkRow.swift

...
landmark.image
Text(landmark.name)

...
struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow(landmark: landmarkData[0])
    }
}

等で使われていることを確認してください。
Xcodeではcommandキーを押しながら「Edit all in scope」をクリックすると、同じ構造体内で宣言した箇所の名前を一括で変更できます。

.nameを.stateにしてもエラーが出ずに反映されることも確認してみてください。型が不一致だと当然エラーを吐きます

また

LandmarkRow.swift

        LandmarkRow(landmark: landmarkData[0])

[0]の部分は配列の順番を反映していて、データの数以内の数字であればそれもプレビューに反映されます。1とか入れてみるとわかります。

用語…なし
S3 行表示をプレビュー構造体で操作し表示する

要点…プレビューはGroup{}でデータを操作できるよ。プレビューレイアウトはGroup{}外で一括管理できるよという話。これを使わずに

LandmarkRow.swift

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow(landmark: landmarkData[0])
        LandmarkRow(landmark: landmarkData[1])
    }
}

と書くと要素が2つ表示されずにエラーを吐きます。(2つ表示する方法は次のSでやります)

ちなみに、.previewLayoutをコメントアウトするとiPhoneのプレビューが2つ並びます。

用語…なし
S4 リストを行表示する方法

要点…List{}で表示すれば、リストを並べられるよという話。配列を増やせばその分表示される。

S5 List{}を使わずに、リストを生成する方法

要点…Identifiableプロコトルを使えば表示できるよという話。Appleさんは2つの方法(S4とS5)の方法があるよと言ってる。

用語
プロコトル…正直よくわからないので、後で書く

S6 Listにナビゲーションリンクを追加する

要点…ナビゲーションリンクを追加すると、リストをタッチした時に反映されるという話

S7 子viewにデータを渡す

要点…正直ここはなにがしたいのかわからなかった。後でわかったら追記します。

S8 プレビューに色々な機器で表示する

要点…プレビューで色々なiOS機器を指定できるというだけ。

LandmarkRow.swift

ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
 

ここにプレビューしたい機器を書き込めば反映されます
その他

• var…型推測してくれる宣言です。intとかStringとかをJavaとかCのように宣言しなくてもいい高級言語の特徴。PHPとかでも同じものがある。
• structの後に宣言されてる「Hashable, Codabl」とは…？