【Swift】画面遷移をする様々な方法(segueあり・なし/プッシュ遷移/モーダル遷移)について徹底的に解説！

ふくしま

こんにちは！株式会社メモリアインクのふくしまです！

今回はiOSアプリの画面遷移の方法について、方法が分からず絶望に打ちひしがれてしまったという方にご覧いただきたい記事になっとります！

環境

• Xcode(15.2)
• Swift(5.9.2)

iOSにおける画面遷移形式の種類

ふくしま

では早速、画面遷移形式の種類について説明していきます！

基本的には、iOSにおいては２種類の遷移形式があって、
各々の形式によって、実装方法も変わってくるから要チェック！

１. プッシュ遷移

プッシュ遷移とは、遷移元の画面から左から右へ次の画面へスライドするような形式です。

ユーザーは遷移先画面でナビゲーションバーの「戻る」「進む」ボタンをタップすることで画面間を移動することを想定しています。

2. モーダル遷移

モーダル遷移とは、遷移元の画面で何かしらのアクション(ボタンをタップ 等)をすることで、画面下から遷移先の画面が現れる遷移形式です。

モーダル遷移では、遷移先の画面で「戻る」「進む」ボタンが無いため、必ずユーザ側に決まったアクションをとってもらいたい時には、この形式で遷移するのが良いでしょう。

Segueを使った画面遷移の実装方法

ふくしま

ここからは、実際に画面遷移をする方法を学んでいきましょう！
基本的にモーダル遷移での実装になりますが、最後にプッシュ遷移する方法も解説していますよ〜

Segueとは？

Segueを使うと、Xcode の Storyboardを使用している際に、ビューコントローラ間の遷移を視覚的に設定して、プログラム的にコントロールすることができます。
ただ遷移を行うだけであればSegueの設定のみでも実装可能です。（後述する１がそれにあたります）

Segueを使った画面遷移(コードを使わない方法)

この方法が画面遷移する方法として最も簡単な方法です。

手順１：StoryBorad上に遷移するためのボタンと遷移先のViewControllerを配置

①StoryBoardで「＋」ボタンをクリックしてオブジェクト選択画面を開く

②検索フィールドで「viewcontroller」を入力する

③ViewControllerオブジェクトを選択して、StoryBoard上にドラッグ&ドロップ

④Buttonオブジェクトも同様に配置する(②の検索フィールドで「button」と入力したら表示されます)

手順２：Storyboardに紐づくViewControllerクラス（遷移元・遷移先の２クラス分）を作成する

①Xcode開いた状態で、メニューバーから「File」→「New」→「File」を選択

②「Choose a template for your new file」が開いたら「Cocoa Touch Class」を選択して「Next」をクリック(遷移元の画面という意味で「FirstViewController」と命名。分かればなんでも良いです。)

③ファイルを保存する場所に間違いないことを確認して、「Create」をクリック

④同様に遷移先のViewControllerも作成(SecondViewController)。
ボタンのデザインや遷移先の背景色などもこの段階で変えておきましょう。

手順３:StoryBorad上の各々の画面に手順２で作成したViewControllerクラスを紐付ける

①StoryBoard上の遷移元の画面を選択して、ユーティリティエリア(Xcodeの右側に表示されるワークスペース)のClassに「FirstViewController」クラスを設定する（ドロップダウンアイコンをタップすると、現在作成されているClassの一覧が表示され、そこから選択してもOKです）

②同様にして、遷移先の画面についても「SecondViewController」クラスを設定する

手順４：Controlボタン＋右クリックをした状態でStory Board上に配置した「Button」オブジェクトから遷移先の画面へドラッグ&ドロップしてSegue(画面間にある矢印)を作成する。

手順５：次に…いや、実はこれだけで画面遷移のみであれば実装完了です。
実際にシミュレーターでビルドして、画面遷移できているか確認してみましょう！

２.Segueを使った画面遷移(コードを使う方法)

より応用的な画面遷移をしたい場合には、コードを用いた実装が必要となってくることがあります。
例えば、ある条件を満たした時に限り画面を遷移したい場合などです。

※ここからの手順は前述のViewControllerやオブジェクトの配置を完了していることを前提としています。

手順１：Segueを作成する(※あらかじめ遷移元画面に初期値が０の「Label」オブジェクトを追加しています)

手順２：作成したSegueを選択して、SegueのIdentifireを設定する(今回は「toSecond」と設定しましたが、分かりやすければなんでもOK！)

手順３：遷移元のViewControllerに各々のオブジェクトを紐付け、条件のロジックを作成して出来上がり！（今回の条件は、「ボタンをタップしたらボタン上の数字がプラス１されて、数字が３になった時に画面遷移する」）

遷移元のViewControllerに各々のオブジェクトを紐付けする方法

StoryBoard上の遷移元のViewController上にある各オブジェクトから、紐づいているViewControllerの特定の場所にControlボタンを押しながらドラッグ&ドロップする。

Storyboard上でViewControllerを選択して、Control＋option＋Commandを押しながらEnterボタンを入力すると、画面に紐づいたViewControllerクラスの編集画面が表示されます。

遷移元のViewControllerの全体ソースコード

import UIKit

class FirstNextViewController: UIViewController {

    @IBOutlet weak var numberLabel: UILabel!
    
    var number: Int = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
　　 // 「ボタンをタップしたらボタン上の数字がプラス１されて、数字が３になった時に画面遷移する」ロジック
    @IBAction func didTupButton(_ sender: Any) {
        // ボタンをタップしたらボタン上の数字をプラス１する
        number += 1
        numberLabel.text = String(number)
        
        // ボタン上の数字が3になったら画面を遷移する
        if number == 3 {
            self.performSegue(withIdentifier: "toSecond", sender: self)
            number = 0
            numberLabel.text = String(number)
        }
        
    }

}

遷移処理のコード

self.performSegue(withIdentifier: "toSecond", sender: self)

サンプルコードの詳細説明

• 5行目でStory Boardと紐づいたラベルを定義。
• 7行目で数字がインクリメントされた時にその数字を格納する変数を定義。
• 14行目のブロック内でボタンをタップした時の挙動を定義。
• 16行目で「ボタン上の数字がプラス１されて」部分のロジックを定義。
• 17行目でインクリメントした数字をString型に変換して、Storyboardから紐づいたLabel変数に格納。
• 20行目で数字が３になった場合の処理を定義。
• 21行目で次画面に遷移する処理を定義。
• 22行目・23行目でnumberLabelを初期化して、遷移元画面に戻った時に「0」になるように定義。

以上で実装完了です！
シミュレーターを起動して、うまく画面遷移できているかを確認してみましょう！

ふくしま

お疲れ様です〜！Segueを使った画面遷移方法は以上です！
次の項目からはSegueを使わない実装方法を学んでいこう 

Segueを使わない画面遷移の実装方法

Segueを使わない実装シーンとは…
Segueを使った場合、別のStoryboard上に作成されている画面に遷移したい場合には応用が効きません。
そのため、Segueを使わずViewControllerをインスタンス化することでコード上で対象の画面へ遷移する実装が出来るようになり、この方法を覚えることで一気に実装の幅が増えてきます！

具体的には今までSegueIdentifireを設定して遷移先を決定していたところを、代わりにStoryBoard IDというものをを設定してView Controllerをインスタンス化出来るようにします。

早速、手順を見てみましょう！
※ViewControllerやオブジェクトの配置については、完了していることを前提とします。

手順１：StoryBoard上で作成した遷移先のViewControllerを選択して、ユーティリティエリアからStoryboard IDを設定して「Use Storyboard ID」にチェックを入れる(IDの名称は分かればなんでも良いです)

手順２：ボタンをコードに紐付け(前項目の「2. Segueを使った画面遷移(コードを使う方法)」の手順３を参照)

import UIKit

class FirstViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }

    @IBAction func didTapButton(_ sender: Any) {
        //ボタンを押した時の処理
    }
    
}

コードが上記のようになっていればOKです！

手順３：紐付けたボタンのActionに以下のコードを追加。

let vc = self.storyboard?.instantiateViewController(withIdentifier: "NextVC") as! SecondViewController
self.present(vc, animated: true)

遷移元のViewControllerの全体ソースコード

import UIKit

class FirstViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }

    @IBAction func didTapButton(_ sender: Any) {
        //ボタンを押した時の処理
        let vc = self.storyboard?.instantiateViewController(withIdentifier: "NextVC") as! SecondViewController
        self.present(vc, animated: true)
    }
    
}

コードの詳細説明

• 21行目のinstantiateViewController(withIdentifier:)メソッドでStoryboard IDが”NextVC”の画面をSecondViewController型のインスタンスとして生成してvc変数に格納する
• 22行目でpresentメソッドを利用して、21行目で生成したインスタンス変数vcの画面へ遷移する

以上で実装完了です！
シミュレータを起動して、問題なく画面遷移できるか確認してみましょう！

ふくしま

ここまでで、基本的な画面遷移の実装方法はマスター出来ちゃいました！
最後に次項で「プッシュ遷移」する方法を学びましょう！

遷移形式を「プッシュ遷移」にする方法

手順１：Storyboard上の遷移元の画面を選択して、メニューバーの「Editor」→「Embed In」→「Navigation Controller」の順でタップして「Navigation Controller」を作成する

上記の設定をすることで、Segueを用いた画面遷移の場合はプッシュ遷移します。
Segueを使用しない場合は手順２へ！

手順２：先ほどの書いたコードの22行目を以下のコードに書き直す。（Segueを使用しない場合のみ）

self.navigationController?.pushViewController(vc, animated: true)

navigationControllerとはPush遷移する際に、遷移先の画面をストックしていくためのUINavigationControllerクラスです。

pushViewController( _ : animated: )メソッドは、UINavigationControllerクラスに定義されているインスタンス化された遷移先のViewControllerを表示するためのメソッドです。

以上でプッシュ遷移での画面遷移を実装できました！お疲れ様でした！

まとめ

これまでで様々な画面遷移の実装方法を学びました。
画面遷移をする方法と一概に言っても、いろんな実装方法や画面の遷移形式があるから、その開発シーンに合わせて実装方法を選択できるようになりましょう！
この記事が皆様の開発ライフの一助になれれば幸いです！

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします！