[Swift]「Segue」

Segueを学び、iOSアプリ開発の画面遷移を実現しましょう。

本記事では初心者にもわかりやすく、Xcodeを使ったSegueの基本概念と使い方、画面遷移とデータ受け渡しの実装方法を解説します。

目次

Segueの基本

Segueは、iOSアプリ開発において、画面間のスムーズな遷移を実現するための重要な概念です。

この記事では、Manual Segueを使って画面遷移、遷移先の画面へデータを効率的に受け渡す方法を説明します。

Manual Segueは、Storyboard上で直接作成するのではなく、コード内でトリガーして遷移を実行するタイプのSegueです。

Xcodeを使って、iOSアプリの画面遷移を実現するSegueの設定手順を初心者向けに丁寧に解説します。ビジュアルエディタコードの両方を使った実装方法を示し、迷わずにSegueを設定できるようにします。

ビジュアルエディタを使ったSegueの設定

STEP
Main.storyboardを開きます。

画面遷移を行いたいViewControllerを選択します。

STEP
Ctrlキーを押しながら、ViewControllerと遷移先のViewControllerをドラッグします。
STEP
ドラッグした際にポップアップするメニューから、遷移の種類(Show、Present Modallyなど)を選択します。
今回は、「Show」を選択します。
STEP
SegueのIdentifier(遷移を特定するための名前)を入力します。
IdentifiertoSecondVCに設定

コードを使ったSegueの設定

次のような画面遷移を行うコードを記載していきます。

  • 1st ViewControllerで、nameを入力します
  • Nextボタンを押します → 2nd ViewControllerへ画面遷移する
  • 2nd ViewControllerで、①で入力したnameを表示する
1st ViewController
2nd ViewController

遷移元のコード

次のコードでは、ViewControllerクラスで画面遷移とデータ受け渡しを行っています。

class ViewController: UIViewController {
    
    var userName = ""

    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var nameText: UITextField!
 
//STEP1:   
    @IBAction func nextClicked(_ sender: Any) {
        userName = nameText.text!
        performSegue(withIdentifier: "toSecondVC", 
            sender: nil)
    }

//STEP2:    
    override func prepare(for segue: UIStoryboardSegue, 
        sender: Any?) {
        if segue.identifier == "toSecondVC" {
            let destinationVC = 
                segue.destination as! SecondViewController
            destinationVC.myName = userName
        }
    }
}
STEP
func nextClicked(_ sender: Any)
  • nextClickedメソッドは、次の画面へ遷移する際にuserName変数にnameTextのテキストを格納します。
  • その後、performSegue(withIdentifier:sender:)メソッドを使って、toSecondVCというSegueのIdentifierを指定して画面遷移を行います。
STEP
func prepare(for segue: UIStoryboardSegue, sender: Any?)

このメソッドは、Segueが実行される直前に呼び出されるメソッドです。画面遷移が行われる際に、遷移先のViewControllerにデータを受け渡すために使用します。

segueパラメータには、実行されるSegueに関する情報が含まれています。segue.identifierによって、実行されるSegueのIdentifier(”toSecondVC“)を取得しています。

  • if segue.identifier == "toSecondVC"の部分は、特定のSegue(この例では”toSecondVC“)が実行される場合の条件を示しています。
  • 条件が満たされると、destinationVCという名前のSecondViewControllerインスタンスを作成し、segue.destination(遷移先のViewController)をas! SecondViewControllerとしてダウンキャストします。
  • これによって、遷移先のViewControllerをdestinationVCという変数で参照できるようになります。
  • その後、destinationVC.myName = userNameとして、遷移先のViewControllerであるSecondViewControllermyNameプロパティにuserName変数の値を受け渡しています。
  • このようにすることで、SecondViewControllerの画面が表示される前に、userNameの値がmyNameに渡されます。

遷移先のコード

下記のコードはSecondViewControllerクラスで、ViewControllerから受け取ったmyNamenameLabelに表示しています。

class SecondViewController: UIViewController {
    @IBOutlet weak var myLabelSecond: UILabel!
    @IBOutlet weak var nameLabel: UILabel!
    
    var myName = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()

        nameLabel.text = myName
    }
}
  • viewDidLoadメソッド内で、myNameの値をnameLabelに設定しています。
  • これにより、ViewControllerから受け取ったデータを適切に表示することができます。

Segueの種類を理解しよう

画面遷移を行う際に使用するSegueには、Show SeguePresent ModallyCustom Segueなどがあります。それぞれのSegueの特徴や適切な使用場面について解説します。

種類特徴使用例
Show Segue通常の画面遷移を行う際に使用一般的な画面遷移、ユーザーが次の画面を自然に予想できる場合に使用
Present Modallyモーダルとして画面を表示する際に使用ユーザーの入力を求めるポップアップ画面、画面全体を覆わない一時的な情報表示などに使用
Custom Segueカスタムなアニメーションやトランジションを追加する際に使用独自の画面遷移アニメーションを実装したい場合、デフォルトのSegueにない特別な効果を追加したい場合に使用
Segueの種類についての対比表

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次