SwiftUI NavigationStackの使い方【初心者向け解説】

2025年9月5日 2025年9月5日

mikishin

1. 1. NavigationStackの基本構造
2. 2. 複数画面を管理する
3. 3. パスを使った画面遷移管理
4. まとめ

SwiftUIのiOS16以降で導入されたNavigationStackは、従来のNavigationViewの後継となる新しいナビゲーションコンポーネントです。従来よりも柔軟で管理しやすくなっています。

この記事では、SwiftUI初心者向けにNavigationStackの基本的な使い方を紹介します。

1. NavigationStackの基本構造

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink("詳細画面へ") {
                DetailView()
            }
            .navigationTitle("ホーム画面")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("詳細画面です")
    }
}

ポイント： NavigationStack 内に NavigationLink を配置するのが基本です。

2. 複数画面を管理する

NavigationStackは「スタック構造」なので、複数の画面を積み重ねて管理できます。

NavigationStack {
    List(0..<5) { index in
        NavigationLink("Item \(index)") {
            Text("詳細画面 \(index)")
        }
    }
}

3. パスを使った画面遷移管理

@State で path を管理すると、コードから画面遷移を制御できます。

Intの配列pathの最後に値を設定すると.navigationDestinationの処理が起動され遷移が行われます。

@State private var path = [Int]()

NavigationStack(path: $path) {
    List(0..<5) { index in
        Button("Go to \(index)") {
            path.append(index)
        }
    }
    .navigationDestination(for: Int.self) { value in
        Text("画面 \(value)")
    }
}