%3Cbr%3E%3Cbr%3Emicomia株式会社の山東です。今回は「アプリの遷移」についてお話ししたいと思います。「遷移」という言葉を聞くと、私には少し思い出があります。エンジニアとして現場に入って間もない頃、簡単なUI修正のタスクを任されたのですが、遷移があまりにも複雑で、その画面にどうやって辿り着けばいいのか分からず、不安になったことを今でも覚えています。もともと個人でアプリを開発していた時は、「画面が移動できればそれでいい」と思っていて、画面同士がどのように繋がっているのかを深く考えたことはありませんでした。しかし実際の開発現場では、「どのようにその画面に遷移したか」 という過程や背景が非常に重要だと気づかされました。本記事では、そんな「遷移の裏側」に少しでも興味を持っていただけるよう、私の経験を交えながらお話ししていきます。%3Cbr%3E%3Cbr%3E%3Cbr%3E%3Cbr%3E私が記事でお伝えしたい内容画面遷移の基本Flutter ↔ FlutterFlow 遷移対応表図で理解する遷移の仕組み（どのような過程で目的の画面にたどり着くのか、その流れの理解が重要）%3Cbr%3E%3Cbr%3E1.画面遷移の基本アプリの画面遷移は、基本的に「スタック（stack）」という仕組みで管理されています。これは「積み重ねるデータ構造（LIFO: Last In, First Out）」です。イメージとしては、付箋を重ねるようなものです。ノートに貼った付箋の上に、さらに新しい付箋を貼ると、下にある付箋は見えなくなりますよね。画面遷移も同じで、新しい画面を表示すると、もとの画面はその下に隠れた状態になります。%3Cbr%3E%3Cbr%3E2.Flutter ↔ FlutterFlow 遷移対応表Flutterの遷移種類Flutter メソッドFlutterFlowでの対応アクションPush遷移Navigator.push()Navigate to Page → Transition Type: PushPop遷移Navigator.pop()Action: Navigate BackReplace遷移Navigator.pushReplacement()Navigate to Page → Transition Type: ReplacePushAndRemoveUntil遷移Navigator.pushAndRemoveUntil()Navigate to Page → Transition Type: Clear Stack%3Cbr%3E%3Cbr%3E3.図でわかる遷移の仕組み次に、代表的な4つの遷移パターンを図で見ていきましょう。Push遷移Pop遷移Replace遷移PushAndRemoveUntil遷移%3Cbr%3E%3Cbr%3E3-1.Push遷移Before: 使う場面：┌────────────┐ ・戻る操作が必要な画面│ Page A │ ← 現在表示中 ・ページ履歴を残したいとき└────────────┘ 使わない場面：After push: ・戻る必要がない画面┌────────────┐│ Page A │├────────────┤│ Page B │ ← 新しく開いたページ└────────────┘説明：Push遷移は、現在の画面の上に新しい画面を重ねるように表示する遷移です。つまり、Page Aの上にPage Bが積み重なるイメージになります。そのため、Page Bの背後にはPage Aが残っており、Pop遷移によってPage Aへ戻ることが可能です。%3Cbr%3E%3Cbr%3E3-2.Pop遷移Before: 使う場面： ┌────────────┐ ・前の画面に戻るとき │ Page A │ ・モーダル・ダイアログを閉じるとき├────────────┤ 使わない場面：│ Page B │ ← 現在表示中 ・最初の画面（ルート）└────────────┘ After pop: ┌────────────┐│ Page A │ ← 戻る先└────────────┘説明：Pop遷移は、積み重ねた画面スタックをたどって前の画面に戻る遷移です。Push遷移でPage AからPage Bへ移動した場合、Pop遷移でPage BからPage Aへ戻ります。Page Aに戻った時点でスタック上に他の画面がなければ、これ以上Pop遷移は行えません。重ねた付箋を1枚ずつ剥がしていくようなイメージです。%3Cbr%3E%3Cbr%3E3-3.Replace遷移Before: 使う場面：┌────────────┐ ・戻る必要がない画面に移動したい │ Page A │ ← 現在表示中 ・履歴を残さない遷移└────────────┘ ・特定の画面だけ残して他を削除したい After replace: 使わない場面：┌────────────┐ ・戻る必要があるフロー│ Page B │ ← Page Aを置き換え└────────────┘説明：Replace遷移は、現在の画面を新しい画面で置き換える遷移です。イメージとしては、「古い付箋を剥がして、新しい付箋に貼り替える」ような動きです。使用例としては、LoginPageからHomePageに遷移するときなどに使われます。この場合、LoginPageの履歴は不要なため、置き換えて削除します。また、通販サイトで購入完了画面からHomeに戻るときなども同様です。購入画面の履歴を残す必要がないため、Replace遷移でHome画面に置き換えます。%3Cbr%3E%3Cbr%3E3-4.PushAndRemoveUntil遷移Before: 使う場面：┌────────────┐ ・ログイン後にホーム画面へ遷移│ LoginPage │ ・ログアウト後にログイン画面を再表示├────────────┤ ・特定の画面だけ残したい│ Loading │ ・画面を再描画したい（再構築目的）├────────────┤ 使わない場面：│ Page A │ ← 現在表示中 ・戻る必要があるフロー└────────────┘After: 履歴をすべて削除:┌────────────┐│ HomePage │ ← 新しいルート（履歴全削除）└────────────┘説明：PushAndRemoveUntil遷移は、新しい画面を開くと同時に、それまでの画面履歴をすべて削除する遷移です。イメージとしては、「重ねた付箋をすべて剥がしてから、新しい付箋を貼る」ような動きになります。主な使いどころは、ログイン後にホーム画面へ遷移する場合などです。ログイン画面や認証フローの履歴は不要なため、すべて削除してホーム画面だけを残します。また、ログアウト後にログイン画面へ戻る場合も同様です。前回のホーム画面などの履歴をクリアし、新しいログイン画面だけを表示します。%3Cbr%3E%3Cbr%3E4.まとめアプリの「画面遷移」は、どんなツールやフレームワーク・ノーコード（Flutter・FlutterFlow・Swift・Kotlinなど）を使っても、根本的な概念は同じ。遷移は「スタック」という仕組みで管理されており、画面を積み重ねたり、剥がしたりすることで、ユーザーの操作に応じて画面を切り替える。画面をただ表示するだけでなく、「どのような流れでその画面にたどり着いたのか」という遷移の過程や背景を理解することが、設計の上で非常に重要。複雑なアプリでは、この「遷移の積み重ね（スタック構造）」を正しく把握していないと、思わぬバグや戻れない遷移が発生しやすい。画面遷移とは単なる「ページの切り替え」ではなく、アプリ全体の動線やユーザー体験を設計するための大切な要素。%3Cbr%3E%3Cbr%3E%3Cbr%3E%3Cbr%3E