技術記事

micomia株式会社の山東です。
今回は「アプリの遷移」についてお話ししたいと思います。

「遷移」という言葉を聞くと、私には少し思い出があります。エンジニアとして現場に入って間もない頃、簡単なUI修正のタスクを任されたのですが、遷移があまりにも複雑で、その画面にどうやって辿り着けばいいのか分からず、不安になったことを今でも覚えています。

もともと個人でアプリを開発していた時は、「画面が移動できればそれでいい」と思っていて、画面同士がどのように繋がっているのかを深く考えたことはありませんでした。しかし実際の開発現場では、「どのようにその画面に遷移したか」という過程や背景が非常に重要だと気づかされました。

本記事では、そんな「遷移の裏側」に少しでも興味を持っていただけるよう、私の経験を交えながらお話ししていきます。

私が記事でお伝えしたい内容

• 画面遷移の基本

• Flutter ↔ FlutterFlow 遷移対応表

• 図で理解する遷移の仕組み（どのような過程で目的の画面にたどり着くのか、その流れの理解が重要）

1.画面遷移の基本

アプリの画面遷移は、基本的に「スタック（stack）」という仕組みで管理されています。これは「積み重ねるデータ構造（LIFO: Last In, First Out）」です。

イメージとしては、付箋を重ねるようなものです。ノートに貼った付箋の上に、さらに新しい付箋を貼ると、下にある付箋は見えなくなりますよね。画面遷移も同じで、新しい画面を表示すると、もとの画面はその下に隠れた状態になります。

2.Flutter ↔ FlutterFlow 遷移対応表

3.図でわかる遷移の仕組み

次に、代表的な4つの遷移パターンを図で見ていきましょう。

• Push遷移

• Pop遷移

• Replace遷移

• PushAndRemoveUntil遷移

3-1.Push遷移

使う場面：戻る操作が必要な画面、ページ履歴を残したいとき
使わない場面：戻る必要がない画面

Before:
┌────────────┐
│   Page A   │ ← 現在表示中
└────────────┘

After push:
┌────────────┐
│   Page A   │
├────────────┤
│   Page B   │ ← 新しく開いたページ
└────────────┘

Push遷移は、現在の画面の上に新しい画面を重ねるように表示する遷移です。つまり、Page Aの上にPage Bが積み重なるイメージになります。そのため、Page Bの背後にはPage Aが残っており、Pop遷移によってPage Aへ戻ることが可能です。

3-2.Pop遷移

使う場面：前の画面に戻るとき、モーダル・ダイアログを閉じるとき
使わない場面：最初の画面（ルート）

Before:
┌────────────┐
│   Page A   │
├────────────┤
│   Page B   │ ← 現在表示中
└────────────┘

After pop:
┌────────────┐
│   Page A   │ ← 戻る先
└────────────┘

Pop遷移は、積み重ねた画面スタックをたどって前の画面に戻る遷移です。Push遷移でPage AからPage Bへ移動した場合、Pop遷移でPage BからPage Aへ戻ります。重ねた付箋を1枚ずつ剥がしていくようなイメージです。

3-3.Replace遷移

使う場面：戻る必要がない画面に移動したい、履歴を残さない遷移、特定の画面だけ残して他を削除したい
使わない場面：戻る必要があるフロー

Before:
┌────────────┐
│   Page A   │ ← 現在表示中
└────────────┘

After replace:
┌────────────┐
│   Page B   │ ← Page Aを置き換え
└────────────┘

Replace遷移は、現在の画面を新しい画面で置き換える遷移です。イメージとしては、「古い付箋を剥がして、新しい付箋に貼り替える」ような動きです。

使用例としては、LoginPageからHomePageに遷移するときなどに使われます。この場合、LoginPageの履歴は不要なため、置き換えて削除します。

3-4.PushAndRemoveUntil遷移

使う場面：ログイン後にホーム画面へ遷移、ログアウト後にログイン画面を再表示、特定の画面だけ残したい
使わない場面：戻る必要があるフロー

Before:
┌────────────┐
│  LoginPage │
├────────────┤
│  Loading   │
├────────────┤
│   Page A   │ ← 現在表示中
└────────────┘

After: 履歴をすべて削除:
┌────────────┐
│  HomePage  │ ← 新しいルート（履歴全削除）
└────────────┘

PushAndRemoveUntil遷移は、新しい画面を開くと同時に、それまでの画面履歴をすべて削除する遷移です。イメージとしては、「重ねた付箋をすべて剥がしてから、新しい付箋を貼る」ような動きになります。

4.まとめ

• アプリの「画面遷移」は、どんなツールやフレームワーク・ノーコード（Flutter・FlutterFlow・Swift・Kotlinなど）を使っても、根本的な概念は同じ。

• 遷移は「スタック」という仕組みで管理されており、画面を積み重ねたり、剥がしたりすることで、ユーザーの操作に応じて画面を切り替える。

• 画面をただ表示するだけでなく、「どのような流れでその画面にたどり着いたのか」という遷移の過程や背景を理解することが、設計の上で非常に重要。

• 複雑なアプリでは、この「遷移の積み重ね（スタック構造）」を正しく把握していないと、思わぬバグや戻れない遷移が発生しやすい。

• 画面遷移とは単なる「ページの切り替え」ではなく、アプリ全体の動線やユーザー体験を設計するための大切な要素。

動画でもっと知りたい方はこちら