Xcodeビュー要素ライブラリを介して、作成されたSwiftUIビューコンポーネントに簡単にアクセスできます

Xcodeには要素ライブラリーが含まれており、SwiftUIビュー要素を簡単に閲覧できるようになっています。これはコンポーネントの使用にあたってコンポーネント名を覚えておく必要がないので便利です。

自作の SwiftUI 要素をXcodeライブラリに追加することも可能です。これは、あなたが開発した SwiftUI ビューを使って `Swift Package` を開発する場合に便利です。他の開発者があなたの `Swift Package` を使うときに、あなたのライブラリに何が含まれているかをすぐに理解することができます。

また、Xcodeでは、プロジェクト内のすべてのファイルやインポートした SwiftUI パッケージのビュー要素を表示することができるのも利点の一つです。

# XcodeのSwiftUIライブラリーを利用する

まず最初に、SwiftUIのプレビュー画像が、Xcodeウィンドウのコードの右側に表示されていることを確認してください。表示されていない場合は、レイアウトボタンをクリックし、`Canvas`を切り替えてください。

<img width="350" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/d49f8009-2bf7-d99d-27ef-7b8de1cb2aca.png">

Xcode SwiftUIライブラリを開くには、Xcodeウィンドウの上部にあるプラスアイコンをクリックします。キーボードショートカットの `command-shift-L` を使用することもできます。

<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/6669d93f-277e-286e-9756-541877a35161.png">

選択できるタブは複数あります。

1番目のタブにはSwiftUIビュー要素が含まれています。

<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/8603aff0-3e28-52cd-d705-256505b624c3.png">

2番目のタブにはSwiftUI修飾子が含まれています。

<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/fe5a1e7e-180d-1662-66d5-6897a4245963.png">

項目をダブルクリックすると、その項目のコードがコードエディタの現在のカーソル位置に挿入されます。

# 独自のコンポーネントをライブラリに追加する

自分でデザインしたSwiftUIビューがたくさんあるならば、`LibraryContentProvider`を使用してXcodeライブラリに追加することができます。

例えば、私は一匹の猫の情報を表示できるようにする `CatInfoCell`という名前のSwiftUIビューを設計しました。

あなたは自分のプロジェクトの任意の1つのファイルで、`LibraryContentProvider`に対して確認を行う構造体を作成します。この構造体の名前は問題になりません。

```swift
struct CatInfoLibraryContent: LibraryContentProvider {
    @LibraryContentBuilder
    var views: [LibraryItem] {
        LibraryItem(
            CatInfoCell(displayedCat: .example, displayCatImage: false),
            title: "猫の情報ビュー",
            category: .control
        )
    }
}
```

また、同じ要素に対して、異なる設定で複数のエントリを定義することもできます。

```swift
struct CatInfoLibraryContent: LibraryContentProvider {
    @LibraryContentBuilder
    var views: [LibraryItem] {
        LibraryItem(
            CatInfoCell(displayedCat: .example, displayCatImage: false),
            title: "猫の情報ビュー",
            category: .control
        )
        LibraryItem(
            CatInfoCell(displayedCat: .example, displayCatImage: true),
            title: "画像付きの猫の情報ビュー",
            category: .control
        )
    }
}
```

これで、Xcode ライブラリで以下の2つのビュー要素を見ることができるようになります。

<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/ab9a9756-a8d0-ca1b-dc56-cce5c53f8e76.png">

Xcode ライブラリから要素を追加すると、`LibraryContentProvider` 構造体で定義した構成が提供されます。

<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/185219c5-6b79-529b-5df0-88354f27d5ae.png">

# Xcodeライブラリに独自のビューモディファイアを追加

ライブラリに自分のビューモディファイアを追加することもできます：

```swift
struct CatInfoLibraryContent: LibraryContentProvider {
    @LibraryContentBuilder
    var views: [LibraryItem] {
        //...
    }
    @LibraryContentBuilder
    func modifiers(base: Text) -> [LibraryItem] {
        LibraryItem(
            base.makeRoundedButton(color: .orange)
        )
    }
}
```

# 結論

もしあなたのプロジェクトが少数のカスタムビューエレメントしか持たないシンプルなものである場合は、Xcode SwiftUIライブラリを使用する必要はないかもしれません。

しかし、もし多数のカスタムエレメントがある場合や、チームでプロジェクトに取り組んでいる場合は、Xcodeライブラリにエレメントを追加することで、自分が設計したエレメントを他の人たちが利用したり理解したりするのがより簡単になる可能性があります。

[ここをクリックしてGithubでコードを閲覧](https://github.com/mszmagic/Xcode-Library-Example)

---

:relaxed: [Twitter @MszPro](https://twitter.com/MszPro)

:sunny: [私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます。](http://mszpro.com/ioskiji/)
<img width="150" src="https://cdn.mszmagic.com/static-web-content/AppClipImage_small.png">