私はまだswift開発歴1ヶ月の初心者です。
今は練習でメモ帳アプリを作っています。
メモ帳アプリはある程度完成しているんですが、Main.storyboardでUIを作っています。
でもできればMain.storyboardを使わずXIBファイルを使って開発の練習をしたいです。
（私にswiftを教えてくれている師匠の指示です。）
なので
Main.storyboardとXIBファイルの違いやXIBファイルの使い方を調べてメモとしてまとめようと思います。
📌 Main.storyboardとは
＜メリット＞
✅ アプリ全体の画面遷移を設計できる
✅ 複数のViewControllerを1つのファイルで管理
✅ 画面間の遷移（Segue）を視覚的に作成可能
✅ iOS 5以降でサポート
＜デメリット＞
❌ ファイルが大きくなると編集・管理が大変
❌ チーム開発時にコンフリクトが発生しやすい
💡 使うケース: 小～中規模のアプリや、画面遷移を視覚的に設計したい場合
📌 XIB（.xib）とは
＜メリット＞
✅ 1つの画面やコンポーネントを単独で管理
✅ Viewの再利用（カスタムView）に向いている
✅ チーム開発時にコンフリクトが少ない
✅ iOS 3以降でサポート
＜デメリット＞
❌ 画面遷移の管理はできない
❌ 複数のViewControllerを扱うのが面倒
💡 使うケース:
• カスタムUI部品（カスタムセルやカスタムビュー）を作成する場合
• ストーリーボードの管理が煩雑になるのを避けたい場合
だそうです。
＜簡単なXIBファイルの使い方＞
XIBを使う方法
1. XIBファイルを作成する
• Xcodeで「New File」→「User Interface」→「View」を選択してXIBを作成
2. XIBにViewを配置
• UILabel、UIButtonなどを配置し、AutoLayoutを設定
3. 対応するSwiftファイルを作成
• UIView などのカスタムクラスを作成し、XIBと関連付ける
• init メソッドでXIBをロード
4. ViewControllerにXIBを読み込む
• UINib(nibName:bundle:) を使って読み込み
＜XIBファイルで画面遷移する方法＞
手順
① XIBファイルとViewControllerを作成
1. 新しいXIBファイルを作成
• Xcodeで「New File」→「User Interface」→「View」を選択
• ファイル名は SecondViewController.xib にする
2. 対応するViewControllerを作成
• 「New File」→「Swift File」→ SecondViewController.swift を作成
• UIViewController を継承して、XIBを読み込むように設定
② SecondViewController.swiftを編集
import UIKit
class SecondViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
}
// XIBファイルをロードするための初期化処理
init() {
super.init(nibName: "SecondViewController", bundle: nil)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
• super.init(nibName: "SecondViewController", bundle: nil) を使って、XIBと紐づける
• required init?(coder:) はStoryboardを使わない場合でも必要
③ ボタンを配置し、画面遷移を実装
1. メイン画面のViewControllerにボタンを追加（Storyboardまたはコード）
2. ボタンタップでXIB画面に遷移
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let button = UIButton(type: .system)
button.setTitle("次の画面へ", for: .normal)
button.addTarget(self, action: #selector(openSecondView), for: .touchUpInside)
button.frame = CGRect(x: 100, y: 200, width: 150, height: 50)
view.addSubview(button)
}
@objc func openSecondView() {
let secondVC = SecondViewController()
navigationController?.pushViewController(secondVC, animated: true)
}
}
• pushViewController を使ってXIB画面に遷移
• NavigationControllerが必要なので、UINavigationController を使う
④ NavigationControllerを設定
XIB画面へ遷移するには UINavigationController が必要です。
AppDelegate.swift または SceneDelegate.swift で設定
import UIKit
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
window = UIWindow(frame: UIScreen.main.bounds)
let mainVC = ViewController()
let navController = UINavigationController(rootViewController: mainVC)
window?.rootViewController = navController
window?.makeKeyAndVisible()
return true
}
}
⑤Info.plist の確認
XIBを使う場合、Main.storyboard を削除したら Info.plist の設定変更 が必要です。
1. Main.storyboard を削除
2. Info.plist から Storyboard Name を削除
• Application Scene Manifest > Scene Configuration > Storyboard Name を削除
＜まとめ＞
1. XIBとSwiftファイルを作成
2. init(nibName:bundle:) でXIBをロード
3. pushViewController でXIB画面へ遷移
4. UINavigationController を設定
5. Info.plist の確認
今日はこのくらいにして
また分からないことがあったら調べてメモにまとめようと思います。