このPartでは、画面遷移について解説していきたいと思います。
画面遷移の仕方は大きく分けて2パターンあります。
ナビゲーション遷移と、モーダル遷移です。このpartでこの二つの画面遷移を使いこなせるようになりましょう。

ナビゲーション遷移

まずは、ナビゲーション遷移から解説していきたいと思います。
ナビゲーション遷移というのは、ナビゲーションバーを利用し、左から右に流れるようなアニメーションで遷移します。
戻るボタンは自動的に配置されます。
簡単に言うと、横の遷移のことですね。

いつも通り、Part7という名前で、プロジェクトを作成してください。プロジェクト作成手順は今回省略します。

1. 遷移先を作る
   まずは、画面の遷移先を作りましょう。
   新しい画面なので、新しいファイルで作りましょう。
   
   フォルダを選択してcommand + n

   ---

   
   ①SwiftUI Viewを選択
   ②Nextをクリック

   ---

   
   ①Save As:のところにSecondView.swiftと入力
   ②Createをクリック

   これで、SecontViewという新しいファイル(画面)ができました。
   
   

2. SecondViewの装飾
   画面遷移したことをわかりやすくするために、画面全体をオレンジ色にしてTextでSecontViewと表示させましょう。var body: some View {の中を以下のように変更してください。

   ZStack {
       Color(.orange)
   	.edgesIgnoringSafeArea(.all)
       Text("Second View")
   }
   

   追記する場所

   

   これで画面がオレンジ色になるかと思います。
   
   
   

3. ナビゲーションバーをつける
   まず、ナビゲーション遷移するには、ナビゲーションバーが必要です。
   ナビゲーションバーを設置しましょう。
   ContentView.swiftに戻って、var body: some View {の中に以下のコードを記述してください。

   NavigationStack {
       VStack {
   	Image(systemName: "globe")
   	    .imageScale(.large)
   	    .foregroundColor(.accentColor)
   	Text("Hello, world!")
       }
       .padding()
       .navigationTitle("画面1")
   }
   

   変更する場所

   

   上記のコードを記述すると、ナビゲーションバーが設置されます。
   

   
   

4. ナビゲーション遷移
   では、いよいよ画面遷移の処理を書いていきましょう。
   VStackの中身を以下のように変更してください。

   VStack {
       NavigationLink(destination: SecondView().navigationTitle("画面2")) {
   	Text("SecondViewへ")
       }
   }
   

   変更する場所

   

   これでナビゲーション遷移ができるようになりましたので、実行して確認しましょう。
   

   これでナビゲーション遷移ができました。
   やったこととしては、NavigationStackでナビゲーションバーを用意して、NavigationLinkを使って画面遷移させるだけです。

モーダル遷移

では、次にモーダル遷移について解説していきたいと思います。
モーダル遷移は下から上に覆いかぶさるように遷移する画面遷移のことです。
先ほど作成したプロジェクトをそのまま使って実装していきましょう。

1. 遷移先を作る
   まずは遷移先を作りましょう。
   
   フォルダを選択してcommand + n

   ---

   
   ①SwiftUI Viewを選択
   ②Nextをクリック

   ---

   
   ①Save As:のところにThirdViewと入力
   ②Createをクリック
   これで、ThirdViewという新しいファイル(画面)ができました。
   
   

2. ThirdViewの装飾
   画面遷移したことをわかりやすくするために、画面全体を緑色にしてTextでThirdViewと表示させましょう。var body: some View {の中を以下のように変更してください。

   ZStack {
       Color(.green)
   	.edgesIgnoringSafeArea(.all)
       Text("ThirdView")
   }
   

   追記する場所

   

   これで画面が緑色になりました。
   
   
   

3. ボタンを作る
   では、画面遷移させていきましょう。
   ContentViewに戻って、画面遷移させるボタンを配置しましょう。以下のコードをVStackの中に書いてください。

   Button {
   
   } label: {
       Text("モーダル遷移")
   	.padding()
   }
   

   追記する場所

   

   これで、以下のようにボタンが表示されました。
   
   
   

4. 変数を宣言
   モーダル遷移は、画面遷移させるかさせないか変数が必要です。
   ContentView内に以下の変数を宣言してください。

   @State var isShowThirdView = false
   

   追記する場所

   

   
   

5. 遷移させるモディファイアをつける
   先ほど作成したButtonに対して、画面遷移させるモディファイアを追記します。

   Button {
   
   } label: {
       Text("モーダル遷移")
   	.padding()
   }
   .sheet(isPresented: $isShowThirdView) {
       ThirdView()
   }
   

   追記する場所

   

   
   

6. isShowThirdViewをtrueにする
   .sheetは、isShowThirdViewをtrueにしたら画面遷移の処理が行われます。
   なので、ボタンを押したらisShowThirdViewをtrueにしましょう。

   Button {
   +   isShowThirdView = true
   } label: {
   

   追記する場所

   

   これで画面遷移ができるようになりましたので、実行して確認しましょう。
   ボタンを押すと、緑の画面が表示されるはずです。
   
   これでモーダル遷移ができました！

全てのコード

import SwiftUI

struct ContentView: View {
    @State var isShowThirdView = false
    
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink(destination: SecondView().navigationTitle("画面2")) {
                    Text("SecondViewへ")
                }
                Button {
                    isShowThirdView = true
                } label: {
                    Text("モーダル遷移")
                        .padding()
                }
                .sheet(isPresented: $isShowThirdView) {
                    ThirdView()
                }
            }
            .padding()
            .navigationTitle("画面1")
        }
    }
}

import SwiftUI

struct SecondView: View {
    var body: some View {
        ZStack {
            Color(.orange)
                .edgesIgnoringSafeArea(.all)
            Text("Second View")
        }
    }
}

import SwiftUI

struct ThirdView: View {
    var body: some View {
        ZStack {
            Color(.green)
                .edgesIgnoringSafeArea(.all)
            Text("ThirdView")
        }
    }
}