見出し画像

【じっくりSw1ftUI48】実践編18〜第30章　SwiftUI リストとナビゲーション

M_Kaku堂

さてと、前回

で、

ビューの最初の基本、Stackやコンテナまわり

はやったので〜〜〜今回は、

リスト

についてやってく〜〜〜🕺

毎度、オイラの学び直しなんざ要らね👀って人は、

に今回のも載ってそうだからそっち見てやれば良いんじゃね😆
てな感じで早速、


じっくり第30章を読んでく👓

概要としては〜〜〜

ナビゲーションスタックとナビゲーションリンクが今回の肝

って感じで書いてんね👀

じゃ早速動かしながら

import SwiftUI

struct Essentials30ContentsView: View {
    var body: some View {
        ScrollView{
            HStack{
                
            }
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じで

まっさらちゃんからスタート

テケトーにリストビューを追加して

import SwiftUI

struct Essentials30ContentsView: View {
    var body: some View {
        ScrollView{
            VStack{
                List{
                    Text("🍎")
                    Text("🍌")
                    Text("🍉")
                    Text("🍇")
                }
            }
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じでやると、

あらま、真っ白😆

なぜかとゆーと、

ここでポイント①ScrollViewとListViewは相性が悪い

ので〜〜〜ScrolleViewを外してあげます

import SwiftUI

struct Essentials30ContentsView: View {
    var body: some View {
        VStack{
            List{
                Text("🍎")
                Text("🍌")
                Text("🍉")
                Text("🍇")
            }
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じのコードにしてあげると、、、

てな感じで、リストが出現
（あら！凄いやんか😯くるよ姉さん、、、😭）

テキストつけて横並びリスト

import SwiftUI

struct Essentials30ContentsView: View {
    var body: some View {
        VStack{
            List{
                HStack{
                    Text("🍎")
                    Text("りんご")
                }
                HStack{
                    Text("🍌")
                    Text("バナナ")
                }
                HStack{
                    Text("🍉")
                    Text("スイカ")
                }
                HStack{
                    Text("🍇")
                    Text("ぶどう")
                }
            }
        }
    }
}

#Preview {
    Essentials30ContentsView()
}
😍すでに、可愛い🤤

リストの線をつけてみる

import SwiftUI

struct Essentials30ContentsView: View {
    var body: some View {
        VStack{
            List{
                HStack{
                    Text("🍎")
                    Text("りんご")
                }
                .listItemTint(.red)
                HStack{
                    Text("🍌")
                    Text("バナナ")
                }
                .listItemTint(.yellow)
                HStack{
                    Text("🍉")
                    Text("スイカ")
                }
                .listItemTint(.green)
                HStack{
                    Text("🍇")
                    Text("ぶどう")
                }
                .listItemTint(.purple)
            }
            .listRowBackground(Image(systemName:" apple.logo"))
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じで、追加してみたけども、、、

変化ないぞ

ちなみに、ContentViewに同じコード追加して、シミュレーターちゃんもここで繰り出して、実行してみたけど、変化なし藁😆

色がついてないね👀💦

だったので、

頭でコードは書かずに、実際に動かしてみて、確認してね〜〜〜
👉動作検証もしないヤツって大恥かくだけなので

構造体を使って動的リストを〜〜〜

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

てな感じで構造体を追加〜〜〜

struct Essentials30ContentsView: View {
    var body: some View {
        VStack{
            Essentials30StandardListView()
            Essentials30DynamicListView()
        }
    }
}

struct Essentials30StandardListView: View {
    var body: some View {
        VStack{
            List{
                HStack{
                    Text("🍎")
                    Text("りんご")
                }
                .listItemTint(.red)
                HStack{
                    Text("🍌")
                    Text("バナナ")
                }
                .listItemTint(.yellow)
                HStack{
                    Text("🍉")
                    Text("スイカ")
                }
                .listItemTint(.green)
                HStack{
                    Text("🍇")
                    Text("ぶどう")
                }
                .listItemTint(.purple)
            }
            .listRowBackground(Image(systemName:" apple.logo"))
        }
    }
}

struct Essentials30DynamicListView: View {
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),
        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),
        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),
        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
      ]
    var body: some View {
        VStack{
            List(listFruitsMenu){ menu in
                HStack{
                    Text(menu.menuImage)
                    Text(menu.menuName)
                }
            }
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じでコードを編集して〜〜〜〜

でけた〜〜〜

と、ここで以降のコードを見てると、

  • 動的リストでやることが前提だし、

  • リストが増え過ぎても今回はScrollViewが使えなくて面倒

なので、

import SwiftUI

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),
        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),
        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),
        E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"),
        E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),
        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),
        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),
        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
      ]
    var body: some View {
        VStack{
            List(listFruitsMenu){ menu in
                HStack{
                    Text(menu.menuImage)
                    Text(menu.menuName)
                }
            }
        }
    }
}

#Preview {
    Essentials30ContentsView()
}
てな感じでスッキリまとめちゃう

トグルを追加してみよう

import SwiftUI

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        List{
            Toggle(isOn: $toggleStatus){
                Text("スイッチオン")
            }
            ForEach(listFruitsMenu) { menu in
                HStack{
                    Text(menu.menuImage)
                    Text(menu.menuName)
                }
            }
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じでやると、、、

スイッチオフの時

トグルちゃんとの間に区切りをつけよう

import SwiftUI

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        List{
            Section(){
                Toggle(isOn: $toggleStatus){
                    Text("スイッチ")
                }
            }
            Section(header:Text("品物")){
                ForEach(listFruitsMenu) { menu in
                    HStack{
                        Text(menu.menuImage)
                        Text(menu.menuName)
                    }
                }
            }
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じでやると、、、

ほほ、可愛い😍

更新可能リストにしてみよう

import SwiftUI

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        List{
            Section(){
                Toggle(isOn: $toggleStatus){
                    Text("スイッチ")
                }
            }
            Section(header:Text("品物")){
                ForEach(listFruitsMenu) { menu in
                    HStack{
                        Text(menu.menuImage)
                        Text(menu.menuName)
                    }
                }
            }
        }
        .refreshable {
            listFruitsMenu = [
            E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
            E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
            ]
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じにして〜〜〜

更新前〜〜〜
リストごと下にスワイプ
更新でけた〜〜〜

お次はNavigationLinkを使うのに、NavigationStackも追加してやってみよう

import SwiftUI

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        NavigationStack{
            List{
                Section(){
                    Toggle(isOn: $toggleStatus){
                        Text("スイッチ")
                    }
                }
                Section(header:Text("品物")){
                    ForEach(listFruitsMenu) { menu in
                        NavigationLink(value:menu.menuName){
                            HStack{
                                Text(menu.menuImage)
                                Text(menu.menuName)
                            }
                        }
                    }
                }
            }
            .refreshable {
                listFruitsMenu = [
                    E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
                    E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
                ]
            }
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じにすると〜〜〜

記事公開後にいつもやってるような、
項目ごとのリンクマークが右側に出現した〜〜〜🕺

ナビゲーション先を追加してみよう

と思って本のコードを確認して、コードを追加してみたけども、、、

import SwiftUI

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var stackPath = NavigationPath()
    var stackCount = stackPath.count
    stackPath.removeLast(stackCount)
    stackPath.append(value)
    
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        NavigationStack(path: $stackPath){
            List{
                Section(){
                    Toggle(isOn: $toggleStatus){
                        Text("スイッチ")
                    }
                }
                Section(header:Text("品物")){
                    ForEach(listFruitsMenu) { menu in
                        NavigationLink(value:menu.menuName){
                            HStack{
                                Text(menu.menuImage)
                                Text(menu.menuName)
                            }
                        }
                    }
                }
                Section(header:Text("個数")){
                    NavigationLink(value: listFruitsMenu.count){
                        Text("個数")
                    }
                }
            }
            .refreshable {
                listFruitsMenu = [
                    E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
                    E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
                ]
            }
        }
        .navigationDestination(for: String.self){menu in
                Text("選択された商品は、\(menu)")
        }
        .navigationDestination(for: Int.self){count in
                Text("個数は、\(count)")
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

でやると、

ある意味、いつもどおり

エラーが発生して使えない藁😆
こーゆー時は嵌め込む場所が大体違うので〜〜〜ボディの中に移してみたが、

てな感じでエラー笑

ま、valueってところに未登場のvalueをまんまやってるので動くわけがないのだが🤣

せめてちゃんと動かしてから、
きちんと動くサンプルだけを本に載せようや藁😆

てな感じで、stackPathで教科書通りに打とうが、navigationPathだろうが、動くわけがなく

import SwiftUI

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var navigationPath = NavigationPath()
    
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        var navigationCount = navigationPath.count
        navigationPath.removeLast(navigationCount)
        navigationPath.append(navigationCount)

        NavigationStack(path: $navigationPath){
            List{
                Section(){
                    Toggle(isOn: $toggleStatus){
                        Text("スイッチ")
                    }
                }
                Section(header:Text("品物")){
                    ForEach(listFruitsMenu) { menu in
                        NavigationLink(value:menu.menuName){
                            HStack{
                                Text(menu.menuImage)
                                Text(menu.menuName)
                            }
                        }
                    }
                }
                Section(header:Text("個数")){
                    NavigationLink(value: listFruitsMenu.count){
                        Text("個数")
                    }
                }
            }
            .refreshable {
                listFruitsMenu = [
                    E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
                    E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
                ]
            }
        }
        .navigationDestination(for: String.self){menu in
                Text("選択された商品は、\(menu)")
        }
        .navigationDestination(for: Int.self){count in
                Text("個数は、\(count)")
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

でやってみても〜〜〜

と、同じくエラー

元々のサンプルコードが破綻してるね藁🤣

冒頭のリンク先

を見てみても、ここの箇所は、おそらく本を刊行してから、気づいて

思いっきり削除されてるみたいだし笑😆
金返せよ〜〜〜

さてと、仕切り直して

import SwiftUI

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var navigationPath = NavigationPath()    
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        NavigationStack{
            List{
                Section(){
                    Toggle(isOn: $toggleStatus){
                        Text("スイッチ")
                    }
                }
                Section(header:Text("品物")){
                    ForEach(listFruitsMenu) { menu in
                        NavigationLink(value:menu.menuName){
                            HStack{
                                Text(menu.menuImage)
                                Text(menu.menuName)
                            }
                        }
                    }
                }
                Section(header:Text("個数")){
                    NavigationLink(value: listFruitsMenu.count){
                        Text("個数")
                    }
                }
            }
            .refreshable {
                listFruitsMenu = [
                    E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
                    E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
                ]
            }
        }
        .navigationDestination(for: String.self){menu in
                Text("選択された商品は、\(menu)")
        }
        .navigationDestination(for: Int.self){count in
                Text("個数は、\(count)")
        }
    }
}

#Preview {
    Essentials30ContentsView()
}

とりあえず、使えないコードは削除〜〜〜

ナビゲーションバーのカスタマイズをしてみよう

import SwiftUI

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var navigationPath = NavigationPath()
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        NavigationStack{
            List{
                Section(){
                    Toggle(isOn: $toggleStatus){
                        Text("スイッチ")
                    }
                }
                Section(header:Text("品物")){
                    ForEach(listFruitsMenu) { menu in
                        NavigationLink(value:menu.menuName){
                            HStack{
                                Text(menu.menuImage)
                                Text(menu.menuName)
                            }
                        }
                    }
                }
                Section(header:Text("個数")){
                    NavigationLink(value: listFruitsMenu.count){
                        Text("個数")
                    }
                }
            }
            .navigationTitle(
                Text("果物屋さんのメニュー")
            )
            .toolbar{
                ToolbarItem(placement: .navigationBarTrailing){
                    Button(action: addTask) {
                        Text("追加")
                    }
                }
            }
            .refreshable {
                listFruitsMenu = [
                    E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
                    E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
                ]
            }
        }
        .navigationDestination(for: String.self){menu in
                Text("選択された商品は、\(menu)")
        }
        .navigationDestination(for: Int.self){count in
                Text("個数は、\(count)")
        }
    }
    //いきなり未登場の関数が登場してるので、正常にエラー無しにするためだけに追加
    func addTask(){

    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じでコードを追加して〜〜〜

ま、ビューのカスタマイズイメージはできるけども

これだと、あくまでもレイアウトの話だけでしかないよね〜〜〜〜笑😆

編集可能なリストを作ろう

ここもサンプルを元にコードを追加してんだけど、、、

import SwiftUI

struct E30FruitsMenu: Identifiable{
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var navigationPath = NavigationPath()
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        NavigationStack{
            List{
                Section(){
                    Toggle(isOn: $toggleStatus){
                        Text("スイッチ")
                    }
                }
                Section(header:Text("品物")){
                    ForEach(listFruitsMenu) { menu in
                        NavigationLink(value:menu.menuName){
                            HStack{
                                Text(menu.menuImage)
                                Text(menu.menuName)
                            }
                        }
                    }
                    .onDelete(perform: { indexSet in
                        deleteMenu()
                    })
                }
                Section(header:Text("個数")){
                    NavigationLink(value: listFruitsMenu.count){
                        Text("個数")
                    }
                }
            }
            .navigationTitle(
                Text("果物屋さんのメニュー")
            )
            .toolbar{
                ToolbarItem(placement: .navigationBarTrailing){
                    Button(action: addTask) {
                        Text("追加")
                    }
                }
            }
            .refreshable {
                listFruitsMenu = [
                    E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
                    E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
                ]
            }
        }
        .navigationDestination(for: String.self){menu in
                Text("選択された商品は、\(menu)")
        }
        .navigationDestination(for: Int.self){count in
                Text("個数は、\(count)")
        }
    }
    //いきなり未登場の関数が登場してるので、正常にエラー無しにするためだけに追加
    func addTask(){
        
    }
    //ここもいきなり登場
    func deleteMenu(){
        //やりたい処理を追加
    }
}

#Preview {
    Essentials30ContentsView()
}

てな感じで、空の関数だけ設けてあげると

削除可能になって〜〜〜
削除でけた🕺

と移動も同様に！

import SwiftUI

struct E30FruitsMenu: Identifiable,Hashable {
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var navigationPath = NavigationPath()
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        NavigationStack{
            List{
                Section(){
                    Toggle(isOn: $toggleStatus){
                        Text("スイッチ")
                    }
                }
                Section(header:Text("品物")){
                    ForEach(listFruitsMenu,id: \.self) { menu in
                        NavigationLink(destination:Text(menu.menuImage).font(.largeTitle)){
                            HStack{
                                Text(menu.menuImage)
                                Text(menu.menuName)
                            }
                        }
                    }
                    .onDelete(perform: deleteMenu)
                    .onMove(perform: moveMenu)
                }
                Section(header:Text("個数")){
                    NavigationLink(value: listFruitsMenu.count){
                        Text("個数")
                    }
                }
            }
            .navigationTitle(
                Text("果物屋さんのメニュー")
            )
            .toolbar{
                ToolbarItem(placement: .navigationBarTrailing){
                    Button(action: addTask) {
                        Text("追加")
                    }
                }
                
            }
            .refreshable {
                listFruitsMenu = [
                    E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
                    E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
                ]
            }
        }
        .navigationDestination(for: String.self){menu in
                Text("選択された商品は、\(menu)")
        }
        .navigationDestination(for: Int.self){count in
                Text("個数は、\(count)")
        }
    }
    //いきなり未登場の関数が登場してるので、正常にエラー無しにするためだけに追加
    func addTask(){
        
    }
    //ここもいきなり登場
    func deleteMenu(at offset:IndexSet){
        //やりたい処理を追加
    }
    //移動用に追加
    func moveMenu(from source: IndexSet, to destionation: Int){

    }
}

#Preview {
    Essentials30ContentsView()
}

と思ったんだけど、プレビューでは、移動が確認できないので、

一番上のリンゴをタップしたまま一番下に動かすと
てな感じで移動でけた🕺

あとは、Hierarchieリストとか複数列リストなんだけど、

これは、第34章と32章でやるのでと、本自体が割愛してるので、

内容としては以上。。。

今回の本のサンプルはオイラがやってる分でもかなり質が悪く、

正直、中途半端な動かないコードなんて

ゴミ、害悪、迷惑

以外の何者でもないので、申し訳ないけど、手直しするや

のなので〜〜〜でやってるコードや

なんかを参考に

今回のまとめコード（整理済み）

import SwiftUI

struct E30FruitsMenu: Identifiable,Hashable {
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var navigationPath = NavigationPath()
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        NavigationStack{
            List{
                Section(){
                    Toggle(isOn: $toggleStatus){
                        Text("スイッチ")
                    }
                }
                Section(header:Text("品物")){
                    ForEach(listFruitsMenu,id: \.self) { menu in
                        NavigationLink(destination:Text(menu.menuImage).font(.largeTitle)){
                            HStack{
                                Text(menu.menuImage)
                                Text(menu.menuName)
                            }
                        }
                    }
                    .onDelete(perform: deleteMenu)
                    .onMove(perform: moveMenu)
                }
            }
            .navigationTitle(
                Text("果物屋さんのメニュー")
            )
            .toolbar{
                EditButton()
            }
            .refreshable {
                listFruitsMenu = [
                    E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
                    E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
                ]
            }
        }
        .navigationDestination(for: String.self){menu in
                Text("選択された商品は、\(menu)")
        }
    }
    //削除用の関数
    func deleteMenu(at offset:IndexSet){
        listFruitsMenu.remove(atOffsets: offset)
    }
    //移動用の関数
    func moveMenu(from source: IndexSet, to destionation: Int){
        listFruitsMenu.move(fromOffsets: source, toOffset: destionation)
    }
}

#Preview {
    Essentials30ContentsView()
}

これでちゃんとdestinationも入れたから

桃ちゃんをタップしてみると
桃ちゃんが表示される画面に遷移した🕺
左上のボタンをタップして
元の画面に戻り、
今度は右上のEditボタンをタップ
バナナの左側のマイナスボタンをタップ
出てくるDeleteボタンをタップ
バナナが消えたことも確認ずみ
右上のDoneボタンをタップして
編集モードも解除できた🕺

本当に最近、どの技術書でもさらに多くなってきてるんだけど

  • 分かってる前提で、サンプルコードの全体像すら端折る

  • 説明が薄すぎる

  • きちんとそれで動くかの検証もしてない

  • 教える順番が完全に誤ってる

といった、

👉金返せレベル

な本が特に最新の言語に関しては多過ぎる。しかもそれを、

それは読者の勉強不足、そんなコードくらい自分でなおせて当たり前
👉入門書とか教科書でそれをやったらダメ🙅🙅‍♀️🙅‍♂️

ま、だから、D・A・ノーマンなんかも、

『インビジブルコンピュータ』や『未来のモノのデザイン』なんかで、それが何故起きるのかを

典型的な理系バカは、機械中心主義で人間よりも機械の共通基盤に人間が寄せている＝ロボット人間みたいになっている
👉自分たちが最終的に作ったものを使うのは人間であることを置き去りにしてる

から、

ヒットしない、使われない、不要とゴミ箱に捨てられる

と喝破してるけどね
エジソンの蓄音機然り、30年くらい前の低迷してたApple然り。。。
それを、入門者向けの本を書く人間がそれを周りがやってるからってやったところで、

そんな本は、わかりにくいって評判になって、買われず、
売れ行きも悪いから自分の首を絞めるだけなんだけどねえ🧐

自分で出してる本のサンプルコードがきちんと動くかどうかも検証してないような本なんて先にやってみた人が教えてくれたら、次の人で誰も買うわけないでしょ藁🤣
クヌースが50年近く前からゆーてる

文芸的プログラミング

を知らないな＝素人かモグリくらいにしかオイラも思わない。
ま、日本の技術書なんてSwiftUIに関してはさらに粗悪なものしかないから、

日本人の自称、技術者が書いてる本なんてオイラは最初から読もうとすら思わないし、手にも取らないけどね〜〜〜〜
この本以上に悪いもしかみたことないから

ま、今回出てきたナビゲーションの使い方で一番動くサンプルは、

普段記事公開後に載せてるサンプルコードがナビゲーションの最たる使い方ですでに30回以上は毎回載せてると思うので、そっちを見た方が

きちんと動くサンプルとして学習には打ってつけかもね🕺
オイラは無駄なコードと動かないコードほど
世の中に意味のないものはないと思うっているので〜〜〜

Apple公式

さてと次回は

ナビゲーションも出てきたところで、

第31章　SwiftUI リストとナビゲーションのチュートリアル

をやってく🕺

記事公開後、

いつもどおり、

でやった操作を〜〜〜

Editボタンは消えてるけど、てな感じで移動も削除も
＝編集可能😛
てな
てな
感じでホイ、今週も完了🕺

アプリを開き直すと

初期値に戻ってるし
リフレッシュ後も
同じ状態藁🤣

まあ、削除とか移動した状態を保ちたいならば、

前々回でやった@AppStorageなんかで、永続データとして管理するしかないんだけどねえ🧐
CloudKitなんかのあたりでそこら辺はやりそうだから、今回はここまで〜〜〜

サンプルコード

◾️Essentials30.swift

import SwiftUI
import WebKit

//タイトル
let essentialsChapter30NavigationTitle = "第30章"
let essentialsChapter30Title = "第30章　SwiftUIリストとナビゲーション"
let essentialsChapter30SubTitle = "第１節　SwiftUIリストとナビゲーション"

//コード
let codeEssentials30 = """
import SwiftUI

struct E30FruitsMenu: Identifiable,Hashable {
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var navigationPath = NavigationPath()
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        NavigationStack{
            List{
                Section(){
                    Toggle(isOn: $toggleStatus){
                        Text("スイッチ")
                    }
                }
                Section(header:Text("品物")){
                    ForEach(listFruitsMenu,id: \\.self) { menu in
                        NavigationLink(destination:Text(menu.menuImage).font(.largeTitle)){
                            HStack{
                                Text(menu.menuImage)
                                Text(menu.menuName)
                            }
                        }
                    }
                    .onDelete(perform: deleteMenu)
                    .onMove(perform: moveMenu)
                }
            }
            .navigationTitle(
                Text("果物屋さんのメニュー")
            )
            .toolbar{
                EditButton()
            }
            .refreshable {
                listFruitsMenu = [
                    E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
                    E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
                ]
            }
        }
        .navigationDestination(for: String.self){menu in
                Text("選択された商品は、\\(menu)")
        }
    }
    //削除用の関数
    func deleteMenu(at offset:IndexSet){
        listFruitsMenu.remove(atOffsets: offset)
    }
    //移動用の関数
    func moveMenu(from source: IndexSet, to destionation: Int){
        listFruitsMenu.move(fromOffsets: source, toOffset: destionation)
    }
}

#Preview {
    Essentials30ContentsView()
}
"""

//ポイント
let pointEssentials30 = """
ScrollViewとListViewは相性が悪い
"""
//URL
let urlEssentials30 = "https://note.com/m_kakudo/n/n7332d17d5d9a"

//ビュー管理構造体
struct ListiOSApp17DevelopmentEssentialsCh30: Identifiable {
    var id: Int
    var title: String
    var view: ViewEnumiOSApp17DevelopmentEssentialsCh30
}
//遷移先の画面を格納する列挙型
enum ViewEnumiOSApp17DevelopmentEssentialsCh30{
    case Sec1
}
//各項目に表示するリスト項目
let dataiOSApp17DevelopmentEssentialsCh30: [ListiOSApp17DevelopmentEssentialsCh30] = [
    ListiOSApp17DevelopmentEssentialsCh30(id: 1, title: essentialsChapter30SubTitle, view: .Sec1),
]
struct iOSApp17DevelopmentEssentialsCh30: View {
    var body: some View {
        VStack {
            Divider()
            List (dataiOSApp17DevelopmentEssentialsCh30) { data in
                self.containedViewiOSApp17DevelopmentEssentialsCh30(dataiOSApp17DevelopmentEssentialsCh30: data)
            }
            .edgesIgnoringSafeArea([.bottom])
        }
        .navigationTitle(essentialsChapter30NavigationTitle)
        .navigationBarTitleDisplayMode(.inline)
    }
    //タップ後に遷移先へ遷移させる関数
    func containedViewiOSApp17DevelopmentEssentialsCh30(dataiOSApp17DevelopmentEssentialsCh30: ListiOSApp17DevelopmentEssentialsCh30) -> AnyView {
        switch dataiOSApp17DevelopmentEssentialsCh30.view {
        case .Sec1:
            return AnyView(NavigationLink (destination: Essentials30()) {
                Text(dataiOSApp17DevelopmentEssentialsCh30.title)
            })
        }
    }
}
#Preview {
    iOSApp17DevelopmentEssentialsCh30()
}

struct Essentials30: View {
    var body: some View {
        VStack{
            TabView {
                Essentials30ContentsView()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                Essentials30Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                Essentials30Points()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
                Essentials30WEB()
                    .tabItem {
                        Image(systemName: webImageTab)
                        Text(webTextTab)
                    }
            }
        }
    }
}
#Preview {
    Essentials30()
}

struct Essentials30Code: View {
    var body: some View {
        ScrollView{
            Text(codeEssentials30)
        }
    }
}
#Preview {
    Essentials30Code()
}
struct Essentials30Points: View {
    var body: some View {
        ScrollView{
            Text(pointEssentials30)
        }
    }
}
#Preview {
    Essentials30Points()
}
struct Essentials30WebView: UIViewRepresentable {
    let searchURL: URL
    func makeUIView(context: Context) -> WKWebView {
        let view = WKWebView()
        let request = URLRequest(url: searchURL)
        view.load(request)
        return view
    }
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
}
struct Essentials30WEB: View {
    private var url:URL = URL(string: urlEssentials30)!
    var body: some View {Essentials30WebView(searchURL: url)
    }
}
#Preview {
    Essentials30WEB()
}

struct E30FruitsMenu: Identifiable,Hashable {
    var id = UUID()
    var menuName: String
    var menuImage: String
}

struct Essentials30ContentsView: View {
    @State var toggleStatus = false
    @State var navigationPath = NavigationPath()
    @State var listFruitsMenu: [E30FruitsMenu] = [ E30FruitsMenu(menuName:"りんご",menuImage: "🍎"),        E30FruitsMenu(menuName:"バナナ",menuImage: "🍌"),        E30FruitsMenu(menuName:"西瓜",menuImage: "🍉"),          E30FruitsMenu(menuName:"葡萄",menuImage: "🍇"), E30FruitsMenu(menuName:"レモン",menuImage: "🍋"),        E30FruitsMenu(menuName:"メロン",menuImage: "🍈"),        E30FruitsMenu(menuName:"桃",menuImage: "🍑"),        E30FruitsMenu(menuName:"みかん",menuImage: "🍊"),
    ]
    var body: some View {
        NavigationStack{
            List{
                Section(){
                    Toggle(isOn: $toggleStatus){
                        Text("スイッチ")
                    }
                }
                Section(header:Text("品物")){
                    ForEach(listFruitsMenu,id: \.self) { menu in
                        NavigationLink(destination:Text(menu.menuImage).font(.largeTitle)){
                            HStack{
                                Text(menu.menuImage)
                                Text(menu.menuName)
                            }
                        }
                    }
                    .onDelete(perform: deleteMenu)
                    .onMove(perform: moveMenu)
                }
            }
            .navigationTitle(
                Text("果物屋さんのメニュー")
            )
            .toolbar{
                EditButton()
            }
            .refreshable {
                listFruitsMenu = [
                    E30FruitsMenu(menuName: "りんご", menuImage: "🍎"),
                    E30FruitsMenu(menuName: "桃", menuImage: "🍑"),
                ]
            }
        }
        .navigationDestination(for: String.self){menu in
                Text("選択された商品は、\(menu)")
        }
    }
    //削除用の関数
    func deleteMenu(at offset:IndexSet){
        listFruitsMenu.remove(atOffsets: offset)
    }
    //移動用の関数
    func moveMenu(from source: IndexSet, to destionation: Int){
        listFruitsMenu.move(fromOffsets: source, toOffset: destionation)
    }
}

#Preview {
    Essentials30ContentsView()
}

◾️EssentialsMenu.swift

//フレームワーク
import SwiftUI
import WebKit

//ビュー管理構造体
struct ListiOSApp17DevelopmentEssentials: Identifiable {
    var id: Int
    var title: String
    var view: ViewEnumiOSApp17DevelopmentEssentials
}
//遷移先の画面を格納する列挙型
enum ViewEnumiOSApp17DevelopmentEssentials {
    case Ch1
    //じっくり13で追加
    case Ch2
    //じっくり14で追加
    case Ch3
    //じっくり15で追加
    case Ch4
    //じっくり16で追加
    case Ch5
    //じっくり17で追加
    case Ch6
    //じっくり18で追加
    case Ch7
    //じっくり19で追加
    case Ch8
    //じっくり20、21で追加
    case Ch9
    //じっくり22、23で追加
    case Ch10
    //じっくり24で追加
    case Ch11
    //じっくり25で追加
    case Ch12
    //じっくり26で追加
    case Ch13
    //じっくり27,28で追加
    case Ch14
    //じっくり29で追加
    case Ch15
    //じっくり31で追加
    case Ch16
    //じっくり32で追加
    case Ch17
    //じっくり33で追加
    case Ch18
    //じっくり34で追加
    case Ch19
    //じっくり35で追加
    case Ch20
    //じっくり36で追加
    case Ch21
    //じっくり37で追加
    case Ch22
    //じっくり40で追加
    case Ch23
    //じっくり41で追加
    case Ch24
    //じっくり43で追加
    case Ch25
    //じっくり44で追加
    case Ch26
    //じっくり45で追加
    case Ch27
    //じっくり46で追加
    case Ch28
    //じっくり47で追加
    case Ch29
    //じっくり48で追加
    case Ch30
}
//各項目に表示する文字列
let dataiOSApp17DevelopmentEssentials: [ListiOSApp17DevelopmentEssentials] = [
    ListiOSApp17DevelopmentEssentials(id: 1, title: essentialsChapter1Title, view: .Ch1),
    //じっくり13で追加
    ListiOSApp17DevelopmentEssentials(id: 2, title: essentialsChapter2Title, view: .Ch2),
    //じっくり13で追加
    ListiOSApp17DevelopmentEssentials(id: 3, title: essentialsChapter3Title, view: .Ch3),
    //じっくり15で追加
    ListiOSApp17DevelopmentEssentials(id: 4, title: essentialsChapter4Title, view: .Ch4),
    //じっくり16で追加
    ListiOSApp17DevelopmentEssentials(id: 5, title: essentialsChapter5Title, view: .Ch5),
    //じっくり17で追加
    ListiOSApp17DevelopmentEssentials(id: 6, title: essentialsChapter6Title, view: .Ch6),
    //じっくり18で追加
    ListiOSApp17DevelopmentEssentials(id: 7, title: essentialsChapter7Title, view: .Ch7),
    //じっくり19で追加
    ListiOSApp17DevelopmentEssentials(id: 8, title: essentialsChapter8Title, view: .Ch8),
    //じっくり20、21で追加
    ListiOSApp17DevelopmentEssentials(id: 9, title: essentialsChapter9Title, view: .Ch9),
    //じっくり22、23で追加
    ListiOSApp17DevelopmentEssentials(id: 10, title: essentialsChapter10Title, view: .Ch10),
    //じっくり24で追加
    ListiOSApp17DevelopmentEssentials(id: 11, title: essentialsChapter11Title, view: .Ch11),
    //じっくり25で追加
    ListiOSApp17DevelopmentEssentials(id: 12, title: essentialsChapter12Title, view: .Ch12),
    //じっくり26で追加
    ListiOSApp17DevelopmentEssentials(id: 13, title: essentialsChapter13Title, view: .Ch13),
    //じっくり27,28で追加
    ListiOSApp17DevelopmentEssentials(id: 14, title: essentialsChapter14Title, view: .Ch14),
    //じっくり29で追加
    ListiOSApp17DevelopmentEssentials(id: 15, title: essentialsChapter15Title, view: .Ch15),
    //じっくり31で追加
    ListiOSApp17DevelopmentEssentials(id: 16, title: essentialsChapter16Title, view: .Ch16),
    //じっくり32で追加
    ListiOSApp17DevelopmentEssentials(id: 17, title: essentialsChapter17Title, view: .Ch17),
    //じっくり33で追加
    ListiOSApp17DevelopmentEssentials(id: 18, title: essentialsChapter18Title, view: .Ch18),
    //じっくり34で追加
    ListiOSApp17DevelopmentEssentials(id: 19, title: essentialsChapter19Title, view: .Ch19),
    //じっくり35で追加
    ListiOSApp17DevelopmentEssentials(id: 20, title: essentialsChapter20Title, view: .Ch20),
    //じっくり36で追加
    ListiOSApp17DevelopmentEssentials(id: 21, title: essentialsChapter21Title, view: .Ch21),
    //じっくり37で追加
    ListiOSApp17DevelopmentEssentials(id: 22, title: essentialsChapter22Title, view: .Ch22),
    //じっくり40で追加
    ListiOSApp17DevelopmentEssentials(id: 23, title: essentialsChapter23Title, view: .Ch23),
    //じっくり41で追加
    ListiOSApp17DevelopmentEssentials(id: 24, title: essentialsChapter24Title, view: .Ch24),
    //じっくり43で追加
    ListiOSApp17DevelopmentEssentials(id: 25, title: essentialsChapter25Title, view: .Ch25),
    //じっくり44で追加
    ListiOSApp17DevelopmentEssentials(id: 26, title: essentialsChapter26Title, view: .Ch26),
    //じっくり45で追加
    ListiOSApp17DevelopmentEssentials(id: 27, title: essentialsChapter27Title, view: .Ch27),
    //じっくり46で追加
    ListiOSApp17DevelopmentEssentials(id: 28, title: essentialsChapter28Title, view: .Ch28),
    //じっくり47で追加
    ListiOSApp17DevelopmentEssentials(id: 29, title: essentialsChapter29Title, view: .Ch29),
    //じっくり48で追加
    ListiOSApp17DevelopmentEssentials(id: 30, title: essentialsChapter30Title, view: .Ch30),
]

struct iOSApp17DevelopmentEssentials: View {
    var body: some View {
        VStack {
            Divider()
            List (dataiOSApp17DevelopmentEssentials) { data in
                self.containedViewiOSApp17DevelopmentEssentials(dataiOSApp17DevelopmentEssentials: data)
            }
            .edgesIgnoringSafeArea([.bottom])
        }
        .navigationTitle("iOS開発の章目次")
        .navigationBarTitleDisplayMode(.inline)
    }
    //タップ後に遷移先へ遷移させる関数
    func containedViewiOSApp17DevelopmentEssentials(dataiOSApp17DevelopmentEssentials: ListiOSApp17DevelopmentEssentials) -> AnyView {
        switch dataiOSApp17DevelopmentEssentials.view {
        case .Ch1:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh1()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり13で追加
        case .Ch2:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh2()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり13で追加
        case .Ch3:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh3()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり15で追加
        case .Ch4:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh4()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり16で追加
        case .Ch5:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh5()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり17で追加
        case .Ch6:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh6()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり18で追加
        case .Ch7:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh7()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり19で追加
        case .Ch8:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh8()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり20、21で追加
        case .Ch9:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh9()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり22、23で追加
        case .Ch10:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh10()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり24で追加
        case .Ch11:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh11()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり25で追加
        case .Ch12:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh12()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり26で追加
        case .Ch13:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh13()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり27,28で追加
        case .Ch14:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh14()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり29で追加
        case .Ch15:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh15()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり31で追加
        case .Ch16:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh16()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり32で追加
        case .Ch17:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh17()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり33で追加
        case .Ch18:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh18()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり34で追加
        case .Ch19:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh19()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり35で追加
        case .Ch20:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh20()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり36で追加
        case .Ch21:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh21()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり37で追加
        case .Ch22:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh22()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり40で追加
        case .Ch23:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh23()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり41で追加
        case .Ch24:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh24()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり43で追加
        case .Ch25:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh25()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり44で追加
        case .Ch26:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh26()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり45で追加
        case .Ch27:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh27()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり46で追加
        case .Ch28:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh28()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり47で追加
        case .Ch29:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh29()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
            //じっくり48で追加
        case .Ch30:
            return AnyView(NavigationLink (destination: iOSApp17DevelopmentEssentialsCh30()) {
                Text(dataiOSApp17DevelopmentEssentials.title)
            })
        }
    }
}

#Preview {
    iOSApp17DevelopmentEssentials()
}

以上🕺

さてと、あとはビール飲んで、まったり日経ザスタイルと今月号の文藝春秋でも読んで寝落ちよう藁🤣

みなさんも残り少ないけど、良き週末を〜〜〜〜

いいなと思ったら応援しよう！