完全に理解する Storyboard & UIKit (Day 25): XIBとStoryboardの使い分け・併用

Day 24で、巨大なStoryboardを分割し「画面単位で別々のStoryboardファイルにする」手法を学びました。 それとは別に、iOS開発には 「XIB（シブ / .xib）」 という形式のUIファイルが存在します。

これらは同じ Interface Builder を使いますが、用途と歴史が異なります。今日はXIBの扱い方と、モダンな開発における Storyboard との実践的な使い分けを学びます。

1. XIB (NIB) とは何か？

XIB (XML Interface Builder) は、Storyboard（iOS 5以前）よりも昔から存在するUIファイル形式です。（コンパイルされると NIB という形式になります）。

最大のポイントは、「XIBには画面遷移（Segue）の概念がない」 ことです。 Storyboardが「複数画面のフロー」を示すのに対し、XIBはあくまで「1つの画面」や「1つのUI部品（ボタン群やセルなど）」を単発で設計するためのキャンバス（箱）です。

2. なぜ今でも XIB を使うのか？

Storyboardが主役になった今でも、XIBは以下の2つの場面でStoryboardよりも明確に優れています。

① 再利用可能なコンポーネント（Custom View）の設計

Day 19で紹介した Custom View は、枠の仕組みだけ作って「中身のボタン配置などのレイアウトは全てコード(Auto Layout制約をコードで書く処理)」で組む必要があり、とても面倒でした。 XIBファイルとカスタムクラスを紐づければ、独自のコンポーネントの「見た目（UIの配置）」もGUIで作った上で、色々なStoryboardで使い回せます。

② 再利用可能な Custom Cell の設計

Day 16ではStoryboardの中にTable Viewのアノマリー（Prototype Cell）を作りました。 しかし、「ホーム画面のリスト用Storyboard」と「検索画面のリスト用Storyboard」の両方で同じデザインのセルを使いたい場合、Storyboard内だとコピペして両方のファイルで管理しなければなりません。 XIBで1つのCellファイルとして切り出しておけば、複数のStoryboardのTableViewから一つのセル定義を共有できます。

3. 実践：UITableViewCellを XIB で作成して使う

実際のプロジェクトで最もよく行われる「カスタムセルのXIB化」の手順です。

ステップ1: ファイルの作成

1. File > New > File... から Cocoa Touch Class を選択。
2. Subclass of に UITableViewCell を指定。
3. Also create XIB file にチェックを入れて保存します（MyCustomCell.swiftとMyCustomCell.xibが同時に生成されます）。

ステップ2: XIBでのUI配置

1. 生成された .xib ファイルを開くと、長方形のセルだけのキャンバスが現れます。
2. 普段のStoryboardと同じようにLabel等を配置し、制約をつけます。
3. MyCustomCell.swift にIBOutletとしてLabelなどを接続します。
4. ここで必ず、Attributes Inspectorでセルの Identifier (例: MyCustomCell) を指定します（忘れがちです）。

ステップ3: XIBセルの「登録」と呼び出し

StoryboardのPrototype Cellと異なり、XIBで作ったセルは「このTableViewは、このXIBファイルを知っていますよ」という**登録儀式（Register）**を書かないと使えません。

swift
class ViewController: UIViewController, UITableViewDataSource {
    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // --- 必須：XIBファイルの登録 ---
        // 1. NIB（XIB）のロード
        let nib = UINib(nibName: "MyCustomCell", bundle: nil) // ファイル名
        // 2. TableViewへ登録
        tableView.register(nib, forCellReuseIdentifier: "MyCustomCell") // XIBで書いたIdentifier

        tableView.dataSource = self
    }

    // (dataSourceメソッド等は通常と同じ)
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // 登録されているので、あとは普通にDequeueするだけ！
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "MyCustomCell", for: indexPath) as? MyCustomCell else {
            return UITableViewCell()
        }

        cell.myLabel.text = "XIBからこんにちは"
        return cell
    }
}

4. プロの現場での使い分け戦略

モダンなチーム開発においては、以下のような方針をとることが多いです。

• 画面遷移とViewControllerの配置: Storyboard (複数ファイルに分割・Referenceで連携)
• アプリ全体で再利用・共有するセルの部品化: XIB
• 機能特化の複雑なカスタムビュー(グラフ描画等): XIB ＋ Custom Class

参考: アプリ全体をStoryboardを一切使わずに全てプログラムによるコードレイアウトで作る方針（Programmatic UI）を採用するチームもありますが、保守性やオンボーディングのコスト等の観点から、近年は減少しつつあります。

📝 今日のまとめ

• XIB は画面の一部や単一画面を設計するための、Segueを持たないキャンパスである。
• Storyboardファイルが跨いでも同じUIコンポーネントを使い回したい場合（再利用）、XIBにするのが最もスマート。
• カスタムセルをXIBで作成した場合、ViewControllerの viewDidLoad 等で tableView.register(nib, forCellReuseIdentifier:) を用いて事前登録する手順が必須となる。

ファイルの分割とコンポーネントの再利用性が高まり、プロ品質の設計構成ができるようになりました。 明日の Day 26 では、「アプリ全体の色やデザインのルール」をXIBやStoryboardで個別に設定するのではなく、コード一発で一元管理して統一感を出す強力な機構 UIAppearance について学びます。