[iOS] Storyboard Referenceを活用しStoryboardを分割する

## はじめに
Storyboardを使用したiOSアプリ開発において、１つのStoryboardに対したくさんのViewControllerが詰め込まれているのは良くないということなので、Storyboardを分割する方法を記載します。

|１つのStoryboardにViewControllerを複数突っ込んだ良くない例|StoryboardReferenceを活用し、Storyboardを適切に分割している例|
|---|---|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/1b7bba51-4aa3-263f-a467-d59746ce94e3.png" width="300">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/6f053602-c701-1e85-bb8f-90859bee6929.png" width="300">|

## 概要
### 環境
Xcode : Version 12.4

### 内容
ViewControllerを用意し、それに対応するStoryboardファイルを作成する。
(1画面につき1つのViewControllerである前提です)

## 実装手順

### 1) Storyboardファイルを作成する
main.storyboardと同ディレクトリにて`commond + N`で新規ファイルを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/23203073-4cee-40b7-5ab7-ea4417a2b415.png" width="500">

ファイルの種類をStoryboardと選択し、決定します。

その後にファイル名を入力するのですが、今回は"second"とします。
(この時、初期値が`Storyboard`と大文字Sで入力されているのですが、これを残した状態で`second.Storyboard`などとしてしまうと、拡張子エラーでファイルが開けなくなるので注意してください)

### 2) ViewControllerファイルを作成する
次に、新しく作成された上記のsecond.storyboardに対応するViewControllerファイルを作ります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/13410048-6701-891d-c9b9-d2ca6f74afd3.png" width="350"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/0e3992b6-5876-f0ea-9838-8a658aa7e0c8.png" width="250">

先ほどと同じ要領で作成していきます。
Cocoa Touch Classを選択し、ファイル名は`secondViewController`としました。

![5スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/e8908988-ce01-2b41-f1fa-761615dfead2.png)

このように２つのファイルが出来ていればOKです。

### 3) Storyboard Referenceを設置する
ではいよいよStoryboard Referenceを設置していきます。
main.storyboardのLibraryからObjectを検索します。`ref`と入れれば出てくるので空いているところにドラッグ&ドロップしていきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/7dfe7dd8-bc2f-9714-d0b8-2bf4868d23e2.png" width="400"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/0362c024-589a-f108-8bce-fa9a42a9d80c.png" width="300">

設置できたらStoryboard ReferenceのInspectorsで、対応するStoryboardを選びます。今回は先ほど作成した`second`となります。

### 4) segueの設定を行う
画面遷移のためにsegueの設定をします。
ViewControllerからStoryboard Referenceにsegueを繋ぎます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/0ff13f8b-020f-5c94-7eed-8b12622e19db.png" width="350">
segueを繋いだらsegue Identifierも設定しておきましょう。今回は`goSecond`とします。

segueについての解説は本記事では省略しますが、以下の記事がとても分かりやすく参考にさせて頂きました。ありがとうございます。
- [【Swift5/Xcode】画面遷移のチートシート。Segueを画面遷移とSegueを使わない画面遷移を徹底解説](https://satoriku.com/screen-transition/)

### 5) 作成したstoryboardにViewControllerを設置

1)で作成した何もない状態のsecond.storyboardにViewControllerを設置します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/78d60631-f50f-b8bc-9e96-c3de9a7ce713.png" width="550">

設置後はViewControllerの`Custom Class`の設定、`Is Initial View Controller`のチェックをします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/3afde3e0-0ee1-908b-3df9-6a757ba69989.png" width="330"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662505/09ba5b65-db32-1b54-8819-099afbc501a9.png" width="300">

### 6) 画面遷移を試す
Storyboardを切り離す作業・設定は完了したので、下記２点を追記してちゃんと動作するかどうかを画面遷移させてみて確認します。

- main.storyboardにButtonを設置
- ViewController.swiftに画面遷移のメソッドを記述
- (遷移先のViewに色をつけて分かりやすくする)


```swift
// ViewController.swift
@IBAction func goSecondButtonTapped(_ sender: UIButton) {
    performSegue(withIdentifier: "goSecond", sender: nil)
}
```

これで無事に動作することが確認できました！
<img src="https://i.gyazo.com/695af83b0140f327c7682d58f8624c35.gif" width="500">


## 後語り
以上が`Storyboard Reference`活用による、Storyboardを分割して`1つのStoryboardに対して1つのViewController`という配置をする方法となります。
このようにStoryboardを分割して管理することで、コンフリクトも起こりにくくなります。
私自身もしっかりと理解を深め活用していきたいと思います。

2021.3.2 大文字小文字を修正