SwiftUIのForEachでindexを使うとクラッシュする！？原因と回避策を徹底解説

はじめに (対象読者・この記事でわかること)

この記事は、SwiftUIを使ったiOSアプリ開発に挑戦している中級者の開発者を対象にしています。特に、ForEachで配列を扱う際に「なぜかクラッシュする」「indexがおかしい」といった問題に直面している方におすすめです。

この記事を読むことで、SwiftUIのForEachがindexを扱う際の挙動の仕組みと、安全にindexを使うための実装パターンを習得できます。また、クラッシュの原因を理解し、今後同様のトラブルを回避できるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - Swiftの基本的な文法（配列、クロージャなど） - SwiftUIのViewプロトコルとForEachの基本的な使い方 - Xcodeでのデバッグ経験

ForEachでindexを使うとクラッシュする？その仕組みとは

SwiftUIのForEachは、配列の要素に対してViewを生成する際に、各要素を一意に識別するためのidを必要とします。通常は配列の要素そのものがIdentifiableプロトコルに準拠しているか、\.selfで識別子を指定します。

しかし、配列のindicesを使ってForEachを回すと、状況によっては予期せぬクラッシュや意図しない再描画が発生することがあります。これは、SwiftUIの差分更新アルゴリズムと、配列のindexが動的に変化する性質が相反するためです。

例えば、配列の要素が削除・並び替え・フィルタリングされるような動的なUIでは、indexが変わることでViewの識別子が一貫せず、結果としてクラッシュや表示崩れが起きます。

具体的な手順と安全な実装方法

ここでは、ForEachでindexを安全に扱うための実装パターンを解説します。

パターン1：enumerated()を使った安全なindex取得

まず、推奨される方法としてenumerated()を使った方法があります。

Swift

struct ContentView: View {
    let items = ["Apple", "Banana", "Cherry"]

    var body: some View {
        List {
            ForEach(Array(items.enumerated()), id: \.offset) { index, item in
                HStack {
                    Text("\(index + 1)")
                        .frame(width: 30)
                    Text(item)
                }
            }
        }
    }
}

この方法では、enumerated()によって(offset: Int, element: String)というタプルを生成し、id: \.offsetでindexを識別子として扱います。これにより、配列の要素が変化してもindexが常に正しく対応付けられます。

パターン2：Identifiableな構造体を用意する

次に、より堅牢な方法として、専用の構造体を定義する方法があります。

Swift

struct IndexedItem: Identifiable {
    let id: Int
    let name: String

    init(index: Int, name: String) {
        self.id = index
        self.name = name
    }
}

struct ContentView: View {
    let items = ["Dog", "Elephant", "Fox"]
    var indexedItems: [IndexedItem] {
        items.enumerated().map { IndexedItem(index: $0.offset, name: $0.element) }
    }

    var body: some View {
        List {
            ForEach(indexedItems) { item in
                HStack {
                    Text("\(item.id + 1)")
                        .frame(width: 30)
                    Text(item.name)
                }
            }
            .onDelete(perform: deleteItems)
        }
    }

    func deleteItems(at offsets: IndexSet) {
        // 削除処理の実装
    }
}

この方法では、独自に定義したIndexedItemがIdentifiableプロトコルに準拠しているため、SwiftUIがViewの差分更新を正確に行えます。また、後から拡張しやすく、他のプロパティを追加することも容易です。

ハマった点と注意事項

実装中に陥りやすい落とし穴として、以下のようなコードがあります：

Swift

// ❌ 危険な実装例
ForEach(items.indices, id: \.self) { index in
    Text(items[index])  // クラッシュの可能性あり
}

このコードは、配列のindicesを直接ForEachに渡しています。しかし、配列の要素が動的に変化する（削除・ソートなど）場合、indexが無効になることがあります。特に、配列の要素数が減った直後にitems[index]にアクセスしようとすると、Index out of rangeエラーが発生します。

また、SwiftUIのView更新タイミングと配列の状態が一致しないこともあり、予期せぬタイミングでクラッシュが起きる可能性があります。

解決策とベストプラクティス

上記の問題を回避するためのベストプラクティスをまとめます：

配列の要素が動的に変化する場合は、必ずenumerated()を使用する
独自のIdentifiableな構造体を定義することで、型安全を保つ
indicesを直接ForEachに渡すのは避ける
削除・並び替え機能を実装する場合は、専用のViewModelを用意して状態管理を一元化する

実際のプロジェクトでは、以下のようなViewModelを用意することも検討しましょう：

Swift

class ItemViewModel: ObservableObject {
    @Published var indexedItems: [IndexedItem] = []

    init(items: [String]) {
        self.indexedItems = items.enumerated().map { IndexedItem(index: $0.offset, name: $0.element) }
    }

    func deleteItems(at offsets: IndexSet) {
        indexedItems.remove(atOffsets: offsets)
        // indexを振り直す
        for (index, item) in indexedItems.enumerated() {
            indexedItems[index].id = index
        }
    }
}

まとめ

本記事では、SwiftUIのForEachでindexを扱う際の落とし穴と、それを回避するための実装パターンを解説しました。

単純にindicesを使うと、配列の動的変化によりクラッシュする可能性がある
enumerated()を使うことで、安全にindexを扱える
独自のIdentifiableな構造体を定義することで、保守性の高いコードになる

この記事を通して、SwiftUIでより堅牢で予測可能なUI実装ができるようになりました。今後は、より複雑な状態管理や、アニメーション付きのリスト更新についても記事にする予定です。

参考資料

参考にした記事、ドキュメント、書籍などがあれば、必ず記載しましょう。

SwiftUIのForEachでindexを使うとクラッシュする！？原因と回避策を徹底解説🍎