見出し画像

アプリのややこしい画面遷移のコードをChatGPTに作ってもらった(swiftUI,iphoneアプリ)

アプリの画面遷移について、モーダル遷移と、ナビゲーション遷移と混在させた場合、どのようなロジックとすべきかをChatGPTに作ってもらってもらい、画面遷移についての実装する上でのアドバイスをもらっていこうかと思います。

今回のお題は、モーダル遷移し、そこからナビゲーション遷移させる

モーダル遷移で画面を表示し、そこからナビゲーション遷移をさせます。
また最後にスタートである画面に遷移したい場合、そのままナビゲーション遷移とするか、モーダル画面を閉じてスタート画面を表示させるかに着目し、ChatGPTにレクチャーしてもらおうと思います。

以前、画面遷移についてChatGTPにレクチャーしてもらった記事

モーダル遷移し、そこからナビゲーション遷移させるコードをChatGPTに教えてもらう

プロンプト

viewAからViewModalBをモーダルで表示
ViewModalBからViewCをナビゲーション遷移
ViewCからViewDにナビゲーション遷移
ViewDからViewEにナビゲーション遷移
ViewEからViewAにナビゲーション遷移

ChatGPTの回答

import SwiftUI

struct ContentView: View {
    @State private var showingModal = false
    
    var body: some View {
        NavigationView {
            VStack {
                Text("View A")
                Button("Show Modal B") {
                    showingModal = true
                }
            }
            .sheet(isPresented: $showingModal) {
                ViewModalB()
            }
        }
    }
}

struct ViewModalB: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("View Modal B")
                NavigationLink(destination: ViewC()) {
                    Text("Go to View C")
                }
            }
        }
    }
}

struct ViewC: View {
    var body: some View {
        VStack {
            Text("View C")
            NavigationLink(destination: ViewD()) {
                Text("Go to View D")
            }
        }
    }
}

struct ViewD: View {
    var body: some View {
        VStack {
            Text("View D")
            NavigationLink(destination: ViewE()) {
                Text("Go to View E")
            }
        }
    }
}

struct ViewE: View {
    var body: some View {
        VStack {
            Text("View E")
            NavigationLink(destination: ContentView()) {
                Text("Go to View A")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

このコードでは、以下の流れでビューが遷移します:ContentView (ViewA) からモーダル表示で ViewModalB を表示。
ViewModalB からナビゲーションリンクを使って ViewC へ遷移。
ViewC からナビゲーションリンクを使って ViewD へ遷移。
ViewD からナビゲーションリンクを使って ViewE へ遷移。
ViewE からナビゲーションリンクを使って ContentView (ViewA) へ戻る。

このように、SwiftUIを使ってモーダル表示とナビゲーションを組み合わせてビュー間の遷移を実現できます。

元の画面に戻る際には、ナビゲーション遷移か、モーダル画面を閉じるか?

ViewA画面を起点とし、そこからモーダル画面を表示させ、ナビゲーション遷移させたのちに、再度ViewA画面に遷移させたい場合は、モーダル画面を閉じて起点の画面を表示させるのが自然な感じがしますが、そのあたりChatGTPにアドバイスしてもらおうかと思います。

プロンプト

'ViewEからViewAにナビゲーション遷移'について
この場合、ViewModalBのモーダルを閉じて、
ViewA画面に戻った方が良いと思いますか
意見を聞かせてください

ChatGPTの回答

このシナリオでは、ViewEからViewAに戻る際にViewModalBのモーダルを閉じるかどうかは、アプリケーションのユーザー体験とナビゲーションフローに依存します。以下の点を考慮すると良いでしょう。

モーダルを閉じる方が良い場合
ユーザー体験のシンプルさ: ユーザーが複数の画面を経由した後、元の画面に戻ることで一貫性を保てる。モーダルを閉じてViewAに戻ることで、ユーザーがアプリ内のコンテキストをより簡単に理解できる。
ヒストリ管理の簡便化: モーダルを閉じることで、ナビゲーションスタックをシンプルに保てる。これにより、不要なビューがヒストリに残るのを防げる。

モーダルを閉じない方が良い場合
途中の情報保持: モーダル内で入力された情報や状態を維持したい場合。例えば、ViewModalBで入力したデータが後のビューで使用される場合など。
一時的な遷移: ViewEからViewAに戻るのが一時的なものであり、ユーザーが再度モーダルに戻る可能性が高い場合。これにより、ユーザーがモーダルを再度開く手間を省ける。

おわりに

最後まで読んでいただき、ありがとうございます!

これまで数パターンの画面遷移方法について、ChatGPTに教えてもらい、だいぶ実装イメージもついてきましたので、イメージした画面遷移が作れそうなきがします!

ChatGPTのプログラミングレクチャーは、実際にコードを書き動作確認をしながら挙動を試せて、不明な点があれば質問できるので、効率よく学習できるかなと思います!

レクチャーといっても全てお任せではなく、自分で課題を見つけ、質問する要点をまとめてChatGPTに聞きにいく必要がありますので、前段のステップは少々準備が必要ですが、それらの作業を実施することで、要点の整理や、課題解決能力の向上につながるかと思います。作業効率も上がりますし良いことづくしですね!

おまけ

最近、ChatGPTを使用し、色々なことを模索しています。
もしよければ、以下の記事も見て頂けると嬉しいです!





この記事が気に入ったらサポートをしてみませんか?