配列とList：タップされたList行に該当する値を変数に代入したい

実現したいこと

・単一行が選択可能なListの生成
・Listコンテンツである配列内の値を変数へ代入

前提

Listの単一行選択(タップ)すると、Listコンテンツである、配列の中の値(都道府県名)が変数に代入されるシステムを実現させています。

発生している問題

・Listにおいて、ユーザーによって選択された行に該当する配列のコレクションの値(都道府県名)を変数に代入する方法がわからない状態です。

実現させたい挙動
・変更ボタンタップするとモーダル表示
・キャンセルボタンタップするとモーダル消える *このとき都道府県名が入る変数は”未選択”の状態(初期値)
・モーダルによりList表示の状態で都道府名をタップすると変数初期値が変わり選択された県名が代入される
・件名が代入された状態でキャンセルボタンをタップしても県名はそのまま

該当のソースコード

swiftUI
1import SwiftUI
2
3
4struct PrefecturesData:Identifiable,Hashable {
5    var id = UUID()
6    var name:String
7}
8
9//ForEachに渡すデータコレクション
10var prefectureArray = [
11    PrefecturesData(name: "北海道"),PrefecturesData(name: "青森県"),
12    PrefecturesData(name: "岩手県"),PrefecturesData(name: "宮城県"),
13    PrefecturesData(name: "秋田県"),PrefecturesData(name: "山形県"),
14    PrefecturesData(name: "福島県"),PrefecturesData(name: "茨城県"),
15    PrefecturesData(name: "栃木県"),PrefecturesData(name: "群馬県"),
16    PrefecturesData(name: "埼玉県"),PrefecturesData(name: "千葉県"),
17    PrefecturesData(name: "東京都"),PrefecturesData(name: "神奈川県"),
18    PrefecturesData(name: "新潟県"),PrefecturesData(name: "富山県"),
19    PrefecturesData(name: "石川県"),PrefecturesData(name: "福井県"),
20    PrefecturesData(name: "山梨県"),PrefecturesData(name: "長野県"),
21    PrefecturesData(name: "岐阜県"),PrefecturesData(name: "静岡県"),
22    PrefecturesData(name: "愛知県"),PrefecturesData(name: "三重県"),
23    PrefecturesData(name: "滋賀県"),PrefecturesData(name: "京都府"),
24    PrefecturesData(name: "大阪府"),PrefecturesData(name: "兵庫県"),
25    PrefecturesData(name: "奈良県"),PrefecturesData(name: "和歌山県"),
26    PrefecturesData(name: "鳥取県"),PrefecturesData(name: "島根県"),
27    PrefecturesData(name: "岡山県"),PrefecturesData(name: "広島県"),
28    PrefecturesData(name: "山口県"),PrefecturesData(name: "徳島県"),
29    PrefecturesData(name: "香川県"),PrefecturesData(name: "愛媛県"),
30    PrefecturesData(name: "高知県"),PrefecturesData(name: "福岡県"),
31    PrefecturesData(name: "佐賀県"),PrefecturesData(name: "長崎県"),
32    PrefecturesData(name: "熊本県"),PrefecturesData(name: "大分県"),
33    PrefecturesData(name: "宮城県"),PrefecturesData(name: "鹿児島県"),
34    PrefecturesData(name: "沖縄県")
35]
36
37
38struct PrefecturesView:View {
39    
40    var array:PrefecturesData
41    
42    @Binding var isModal:Bool
43    @Binding var prefectures:String
44    
45    var body: some View {
46
47        NavigationView {
48            List {
49                //インデックス番号を使いリスト表示
50                ForEach(prefectureArray) { index in
51                    Text(index.name)
52                }
53            }
54            
55            .onTapGesture {
56                
57                
58                isModal.toggle()
59                prefectures = array.name
60
61            }
62            .toolbar {
63                ToolbarItem(placement: .navigationBarTrailing) {
64                    Button(action: {
65
66                        isModal.toggle()
67
68                    }, label: {
69                        Text("Cansel")
70                    })
71
72                }
73                ToolbarItem(placement: .principal) {
74                    Text("都道府県")
75
76                        .font(.system(size:18))
77                }
78            }
79        }
80    }
81}
82
83
84struct ContentView: View {
85    
86    @State var prefectures = "未選択"
87    @State var isModal = false
88
89    var body: some View {
90        VStack {
91            HStack {
92                Text("都道府県")
93
94                Spacer()
95
96                Text(prefectures).padding()
97
98                Spacer()
99
100                Button(action: {
101
102                    isModal.toggle()
103
104                }, label: {
105                    Text("変更")
106                })
107                .padding()
108                .fullScreenCover(isPresented: $isModal, content: {
109                    PrefecturesView(array: prefectureArray[0], isModal: $isModal, prefectures: $prefectures)
110                })
111
112
113            }.padding()
114
115            Spacer()
116
117        }
118    }
119}
120
121
122
123
124
125
126
127
128
129//prefecturesViewのプレビュー
130struct PrefecturesViewWapper:View {
131
132    @State var isModal = false
133    @State var prefectures = ""
134    
135    var body: some View {
136        PrefecturesView(array: prefectureArray[0], isModal: $isModal, prefectures: $prefectures)
137    }
138
139}
140struct ContentView_Previews: PreviewProvider {
141    static var previews: some View {
142        ContentView()
143        PrefecturesViewWapper()
144    }
145}
146

試したこと、わからないこと

・単体選択・編集の記述やリファレンス参考にコードを打ってみた
・配列から要素を参照・取り出す方法の見直し
・タップジェスチャーを使ってみたり、、データの構築の部分での作り込みの部分で影響があるのか、、。

Listにselectionを引数として渡して単体選択を許可する記事やリファレンスを参考したのですが、Listの横に編集マークを出現させて編集する仕様を実現させたいわけではないですし、
ユーザーは何をタップするのかこちらには判断できない状態において、配列から該当する要素が取り出され、値が変数に代入されるようにするには、普通に該当する配列からインデックスを取り出すだけでは実現できないのではないかと考えています。
現状自分には理解が及ばない状態にあります、、、
ご教授のほどよろしくお願いします。

参考にした記事
https://shuhey-hashimoto.com/swiftui/%E3%80%90swiftui%E3%80%91list%E3%81%AE%E6%A9%9F%E8%83%BD-selection%E3%81%A7%E3%82%BB%E3%83%AB%E3%81%AE%E9%81%B8%E6%8A%9E/

https://shuhey-hashimoto.com/swiftui/swiftui-list%e3%81%ae%e6%a9%9f%e8%83%bd-%e8%a1%8c%e3%81%ae%e4%b8%a6%e3%81%b9%e6%9b%bf%e3%81%88%e3%81%a8%e5%89%8a%e9%99%a4/

https://capibara1969.com/3478/

https://capibara1969.com/3510/

https://www.choge-blog.com/programming/swiftui%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AB%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E3%80%8C%E3%82%B8%E3%82%A7%E3%82%B9%E3%83%81%E3%83%A3gesture%E3%80%8D/

https://qiita.com/REON/items/1f33886d90b4f758e715

https://tech.amefure.com/swift-struct-index

https://software.small-desk.com/development/2021/08/26/swiftui-howto-utilize-selectionresult/

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

hoshi-takanori

2023/03/28 08:23

PrefecturesData の id が UUID() って謎すぎる…。そして、タップ処理はリスト全体ではなく、各項目に onTapGesture を設定する必要があるのでは。

matubokkuri

2023/03/28 09:41

コメントありがとうございます！ご指摘の「idがUUIDが謎」ということなのですが実現させたいアプリの使用上、特に指定する必要があるわけではないのに指定しているからでしょうか？

hoshi-takanori

2023/03/28 09:47

var id = UUID() ってことは毎回ランダムな値が生成されるので、各県に対応する id として意味があるように思えないってことです。(情報システムにおける id の意味が分かってなさそう…)

matubokkuri

2023/03/28 10:07 編集

コメントありがとうございます！そうですね、、知識が足りないです。あまりよくわかっていないものを使って実装できても意味がないので、UUIDを使わずにhoshiさんに頂いたアドバイスを参考に改めて実装したいと思います。 idについて理解を深めてこのことが理解できるように勉強します。また質問することもあると思いますが、ご教授ほどよろしくお願いします！

行動規範の内容に同意します

回答1件

自己解決

import SwiftUI

//ForEachに渡すデータコレクション
var prefectureArray = [
    "北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県",
    "茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県",
    "新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県",
    "静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県",
    "奈良県","和歌山県","鳥取県","島根県","岡山県","広島県",
    "山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県",
    "長崎県","熊本県","大分県","宮城県","鹿児島県","沖縄県"]


struct PrefecturesView:View {
    
    @Binding var isModal:Bool
    @Binding var prefectures:String
    
    var body: some View {
        
        NavigationView {
            List {
                //インデックス番号を使いリスト表示
                ForEach(prefectureArray.indices, id: \.self) { index in
                    //各項目にタップジェスチャー設定
                    Text(prefectureArray[index]).onTapGesture {
                        //配列のインデックス番号と比較分岐
                        switch index {
                            
                        case 0:
                            prefectures = "北海道"
                        case 1:
                            prefectures = "青森県"
                        case 2:
                            prefectures = "岩手県"
                        case 3:
                            prefectures = "宮城県"
                        case 4:
                            prefectures = "秋田県"
                        case 5:
                            prefectures = "山形県"
                        case 6:
                            prefectures = "福島県"
                        case 7:
                            prefectures = "茨城県"
                        case 8:
                            prefectures = "栃木県"
                        case 9:
                            prefectures = "群馬県"
                        case 10:
                            prefectures = "埼玉県"
                        case 11:
                            prefectures = "千葉県"
                        case 12:
                            prefectures = "東京都"
                        case 13:
                            prefectures = "神奈川県"
                        case 14:
                            prefectures = "新潟県"
                        case 15:
                            prefectures = "富山県"
                        case 16:
                            prefectures = "石川県"
                        case 17:
                            prefectures = "福井県"
                        case 18:
                            prefectures = "山梨県"
                        case 19:
                            prefectures = "長野県"
                        case 20:
                            prefectures = "岐阜県"
                        case 21:
                            prefectures = "静岡県"
                        case 22:
                            prefectures = "愛知県"
                        case 23:
                            prefectures = "三重県"
                        case 24:
                            prefectures = "滋賀県"
                        case 25:
                            prefectures = "京都府"
                        case 26:
                            prefectures = "大阪府"
                        case 27:
                            prefectures = "兵庫県"
                        case 28:
                            prefectures = "奈良県"
                        case 29:
                            prefectures = "和歌山県"
                        case 30:
                            prefectures = "鳥取県"
                        case 31:
                            prefectures = "島根県"
                        case 32 :
                            prefectures = "岡山県"
                        case 33:
                            prefectures = "広島県"
                        case 34:
                            prefectures = "山口県"
                        case 35:
                            prefectures = "徳島県"
                        case 36:
                            prefectures = "香川県"
                        case 37:
                            prefectures = "愛媛県"
                        case 38:
                            prefectures = "高知県"
                        case 39:
                            prefectures = "福岡県"
                        case 40:
                            prefectures = "佐賀県"
                        case 41:
                            prefectures = "長崎県"
                        case 42 :
                            prefectures = "熊本県"
                        case 43:
                            prefectures = "大分県"
                        case 44:
                            prefectures = "宮城県"
                        case 45:
                            prefectures = "鹿児島県"
                        case 46:
                            prefectures = "沖縄"
                        default:
                            prefectures = "未選択"
                        }
                        
                        isModal.toggle()
                        
                    }
                }
            }
            
            
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        
                        isModal.toggle()
                        
                    }, label: {
                        Text("Cansel")
                    })
                    
                }
                ToolbarItem(placement: .principal) {
                    Text("都道府県")
                    
                        .font(.system(size:18))
                }
            }
        }
    }
}


struct ContentView: View {
    
    @State var prefectures = "未選択"
    @State var isModal = false
    
    var body: some View {
        VStack {
            HStack {
                Text("都道府県")
                
                Spacer()
                
                Text(prefectures).padding()
                
                Spacer()
                
                Button(action: {
                    
                    isModal.toggle()
                    
                }, label: {
                    Text("変更")
                })
                .padding()
                .fullScreenCover(isPresented: $isModal, content: {
                    PrefecturesView(isModal: $isModal, prefectures: $prefectures)
                })
                
                
            }.padding()
            
            Spacer()
            
        }
    }
}

//prefecturesViewのプレビュー
struct PrefecturesViewWapper:View {
    
    @State var isModal = false
    @State var prefectures = ""
    
    var body: some View {
        PrefecturesView(isModal: $isModal, prefectures: $prefectures)
    }
    
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
        PrefecturesViewWapper()
    }
}

投稿2023/03/28 12:28

matubokkuri

総合スコア5