【Swift】 Storyboardでモーダル画面遷移

# 【Swift】 Storyboardでモーダル画面遷移

今回は、Storyboardを分けてモーダル画面遷移する方法についてまとめたいと思います！

## 1.ViewControllerを追加
まずは、ViewControllerを追加します。

プロジェクトフォルダで「command+N」を押下
「Cocoa Touch Class」を選択する
![スクリーンショット 2022-11-12 10.01.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/6d47afbd-a96b-4708-bd36-306e9acfb840.png)

Nextを押下したら以下の画面になるのでClass名に任意名「SubViewController」を入れる。
Subclass ofにはUIViewControllerを選択する。
以下画面のように設定できたらNextを押下しcreateを押す。

![スクリーンショット 2022-11-12 10.04.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/e1ce2643-4dec-4e7e-d824-51db37db120a.png)

createを押すと下記画面になると思うので、これでViewControllerの追加は完了

![スクリーンショット 2022-11-12 10.06.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/119afda0-f617-173d-356a-b4df5a7d01b1.png)

## 2.Storyboardを追加

次にStoryboardを追加します。
ViewControllerの追加時と同じようにプロジェクトフォルダを作成の「command+N」を実施して、Storyboardを選択。

![スクリーンショット 2022-11-12 10.08.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/ccf34fdb-ea99-d5c9-6470-09776183b9d1.png)

Save　Asの名前は任意名ですが、私は「SubStoryboard」とViewControllerと紐づいているような名前にすることでわかりやすくします。

![スクリーンショット 2022-11-12 10.13.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/fbd32402-ac4e-3af9-c391-950dcac58c0e.png)

Storyboardを追加したら、StoryboardにIDを追加します。
IDはClassの名前でもなんでも大丈夫です。
　以下の画像を参考にしてみてください。

![スクリーンショット 2022-11-12 14.51.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/bfce26db-1137-d102-1a53-71f2a98ad737.png)

Storybordが作成できたらOK

## 3.追加したStoryboardをViewControllerと紐付ける
Storyboardを追加したら追加したViewControllerと紐づける必要があります。
紐づけるためにはナビゲーターからStoryboardを選択し、ViewControllerを選択します。

![スクリーンショット 2022-11-12 14.27.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/c3df9cd8-c4ee-ac31-e84d-f0144fa7d359.png)

選択すると右側のユーティリティに以下画像が表示されます。

![スクリーンショット 2022-11-12 14.28.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/5925173d-8adf-84c9-51af-0361c5cc7cfd.png)

Classのところを選択し、追加したViewControllerを選択します。
以上でStoryboardとViewControllerの紐付けが完了しました。

## 4.MainのStoryboardにButtonを配置
画面遷移するために今回はButtonを使用します。
そのため、MainのStoryboardにButtonを配置します。

右上のプラスボタンを押すとオブジェクトが出るので、ButtonをStoryboardにドラッグ＆ドロップします。
※ボタンの種類はなんでも大丈夫です。

![スクリーンショット 2022-11-12 14.34.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/60b5ae5b-466b-9cf7-153a-ca46a5b28e23.png)

以上でボタンの設置は完了です。

## 5.ButtonをViewControllerで設定
Buttonを設置まで完了したら次はButtonとViewController(追加したSubViewController)の紐付けです。

ButtonをCtrl押しながらViewControllerに引っ張ると以下画像のようになります。
※viewDidLoadの上に引っ張ってください。
Nameは変数名なので、任意で大丈夫です。

![スクリーンショット 2022-11-12 14.37.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/f9bb61e9-a143-5593-a5e4-fcfda0edbd77.png)

以下画像のようになればOKです。

![スクリーンショット 2022-11-12 14.40.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/185fd10d-9e4b-e4c6-2959-a7234eb03f78.png)

## 6.Button押下時の処理を追加する

ボタン押下時の処理をViewControllerに追加します。

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var subViewButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // タップされた時の動作
        subViewButton.addTarget(self, action: #selector(self.buttonTapped(_:)), for: UIControl.Event.touchUpInside)
        
    }
    
    // タップされた時の処理
    @objc func buttonTapped(_ sender : UIButton) {
        let storyboard = UIStoryboard(name: "SubStoryboard", bundle: nil)
        guard let subViewController = storyboard.instantiateViewController(withIdentifier: "SubViewController") as? SubViewController else {
            return
        }
        self.present(subViewController, animated: true)
    }
    
}
```

上記を追加すると、下記の動作が可能になります。
![Simulator Screen Recording - iPhone 14 Pro - 2022-11-13 at 17.06.31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962748/e89732a1-5ccb-f3b8-2533-f2d2ec619212.gif)


以上で、Storyboardを別にしたモーダル画面遷移を説明を終わりにします！