【Swift】Storyboardを削除してXibで開発をする

# はじめに
Storyboardを使用して開発を進めるとStoryboardが肥大化していきます。
肥大化したStoryboardでコンフリクトが発生すると取り返しのつかないことになることは予想できます。
そのような事態を未然に防ぐためにviewごとにxibを作成して開発をします。
今回はそのやり方を記事にしておきます。

# Mainの削除
① Mainを右クリックします
② 「Delete」を押します
![スクリーンショット 2022-10-06 18.46.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/dda5d094-a12b-6107-7fb4-94e6b83419c1.png)

「Move to Trash」を選択します。
![スクリーンショット 2022-10-06 18.48.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/cfeba53b-8ae2-b42b-a01a-8f394906a155.png)

# Info.plistの変更
① 「Info」を選択します
② 「Storyboard Name」を選択します
③ 「Storyboard Name」の「-」を押して削除します
![スクリーンショット 2022-10-06 18.50.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/4bd237c4-0d3f-1a6e-f0bc-a5526bf01383.png)

# Infoの変更
① プロジェクトを選択します
② ターゲットを選択します
③ 「Info」を選択します
④ 「Main storyboard file base name」を選択します
⑤ 「Main storyboard file base name」の「-」を押して削除します
![スクリーンショット 2022-10-06 19.14.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ac434b75-7e47-4e59-679c-3cb6c50b1f48.png)



# SceneDelegateの変更
```diff_swift
class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?


-   func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
-       // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
-       // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
-       // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
-       guard let _ = (scene as? UIWindowScene) else { return }
-   }

+   func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
+       if let windowScene = scene as? UIWindowScene {
+           let window = UIWindow(windowScene: windowScene)
+           window.rootViewController = ViewController()
+           self.window = window
+           window.makeKeyAndVisible()
+       }
+   }

    func sceneDidDisconnect(_ scene: UIScene) {
        // Called as the scene is being released by the system.
        // This occurs shortly after the scene enters the background, or when its session is discarded.
        // Release any resources associated with this scene that can be re-created the next time the scene connects.
        // The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
    }

    func sceneDidBecomeActive(_ scene: UIScene) {
        // Called when the scene has moved from an inactive state to an active state.
        // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
    }

    func sceneWillResignActive(_ scene: UIScene) {
        // Called when the scene will move from an active state to an inactive state.
        // This may occur due to temporary interruptions (ex. an incoming phone call).
    }

    func sceneWillEnterForeground(_ scene: UIScene) {
        // Called as the scene transitions from the background to the foreground.
        // Use this method to undo the changes made on entering the background.
    }

    func sceneDidEnterBackground(_ scene: UIScene) {
        // Called as the scene transitions from the foreground to the background.
        // Use this method to save data, release shared resources, and store enough scene-specific state information
        // to restore the scene back to its current state.
    }


}
```

# xibの作成
① 該当フォルダを選択します
② ⌘ + N
③ 「View」を選択します
④ 「Next」を選択します
![スクリーンショット 2022-10-06 18.58.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/4aef6486-be7b-9588-e563-44f1d456bf44.png)

⑤ ファイル名を入力します
⑥ 「Create」を選択します
![スクリーンショット 2022-10-06 19.00.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1562b372-8af1-7abb-d963-55c0efe20b2b.png)

# xibの設定
① 先ほど作成したxibファイルを選択します
② 「File's Owner」を選択します
③ 「Class」に接続するクラス名を入力します。
![スクリーンショット 2022-10-06 19.04.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/5465c07d-0cb8-9201-ced7-701d366012ae.png)

① 先ほど作成したxibファイルを選択します
② 「File's Owner」を選択します
③ まるいボタンを押します(画像をみてください笑)
④ 「view」を引っ張って「View」と繋げる
![スクリーンショット 2022-10-06 19.08.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/05ca6b74-c29b-4802-08b3-67e5a381d5a3.png)

# 確認
① xibファイルを選択します
② 「View」を選択します
③ 三本線のボタンを選択します(画像を見てください)
④ 「Background」に適当な色を設定します
![スクリーンショット 2022-10-06 19.25.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/d99a8432-39fb-b1d6-34c8-718d42bdc572.png)

ビルドしてみて背景色が反映されていれば成功です

# おわり
画面遷移も簡単になるっぽいです！
いいこといっぱい！！