こんにちは、プログラマーの@Yuuです。

iPhoneアプリを作っていると必ずと言っていいほど使う画面遷移。
画面遷移を行う方法は2種類あり、1つはstoryboard上で簡単に設定出来る「Segue」を使う方法と、もう1つはコードで遷移を書く方法です。

今回は前者の「Segue」を使って遷移する方法をご紹介します。

ちなみに以前Segueを使わずにコードで画面遷移を行う方法を書いたので、
もし良かったらのぞいてみて下さい（^^）
[Swift]コードで画面遷移を行う3つの方法

Segueとは

Segueを使用するとstoryboard上で簡単に画面遷移の設定が出来ます。
例えば「Buttonを押したら他のUIViewControllerに遷移する」という設定を簡単に行う事が出来ます。

具体的にSegueが何を指し示すかというと、storyboardのUIViewControllerとUIViewControllerを繋ぐ矢印の事です。

と個人的に理解していたのですが、iPhoneアプリにおいてSegueの正確な定義を調べると

画面と画面の接続や遷移する際の演出を管理するものを「Segue(セグエ)」と呼ぶ。

プログラミング未経験者のための「iPhoneアプリの作り方」 (3) 複数画面のアプリを作る(1) - Segueを理解する | マイナビニュースより引用

と書かれているので、「画面と画面の接続や遷移する際の演出を管理するもの」が正しい定義だと思います。
ですが、UIViewController間を繋ぐ矢印の事もSegueと言ったりするので「Segueを使うと簡単に画面の遷移が設定出来る」ぐらいの漠然とした理解でも大丈夫です、開発は全然出来ます。

Segueを使う

では実際にSegueを使ってみます。
今回は以下の3つの項目に分けて解説を行います。

1. 2つのUIViewControllerの用意
2. Segueを設定する
3. 2つ目の画面から戻る設定を行う

画面遷移を行う際に「次の画面に値を渡す」という事を良くやるのですが、
その「次の画面に値を渡す方法」はまた別の記事で書きます。

2015.6.12追記
Segueを使った際の値渡しの記事書きました！
[Swift]Segueを使って複数の画面に値渡しをする

また今回の解説を行う環境は以下のとおりです。

• OS：OS X El Capitan10.11.5
• Xcode：7.3.1
• Swift：2.2

1. 2つのUIViewControllerの用意

遷移を行うため、UIViewControllerを同じstoryboard上に2つ配置します。
「同じstoryboard」というところが結構重要で、違うstoryboardのUIViewControllerに対してはSegueを設定する事が出来ません。

最終的に以下のような構成にします。

• Main.storyboard（Segueの設定を行うstoryboard）（プロジェクト作成時に自動生成）
• ViewController.swift（遷移前の画面）（プロジェクト作成時に自動生成）
• NextViewContoller.swift（遷移後の画面）

まずSingleApplicationでプロジェクトを作成します。
すると今回使用する「Main.storyboard」と「ViewController.swift」は自動的に作成されています。

Main.storyboardを開き、自動的に生成されたViewControllerに遷移するためのButtonを配置します。

僕はButtonに対して真ん中に表示されるようにAutoLayoutを設定しましたが、遷移さえ出来ればいいのでAutoLayoutの設定は必須ではありません。

また、ViewControllerに次の画面との違いを分かりやすくするために背景色を設定します。

背景色の変更方法は、背景色を変更したいUIViewControllerの「View」を選択し、
Show the Attributes Inspectorの中にある「Background」という項目から変更する事が出来ます。

次に遷移先の画面に設定するNextViewController.swiftを作成します。

New -> File… -> Cocoa Touch Classを選択
Subclass ofの欄を「UIViewController」に変更し、Class名を「NextViewController」にします。

あとはそのまま順番通りに進めていけば「NextViewController.swift」が作成されます。

次にMain.storyboardにUIViewControllerを配置します。

配置したUIViewControllerのクラスを先ほど作成した「NextViewController」に変更します。
Show the Identity inspector -> Custom Class -> Classに「NextViewController」と入力。

最後にNextViewControllerを分かりやすくするために背景色を設定します。

以上で準備は完了！
この段階ではMain.storyboardに背景色の違う2つのUIViewControllerが並んでいればOKです。

次にSegueの設定を行います。

2. Segueを設定する

いよいよSegueの設定です。
と言っても慣れれば「超」が付くぐらいに簡単なのがSegueだったりします。

まずViewController上に配置したButtonの上でcontrolボタンを押しっぱなしにします。
controlボタンを押しっぱなしにした状態で1つのUIViewController（NextViewController）にドラックしていきます。

その時に青い線がButtonから伸びていればOKです。

NextViewController上でマウスを離すと、以下のような「Action Segue」と書かれたポップアップが表示されます。

今回はこの中から1番上の「Show」を選択します。
（「Show」は1番スタンダートな遷移方法）
するとUIViewControllerからNextViewControllerに向かって矢印マークが表示されています。

これでSegueの設定は完了です。

ここまでで実際に動かしてみると

バッチリ遷移出来てますね！

ここまで設定を行うと2つ目の画面に遷移は出来ますが、2つ目の画面から1つ目の画面に戻る事が出来ません。
最後に2つ目の画面から戻れるようにするために「Unwind Segue」というものを設定します。

3. 2つ目の画面から戻る設定を行う

戻る設定を行うために使用する「Unwind Segue」の説明から先に書きます。

Segueの時にはコードを書きませんでしたが、戻るためのSegueはコードを書かなくてはいけません。
この戻るためのSegueの事を「Unwind Segue」と言い、「Unwind Segue」を戻り先のViewControllerに記述する必要があります。
つまり今回の場合だと「ViewController.swift」に書く必要がある、という事になります。

では、順番に「Unwind Segue」の設定方法を書いていきます。

まず戻るボタンを「NextViewController」に配置します。

こちらの戻るボタンにも「ViewController」に配置したボタンと同じようにAutolayoutを設定して真ん中に配置されるようにしました。

次にUnwind Segueの記述の1文を「ViewController.swift」に追記します。

{}の中に何も書いていないので変な感じ・・。
ですが@IBActionから始まる1文が他ならぬ「Unwind Segue」です。
{}の中は「Unwind Segue」で戻ってきた時に行う処理を記述します。
今回は何も書いていないので、NextViewControllerから戻ってきても何もしない、ということになります。

そしてこの1文を書くことでstoryboard上から簡単にUnwind Segueを設定できるようになります。

またbackToTopというのがUnwind Segueの名前になります。
ここの名前は自由に付ける事が出来るので、例えばreturnToMain・firstViewUnwindSegueとかそんな名前にしてもいいと思います。

最後に先ほど配置した戻るボタンにUnwind Segueの設定を行います。
Unwind Segueの設定はstoryboardから行います。

Main.storyboardを開き、NextViewControllerの「戻るボタン」の上でcontrolボタンを押しっぱなしにしながらドラックして、以下の画像が指し示しているNextViewControllerの「Exit」と書かれたところまで青い線を引っ張ってきます。

すると先ほど設定したUnwind Segueの名前がポップアップで表示されるのでこれを選択します。

Unwind Segueが設定されているかを確認する方法は、storyboard上で「戻るボタン」を選択し
Show the connections inspectorを開くと以下の画像のようにTriggered Seguesの部分に設定したUnwind Segueが表示されます。

これでUnwind Segueの設定も終了です。

実際にNextViewControllerからViewControllerに戻れるか、試してみたいと思います。

無事戻れましたね！(๑•̀ㅂ•́)و✧

今回僕が作ったプロジェクトをサンプルとしてGithubに上げておいたので、もし良ければ参考にしてみて下さい。
meganedogYuu/SegueSample: Segueの使い方のサンプルプロジェクト

あとがき

僕がiPhoneアプリを作る時は「1つのstoryboardに1つのViewController」を基本として作るようにしているので、今回ご紹介した「Segue」や「Unwind Segue」は使わず開発をしています。
ですが、最初のうちは「Segue」や「Unwind Segue」を使った方が画面遷移が簡単ですし分かりやすいと思うので、積極的に使ってみて下さい。

また今回は1つのViewControllerから戻る場合を想定して書いていますが、いずれ複数のViewControllerから戻った際の処理の切り分け方法なんかも書こうと思います。

ではでは
今回はこの辺で！ヽ(•̀ω•́ )ゝ✧