[Xcode] Storyboard Referenceを使用してStoryboardを分割する

#はじめに
`Storyboard Reference`は、他のStoryboardを参照してStoryboardを分割できるものです。
Segueで異なるStoryboard間をつなげることもできます。
アプリの画面数が増えてくると、１つのStoryboardに収めて管理するのは厳しいです。
Storyboard画面を頻繁に拡大縮小するのはかなり煩わしいです (私はノートパソコンなので特に、、、)。
個人開発でさえこのように感じるのであれば、チーム開発では尚更であることは想像に容易いです。
本記事では、Storyboard Referenceを使用して、Storyboardを分割する手順を簡単にまとめてみました。

#環境
[Xcode] Version 12.4
[Swift] Version 5.3.2
[iOS] 14.4
[MacOS] 10.15.7

#今回作成するサンプル
下図のようなシンプルな画面遷移アプリを想定します。
各タブごとにStoryboardを (赤、青、緑に)分割し、最終的には同じ画面(紫)に遷移できるようにします。
<img width="800" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/e1f9d66b-eb33-8861-502c-16cb0166e2d1.png">

#Storyboard Referenceを作成する
Storyboardを分割する際、以下の2パターンの状況が想定できます。

1. すでに同じStoryboard内で画面遷移が完成しており、その状態からStoryboardを切り分ける
2. 最初からStoryboardを分けて作成する  

本記事では、**1**の方法を行います。
最後に紫画面への参照を作るときのみ**2**でやってみます。

まず、切り分けたい画面を複数選択し、[`Editor`] > [`Refactor to Storyboard...`]をクリックします。
<img width="700" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/d1030dbe-4133-a23b-d3ff-bfd8be2429a8.png">
切り分けるStoryboard名 (今回はRed.storyboard)と、そのファイルを入れるフォルダ (Group)を選択して[`Save`]をクリックします。
<img width="700" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/7437273e-568e-ee1a-f002-2a164ae59471.png">
「`Storyboard`」フォルダなんかを作ると良いかもしれません。ファイルを選択して`右クリック` > [`New Group from Selection`]でフォルダを作成できます。
<img width="400" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/dfa36191-737f-234a-2b11-221dd2e52433.png">
他の画面 (青、緑)も同様に切り分けると、メインのStoryboardは以下のようになります。
<img width="700" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/b440ca06-d404-c7d9-c6ad-e759b9198f75.png">
切り分けたStoryboardを見てみると、紫画面へのSegueが切れています。これは後で繋ぎ直す必要があります。
また、Storyboardの最初の画面には、「`Attributes inspector`」の「`is initial View Controller`」にチェックを入れておく必要があります。
<img width="700" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/2f046253-25b6-31c3-bbd5-3031ec0fa7a1.png">
<img width="200" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/4707dce5-3419-60d3-5915-1c70c898c75c.png">
以上で完了です。

次に、紫画面のStoryboardを`2`の方法で分割して画面遷移できるようにします。
まず、新しいstoryboardファイルを作成します (ファイル名はPurple.storyboardにしておきます)。
<img width="350" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/193ae4b2-c257-0ec3-4e77-7f6c6bd53672.png">&nbsp;<img width="350" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/f3ce6697-4411-8346-4f18-3de1c8bce7bd.png">
ViewControllerを作成します。
<img width="350" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/8607e3f2-4562-af5e-2813-0fa33b03418c.png">
あとは遷移元のStoryboardで`Storyboard Reference`を作成するだけです。
<img width="800" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/d767359b-70d6-aa7f-288e-3e06f27a9203.png">
[`Attributes inspector`]の「`Storyboard`」に紐付けたいStoryboard名を入力します。
<img width="600" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/e4891f67-74a7-f376-eee7-c099ce63d6ca.png">
今回は画面遷移させたいだけので、Storyboard ReferenceにSegueを繋いで完了です。
<img width="600" alt="13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/48a7b93c-b796-210b-6211-f07765363240.png">

#[補足] TabBarのアイコンやタイトルを変更する
Storyboard Referenceを用いてStoryboardを分割したとき、TabBarのアイコン等をどこで変更するのか少し迷ったので補足します。
初めは、TabBarControllerの方で設定すると思っていたのですが、titleやimageを変更しても反映されませんでした。
<img width="800" alt="14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/3f6f8ac8-00b9-b683-13ec-1f80e720ced5.png">
参照先のStoryboardの親ViewControllerで設定すると反映されるようです。
<img width="800" alt="15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/eda87e94-c5a7-377c-5607-04f5934b4f78.png">
正しく反映されていました。
<img width="300" alt="16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667697/a276ece6-c5b4-60ec-52d6-f23779fe787a.png">


#最後に
今回、初めてStoryboardを分割してみましたが、非常に簡単であり、Storyboardも管理しやすくなりました。
個人的には、まず1つのStoryboardで画面遷移を作成し、最後に切り分けていく1の方法が効率的と感じました。
より良い方法があれば教えていただけると幸いです。

#参考文献
以下の情報を参考にさせていただきました。
- [Storyboardをあとから簡単に分ける方法](https://plaza.rakuten.co.jp/osyakuso/diary/201806020000/)