SwiftUI カスタムコンポーネントの設計・実装方法 | 実践ガイド

2026年6月21日

Contents

1 SwiftUI カスタムコンポーネントの設計・実装方法を解説する
2 SwiftUIでカスタムコンポーネントを構築する基本設計思想
- 2.1 View Protocolの設計原則
- 2.2 プロトコルオブジェクトとViewModelの連携
3 ステート管理中心のラジオボタン実装例
- 3.1 @Bindingと@Stateの選択基準
  - 3.1.1 実装例: 複数セレクターコンポーネントの連携
4 SVGファイルを活用したカスタムアイコン統合
- 4.1 アセットCatalogへのSVG登録方法
- 4.2 動的なスタイル適用技法
5 UICollectionView代替のカスタムリストビュー構築
- 5.1 GeometryReaderによるレイアウト調整
- 5.2 動的データバインディング技法
6 Xcodeでのカスタムシンボルライブラリ構築
- 6.1 Symbolのエクスポート手順
- 6.2 アイコンセットの管理方法
7 まとめ: SwiftUIカスタムコンポーネント開発のポイント

スポンサードリンク

SwiftUI カスタムコンポーネントの設計・実装方法を解説する

SwiftUIで独自のUIコンポーネントを開発する際、ステート管理と可視化手法が決定的なポイントになります。本記事では「SwiftUI カスタムコンポーネント作り方」というキーワードに沿って、実務で使える設計方法や手順を具体的に解説します。読者の方の悩みに対応しつつ、最新技術情報をもとにした実装例をご提供します。

SwiftUIでカスタムコンポーネントを構築する基本設計思想

SwiftUIで独自コンポーネントを開発する際には、宣言的UIの特性に合った設計が重要です。特にView ProtocolとViewModelの連携方法は、安定したステート管理と拡張性を確保する鍵となります。

View Protocolの設計原則

SwiftUIではすべてのUI要素がViewプロトコルを採用しており、コンポーネント設計時にこの設計思想を意識することが大切です。以下に設計上のポイントを整理します。

ポイント	説明
宣言的構造	`@ViewBuilder`や`@EnvironmentObject`などを活用し、ステート変更時の再描画を明確化する
モジュール性	カスタムコンポーネントは独立したサブビューとして設計し、リファクタリングを容易にする
可視化の簡略化	コンポジションで複雑なUI構造を組み立てることで、保守性と再利用性を高める

プロトコルオブジェクトとViewModelの連携

ViewModelはステート管理に特化したレイヤーとして機能し、View Protocolとの連携がスムーズなUI動作を実現します。以下のように設計することで、複数コンポーネント間でのデータ共有や変更通知を効率的に行えます。

@ObservedObjectでViewModelをViewから参照
@Publishedプロパティを使ってステートの変化を自動的に反映
複雑なロジックはViewModelに分離し、View側はUI構築に集中

ステート管理中心のラジオボタン実装例

シンプルな選択コンポーネントからステート管理の核心を学ぶことで、カスタムコンポーネント設計の理解が深まります。

@Bindingと@Stateの選択基準

SwiftUIでは@Stateと@Bindingの選択が重要です。それぞれの使い分けは以下の通り：

プロパティ	使用シーン	例
@State	コンポーネント内で管理するステート（内部変数）	ラジオボタンの選択状態を保持
@Binding	親ビューからデータを受ける場合（外部変数）	カスタムラジオボタンで親ビューが選択値を反映

実装例: 複数セレクターコンポーネントの連携

struct CustomRadioButton: View {
    @Binding var selectedOption: String
    let option: String

    var body: some View {
        Toggle(option, isOn: Binding(
            get: { self.selectedOption == option },
            set: { newValue in
                if newValue {
                    self.selectedOption = option
                }
            }
        ))
        .toggleStyle(CustomToggleStyle())
    }
}

struct CustomRadioButton: View {

@Binding var selectedOption: String

let option: String

var body: some View {

Toggle(option, isOn: Binding(

get: { self.selectedOption == option },

set: { newValue in

if newValue {

self.selectedOption = option

}

))

.toggleStyle(CustomToggleStyle())

}

このコードでは@Bindingを用いて選択状態を親ビューと共有し、複数のラジオボタンが連携して動作します。

SVGファイルを活用したカスタムアイコン統合

ベクターグラフィックはスケーラビリティに優れており、SwiftUIでも柔軟に扱えます。特にSVGファイルの統合方法について詳しく説明します。

アセットCatalogへのSVG登録方法

XcodeでAsset Catalog（.xcassets）を開く
New > ImportからSVGファイルを追加
作成したSVGアイコンは、Image("アイコン名")として簡単に呼び出せます

動的なスタイル適用技法

SVGは描画時にスタイル変更が可能です。以下のような方法で動的に色やスタイルを変更できます：

Colorプロパティで背景色を指定
.resizable()でサイズ調整
.scaledToFit()で画面に合わせて自動拡大・縮小

SVGアイコンはリッチなUI構築には欠かせない要素です。設計上、再利用性とスタイルの一貫性を意識しましょう。

UICollectionView代替のカスタムリストビュー構築

SwiftUIではListやScrollViewを使ってリストビューを作成することが可能です。GeometryReaderなどを活用すれば、UICollectionViewのような複雑なレイアウトも実現できます。

GeometryReaderによるレイアウト調整

以下のようにGeometryReaderを組み合わせることで、動的なサイズ調整が可能になります：

struct CustomList: View {
    let items = [&quot;アイテム1&quot;, &quot;アイテム2&quot;, &quot;アイテム3&quot;]

    var body: some View {
        ScrollView(.vertical) {
            GeometryReader { geometry in
                VStack(spacing: 0) {
                    ForEach(items, id: \.self) { item in
                        Text(item)
                            .frame(width: geometry.size.width * 0.8)
                    }
                }
            }
        }
    }
}

struct CustomList: View {

let items = ["アイテム1", "アイテム2", "アイテム3"]

var body: some View {

ScrollView(.vertical) {

GeometryReader { geometry in

VStack(spacing: 0) {

ForEach(items, id: \.self) { item in

Text(item)

.frame(width: geometry.size.width * 0.8)

}

このコードでは、リストの各アイテムが画面幅に応じて自動調整されるようになっています。

動的データバインディング技法

カスタムコンポーネントとデータソースを連携させるには@ObservedObjectや@StateObjectなどを活用します。データ変更時にUIが即座に反映されることで、スムーズなユーザー体験を実現できます。

Xcodeでのカスタムシンボルライブラリ構築

デザイン資産の整理術として、Xcodeでカスタムシンボルライブラリを作成することで、ビジュアル要素の管理が容易になります。

Symbolのエクスポート手順

カスタムSVGファイルを準備
Symbol Composerなどのツールを使ってSFシンボルに変換（例: SVGのパスデータを解析し、Scalable Vector GraphicsからSF Symbols形式に自動変換）
Xcodeへインポートし、プロジェクト内の.xcassetsに配置

シンボルライブラリはUIの一貫性と保守性を高めるために有効です。特に複数のコンポーネントで共通アイコンが必要な場合は必須です。

アイコンセットの管理方法

同じアイコンセット内にサイズ変更可能なバージョンをまとめておく
デザインレビュー時に一括で確認・修正が可能

まとめ: SwiftUIカスタムコンポーネント開発のポイント

SwiftUIでのカスタムコンポーネント開発は、ステート管理や設計思想の理解に依存します。以下を重点的に把握することで、高品質なUI構築が可能になります。

@State vs @Binding: 内部管理と外部変数の使い分けを明確化
SVGとの連携: ベクターグラフィックを動的スタイルに応じて柔軟に活用
GeometryReaderの活用: 動的なレイアウト調整が必要な場合に有効
シンボルライブラリ構築: デザインの一貫性と保守性を確保するためのベストプラクティス

以上を参考に、SwiftUIで独自コンポーネントを開発してみましょう。記事内のコードサンプルを実際に試すことで、理解が深まります。

スポンサードリンク

-SwiftUI