【Swift5/Xcode】画面遷移のチートシート。Segueを画面遷移とSegueを使わない画面遷移を徹底解説

この記事では、Xcode、Swiftでの最も重要な画面遷移の処理を徹底解説します。

目次に戻る

開発環境

この記事は、1月26日から書き始めています。

【Xcode】11.3
【Swift】5.1.3

目次に戻る

画面遷移とは

サトリク

ボタンを押したとき次の画面に遷移することです。

今回紹介する画面遷移の仕方は、大きく分けて以下の3つです。

Segueのみを使った画面遷移
Segueとコードを使った画面遷移
コードのみを使った画面遷移

目次に戻る

1.Segueのみを使った画面遷移

まずは、一番簡単なSegue（セグエ）のみを使った画面遷移方法を解説します。

今回、ボタン、ラベル、ControllerViewの配置の仕方は解説しません。

手順1：ボタンと画面2を繋げる

ボタンをcontrolを押しながら画面2にドラッグ&ドロップしてください。

手順2：画面遷移の仕方を選択する

ここでは、画面遷移の仕方を選択します。

今回は、Present Modallyを選択しましょう。

これで完成です！

試しに、command + rで実行してしてみてください。ボタンを押すと画面遷移するはずです。

サトリク

さっきからSegue（セグエ）、Segue（セグエ）言ってますが、Segueとは、このことです。

目次に戻る

Segueとコードを使った画面遷移

次は、Segueとコードを使った画面遷移をご紹介します。

Segueとコードを使った画面遷移は、4ステップでできます。

ViewControllerと画面を繋げる
SegueにIDをつける
ボタンをコードと連携する
ボタンのActionにコードを付け足す

手順1：ViewControllerと画面を繋げる

ViewControllerを遷移したい画面にControlを押しながら、ドラッグ&ドロップしてください。

そうすると、Segueができるはずです。

ちなみに、ViewControllerとは、このマークのことです。

手順2：SegueにIDをつける

手順1で作成したSegueにIDをつけましょう。

①Segueをクリックしてください。

②このようなマークをクリックしてください。

③identifierにtoNextと入力してください。

もし、②のマークの項目が出ない場合は、command + option + 0を押すと出てきます。

手順3：ボタンとコードを連携する

画面1を選択した状態で、command + option + controlを押しながら、Enterを押してください。

そうすると、右側に、コードのウィンドウが出てきます。

サトリク

こんな感じになってればOK！

次に、用意したボタンを右のコードの17行と18行の間にcontrolを押しながらドラッグ&ドロップしてください。

そうすると、次のような画面になるので、同じように入力してください。

NameにnextBtnと入力し、他の項目が画像と違ってないか確認し、Connectを押してください。

Name以外デフォルトですので、変わってることはないと思いますが。

手順4：ボタンのActionにコードを付け足す

先ほど追加したコードの中に、以下の一行を入れるだけでできます。

self.performSegue(withIdentifier: "toNext", sender: nil)

サトリク

コードが以下のように、なっていたらOKです。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func nextBtn(_ sender: Any) {
        self.performSegue(withIdentifier: "toNext", sender: nil)
    }
    
}

では、実行してみてください！

ボタンを押すと画面遷移するはずです！

コードで画面遷移を実装することで、こんなこともできます！

サトリク

この画面遷移の仕方をすると以下のようなコードを書くこともできます！

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    var tapCount = 0
    @IBAction func toNext(_ sender: Any) {
        
        tapCount = tapCount + 1
        
        if tapCount == 3 {
            self.performSegue(withIdentifier: "toNext", sender: nil)
            tapCount = 0
        }
    }
}

if文で、画面遷移するときとしないときを分けることができるのです！

これだと、ただ単にSegueでつなぐより、色々な処理をつけて遷移することができるというメリットがあります！

目次に戻る

コードのみを使った画面遷移

先ほどは、Segueを繋いで画面遷移をしていましたが、今度はSegueを使わないで画面遷移を実装しようと思います。

コードのみを使った画面遷移は、5ステップでできます。

画面2のクラスを作成する
storyboardとクラスを連携する
storyboardIDをつける
ボタンをコードと連携する
ボタンのActionにコードを付け足す

手順1：画面2のクラスを作成する

まずは、遷移先のクラスファイルを作成します。

command + nでファイルを新規作成しましょう。

そしたら、以下のようにテンプレートを選択する画面になるので、Cocoa Touch Classを選択しましょう。

クラス名に、NextViewControllerと入力し、Nextボタンを押しましょう。

次は、入れるフォルダーを選択します。今回作っているプロジェクトフォルダーを選択しましょう。

このように、NextViewController.swiftファイルができたらOKです。

手順2：storyboardとクラスを連携する

先ほど作成したクラスをstoryboardと連携させましょう。

Main.storyboardを選択し、画面2(遷移先画面)の上部のバーを選択します。

右側の項目のClassに先ほど作ったNextViewControllerを選択してください。

手順3：storyboardIDをつける

次は、SegueのIDを使わない代わりに、storyboardのIDを使います。

先ほど入力した項目の下に、Storyboard IDがあるので、そこにtoNextと入力しましょう。

入力したら必ず、Use Storyboard IDという項目にチェックしてください。

サトリク

Use Storyboard IDにチェックつけ忘れてエラーが起きることが多々あります笑

手順4：ボタンをコードと連携する

画面1を選択し、Option + command + controlを押しながらenterを押します。

そうすると、右側に画面に対応するコード編集画面を表示します。

ボタンをcontrolを押しながら17行目と18行目の間に、ドラッグ&ドロップします。

NameにnextBtnと入力し、他の項目が画像と違ってないか確認して、Connectを入力しましょう。

サトリク

コードが以下のようになってたらOKです。

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBAction func nextBtn(_ sender: Any) {
    }
    
}

手順5：ボタンのActionにコードを付け足す

先ほど作成した、ボタンのコードに以下のコードを付け足します。

@IBAction func nextBtn(_ sender: Any) {
	let vc = self.storyboard?.instantiateViewController(withIdentifier: "toNext") as! NextViewController
	self.present(vc, animated: true, completion: nil)
}

このコードの"toNext"は、遷移先のstoryboardのIDです。

as!の次に書いているNextViewControllerは、遷移先のstoryboardのクラスです。

self.present(vc, animated: true, completion: nil)は、簡単に言うと画面の遷移の仕方です。

たったこの二行を入れるだけで、画面遷移ができます！！

ちなみにpresentではなく、showで遷移させたいときはこちら

let vc = self.storyboard?.instantiateViewController(withIdentifier: "toNext") as! NextViewController
self.navigationController?.pushViewController(vc, animated: true)

サトリク

これで完成です！

全てのコード

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBAction func nextBtn(_ sender: Any) {
        let vc = self.storyboard?.instantiateViewController(withIdentifier: "toNext") as! NextViewController
        self.present(vc, animated: true, completion: nil)
    }
    
}

目次に戻る