完全に理解する Storyboard & UIKit (Day 8): Segueによる画面遷移とデータ渡し

第一部（Day 7まで）で、1つの画面（Scene）を自由自在にレイアウトできるようになりました。 ここからは第二部に入り、アプリの基本である「複数の画面を繋ぐ」方法を学びます。

StoryboardがXIBよりも優れている最大のポイントが、この Segue（セグエ） という画面遷移システムです。

1. Segue (セグエ) とは？

Segue は、Storyboard上で2つのView Controllerの間に引かれる「矢印（線）」のことです。 どの画面からどの画面へ遷移するかのフローをコードレスで定義でき、視覚的にアプリの構造を把握できるようにしてくれます。

主なSegueの種類 (Action Segue)

Interface Builderで接続する際、どのような遷移アニメーションにするかを選びます。

• Show: 最も一般的に使われる種類です。後述する Navigation Controller が存在すれば「右からスライドイン」、なければ「下からのモーダル表示」として賢く動作します。
• Present Modally: 下から上に画面が覆い被さるように表示されます。別れ道となる設定画面や、新規作成画面などでよく使われます。
• Custom: 自作のアニメーションクラスを指定して独自の遷移を作ります。

2. Segueの作り方

Storyboard上でSegueを作るのは非常に簡単です。

1. 遷移元（A画面）のボタンを Control キーを押しながらクリックし、そのまま遷移先（B画面）のView Controllerまでドラッグしてドロップします。
2. ポップアップメニューから Show または Present Modally などを選びます。
3. 2つの画面の間に矢印（Segue）が作成されます。

これだけで、アプリを実行してA画面のボタンを押すとB画面へ遷移する処理が完成です。1行もコードを書いていません。

3. 実践：画面遷移時のデータ渡し（Prepare）

ボタンを押して画面遷移するだけでなく、「タップした商品のID」といったデータを遷移先の画面に渡したいケースが殆どです。

この処理は、遷移元のView Controllerで prepare(for:sender:) メソッドをオーバーライドして実装します。

ステップ1: SegueにIdentifier（名前）をつける

1. Storyboardに引かれたSegueの矢印を選択します。
2. Attributes Inspector (⌥⌘4) を開きます。
3. Identifier という項目に名前を入力します（例: showDetailSegue）。
   • ※ 一つの画面から複数の画面への遷移が存在する場合に、どのSegueが発火したかをコードで判定するため必須です。

ステップ2: 遷移先のView Controllerに受け口を作る

swift
// B画面（遷移先）
class DetailViewController: UIViewController {
    // 受け取るデータ用の変数（遷移元から代入される）
    var selectedItemName: String?

    // 省略：ラベルのIBOutletなど

    override func viewDidLoad() {
        super.viewDidLoad()
        // 渡されたデータを使用してUIを更新
        if let name = selectedItemName {
            print("表示する商品: \(name)")
        }
    }
}

ステップ3: 遷移元で prepare(for:sender:) を記述する

swift
// A画面（遷移元）
class HomeViewController: UIViewController {

    // 画面遷移が実行される直前に呼ばれるメソッド
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // 1. まずIdentifierをチェックし、目的のSegueか確認する
        if segue.identifier == "showDetailSegue" {

            // 2. segue.destination を遷移先のクラス型にキャストする
            if let nextVC = segue.destination as? DetailViewController {

                // 3. 遷移先のプロパティにデータを渡す
                nextVC.selectedItemName = "Apple Watch"
            }
        }
    }
}

4. コードからSegueを発動させる

ボタンのタップ以外（例えば、API通信が完了したタイミング）で画面遷移させたい場合はどうすれば良いでしょうか？

その場合は、Storyboard上で View Controller自身（画面上部の黄色い丸アイコン）から 遷移先のView ControllerへControl+ドラッグしてSegueを作成し、Identifier（例: autoSegue）を付けます。

そして、コードの任意のタイミングで performSegue を呼び出します。

swift
func didFinishNetworkRequest() {
    // コードから強制的に遷移をトリガーする
    self.performSegue(withIdentifier: "autoSegue", sender: nil)
}

※ この場合でも、データ渡しが必要であれば同様に prepare(for:sender:) が呼ばれます。

📝 今日のまとめ

• Segue (セグエ) を使えば、ドラッグ＆ドロップで画面遷移を視覚的に実装できる。
• 一番よく使うSegueの種類は、文脈を見て良きに計らってくれる Show。
• 画面間でデータを渡すには、Segueに Identifier を設定し、コードで prepare(for:sender:) メソッドをオーバーライドする。

さて、Present Modallyで下から画面を出せるようになりましたが、「一覧画面から詳細画面へ遷移し、＜戻るボタン＞で元に戻る」というiOS標準のスライド遷移を作るにはこれだけでは不十分です。 明日の Day 9 では、その挙動を司る最も重要なコンポーネント UINavigationController について学びます。