macOS Ventura で始める SwiftUI 開発：Xcode インストールから App Store 提出まで

Contents

1 1️⃣ 環境構築と Xcode のインストール
2 2️⃣ SwiftUI プロジェクト作成と基本ビュー構築
3 3️⃣ データバインディングとモデル層の実装
- 3.1 ✅ 結論
- 3.2 実装例：シンプルなタスク管理
  - 3.2.1 Model（Task と TaskStore）
  - 3.2.2 View（タスクリスト）
4 4️⃣ 画面遷移・ナビゲーションとアセット管理
5 5️⃣ 実機テスト・デバッグ・App Store 提出までのフロー
6 6️⃣ まとめと次のステップ
- 6.1 🚀 次に挑戦したいこと

スポンサードリンク

1️⃣ 環境構築と Xcode のインストール

✅ 結論

macOS Monterey（12.x）以降の環境で、Xcode 15.4 以上をインストールすれば SwiftUI 開発が即座に始められます。
Xcode 13 系は macOS Monterey が最低要件 です（Ventura・Sonoma でも問題なく動作します）。

📌 必要な OS バージョンと Xcode の対応表（2026 年4月時点）

Xcode メジャーバージョン	最低 macOS バージョン	現在の最新マイナーバージョン
13 系	macOS 12 Monterey	13.5
14 系	macOS 13 Ventura	14.3
15 系	macOS 14 Sonoma	15.4 (2026‑04 リリース)

👉 ポイント：開発を始めるなら、Apple が推奨する最新の Xcode（現在は 15.4）を使用すると、iOS 17/18 の新機能や App Store Review Guidelines に完全対応できます。

📥 Xcode の入手方法

方法	手順	メモ
App Store	1. App Store を開く 2. 「Xcode」で検索 → インストール	自動的に最新の安定版（15.4）を取得できます。
Apple Developer サイト	1. https://developer.apple.com/download/all/ にサインイン 2. 「Xcode 15.4」→「Download」	過去バージョンが必要な場合にも利用可能です。

正しい SwiftUI 入門ページの URL

公式ドキュメントは次のリンクです（2026 年 4 月現在）

https://developer.apple.com/documentation/swiftui/getting-started-with-swiftui

1 2	https://developer.apple.com/documentation/swiftui/getting-started-with-swiftui

※ 以前掲載されていた <https://developer.apple.com/jp/swiftui/get-started/> はリダイレクト先が無く、404 になる可能性があります。

🛠 コマンドラインツールのインストール

ターミナルで以下を実行し、Xcode が提供する xcrun 系統のツールが正しく設定されているか確認します。

xcode-select --install   # 未インストールの場合はインストーラが起動
xcodebuild -version      # Xcode と Build version の表示で成功を確認

xcode-select --install # 未インストールの場合はインストーラが起動

xcodebuild -version # Xcode と Build version の表示で成功を確認

2️⃣ SwiftUI プロジェクト作成と基本ビュー構築

✅ 結論

Xcode の SwiftUI App テンプレート（iOS 17 対応）でプロジェクトを生成すれば、@main と ContentView が自動生成され、Canvas で即座にプレビューが確認できます。

手順

手順	操作内容
1	Xcode → File > New > Project
2	「iOS」タブ → App を選択
3	Interface = SwiftUI、Life Cycle = SwiftUI App
4	プロジェクト名・Bundle Identifier を入力し、Team（Apple ID）を設定
5	「Create」

最小サンプルコード

import SwiftUI

@main
struct MyFirstSwiftUIApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State private var counter = 0

    var body: some View {
        VStack(spacing: 24) {
            Text(&quot;カウント：\(counter)&quot;)
                .font(.title2)

            Button(action: { counter += 1 }) {
                Text(&quot;+1&quot;)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.accentColor.opacity(0.2))
                    .cornerRadius(8)
            }
        }
        .padding()
    }
}

import SwiftUI

@main

struct MyFirstSwiftUIApp: App {

var body: some Scene {

WindowGroup {

ContentView()

}

struct ContentView: View {

@State private var counter = 0

var body: some View {

VStack(spacing: 24) {

Text("カウント：\(counter)")

.font(.title2)

Button(action: { counter += 1 }) {

Text("+1")

.frame(maxWidth: .infinity)

.padding()

.background(Color.accentColor.opacity(0.2))

.cornerRadius(8)

}

.padding()

}

@State が変化するとビューが自動的に再描画されます。
Canvas（右側プレビュー）で Resume → Live Preview を有効にすれば、コード編集と同時に UI がリアルタイム更新します。

3️⃣ データバインディングとモデル層の実装

✅ 結論

ObservableObject + @Published（Combine）で アプリ全体で共有できる状態 を作り、ビュー側は @StateObject または @ObservedObject で注入すれば、コード量が劇的に減ります。

実装例：シンプルなタスク管理

Model（Task と TaskStore）

import Foundation
import Combine

/// タスク1件を表す構造体
struct Task: Identifiable, Equatable {
    let id = UUID()
    var title: String
    var completed: Bool = false
}

/// タスク一覧を管理するクラス（ObservableObject）
final class TaskStore: ObservableObject {
    @Published var tasks: [Task] = [
        Task(title: &quot;買い物&quot;),
        Task(title: &quot;コードレビュー&quot;, completed: true)
    ]
}

import Foundation

import Combine

/// タスク1件を表す構造体

struct Task: Identifiable, Equatable {

let id = UUID()

var title: String

var completed: Bool = false

}

/// タスク一覧を管理するクラス（ObservableObject）

final class TaskStore: ObservableObject {

@Published var tasks: [Task] = [

Task(title: "買い物"),

Task(title: "コードレビュー", completed: true)

]

}

View（タスクリスト）

import SwiftUI

struct TaskListView: View {
    @StateObject private var store = TaskStore()

    var body: some View {
        NavigationStack {
            List {
                ForEach($store.tasks) { $task in   // 双方向バインディング
                    HStack {
                        Text(task.title)
                            .strikethrough(task.completed, color: .gray)

                        Spacer()

                        Image(systemName: task.completed ? &quot;checkmark.circle.fill&quot; : &quot;circle&quot;)
                            .foregroundColor(task.completed ? .green : .secondary)
                            .onTapGesture { task.completed.toggle() }
                    }
                }
                .onDelete(perform: delete)   // スワイプ削除
            }
            .navigationTitle(&quot;タスク一覧&quot;)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: addSample) {
                        Image(systemName: &quot;plus&quot;)
                    }
                }
            }
        }
    }

    private func delete(at offsets: IndexSet) {
        store.tasks.remove(atOffsets: offsets)
    }

    private func addSample() {
        store.tasks.append(Task(title: &quot;新規タスク&quot;))
    }
}

import SwiftUI

struct TaskListView: View {

@StateObject private var store = TaskStore()

var body: some View {

NavigationStack {

List {

ForEach($store.tasks) { $task in // 双方向バインディング

HStack {

Text(task.title)

.strikethrough(task.completed, color: .gray)

Spacer()

Image(systemName: task.completed ? "checkmark.circle.fill" : "circle")

.foregroundColor(task.completed ? .green : .secondary)

.onTapGesture { task.completed.toggle() }

}

.onDelete(perform: delete) // スワイプ削除

}

.navigationTitle("タスク一覧")

.toolbar {

ToolbarItem(placement: .navigationBarTrailing) {

Button(action: addSample) {

Image(systemName: "plus")

}

private func delete(at offsets: IndexSet) {

store.tasks.remove(atOffsets: offsets)

}

private func addSample() {

store.tasks.append(Task(title: "新規タスク"))

}

$store.tasks で 双方向バインディング を取得し、リスト行ごとに状態変更が即座に UI に反映されます。
@StateObject はビューのライフサイクルに合わせてオブジェクトを生成・保持します。

4️⃣ 画面遷移・ナビゲーションとアセット管理

✅ 結論

iOS 16+ では NavigationStack と NavigationLink が標準。画像は Asset Catalog に登録すれば解像度ごとの自動切替が行われます。

Navigation のサンプル

import SwiftUI

struct HomeView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink(&quot;プロフィール&quot;, destination: ProfileView())
                NavigationLink(&quot;設定&quot;, destination: SettingsView())
            }
            .navigationTitle(&quot;ホーム&quot;)
        }
    }
}

struct ProfileView: View {
    var body: some View {
        VStack(spacing: 16) {
            Image(&quot;avatar&quot;)                     // Asset Catalog に登録済み
                .resizable()
                .scaledToFit()
                .frame(width: 120, height: 120)
                .clipShape(Circle())

            Text(&quot;山田 太郎&quot;)
                .font(.title2)
        }
        .navigationTitle(&quot;プロフィール&quot;)
    }
}

import SwiftUI

struct HomeView: View {

var body: some View {

NavigationStack {

List {

NavigationLink("プロフィール", destination: ProfileView())

NavigationLink("設定", destination: SettingsView())

}

.navigationTitle("ホーム")

}

struct ProfileView: View {

var body: some View {

VStack(spacing: 16) {

Image("avatar") // Asset Catalog に登録済み

.resizable()

.scaledToFit()

.frame(width: 120, height: 120)

.clipShape(Circle())

Text("山田太郎")

.font(.title2)

}

.navigationTitle("プロフィール")

}

Asset Catalog に画像を追加する手順

Assets.xcassets を選択
「+」 → New Image Set を作成、名前は avatar（小文字・スネークケース推奨）
2x と 3x 用 PNG/JPEG をそれぞれドラッグ＆ドロップ
SF Symbols が必要な場合は「+」→ Import Symbol → 名前で検索し追加

ベストプラクティス：不要ファイルは削除し、App Thinning によるサイズ最適化を確実に行う。

5️⃣ 実機テスト・デバッグ・App Store 提出までのフロー

✅ 結論

自動署名 と プロビジョニングプロファイル を正しく設定すれば、実機テストから App Store Connect へのアップロードまでシームレスに進められます。
2026 年版 App Store Review Guidelines（第 7.0 版） が定める主な審査ポイントは プライバシー情報の開示、iOS 17/18 機能の正しい実装、アクセシビリティです。

手順概要

フェーズ	主な作業
1. 開発者アカウント設定	Apple Developer Program（年会費 99 USD）に加入 → Xcode の Preferences > Accounts に Apple ID を登録
2. プロビジョニング	`Signing & Capabilities` で Automatically manage signing を有効化。必要に応じて手動で Development/Distribution プロファイルを作成
3. 実機テスト	デバイスの UDID を Apple ポータルへ登録 → Xcode から直接ビルド／実行 Instruments（Time Profiler、Memory Leak）と SwiftUI Inspector（Xcode 15 以降統合）でパフォーマンス測定
4. アーカイブ & 配布	`Product > Archive` → Organizer の Distribute App → App Store Connect → Upload（Release ビルド・iOS Distribution 証明書）
5. TestFlight	内部テスター（最大 100 デバイス）でベータ配布し、クラッシュレポートやフィードバックを取得
6. App Store Connect への最終提出	アプリ情報・スクリーンショット入力 → App Privacy Details に正確にデータ収集項目を記載審査チェックリスト（下部）をすべてクリア

2026 年版審査ガイドライン要点（公式ドキュメント参照）

項目	必要な対応
プライバシー情報	App Privacy Details に「データ収集の種類」「使用目的」を正確に記入
iOS 17/18 機能	Dynamic Island、Live Activities、WidgetKit などを利用する場合は、Info.plist に適切な権限（`UIBackgroundModes`, `NSUserTrackingUsageDescription` 等）を追加
アクセシビリティ	VoiceOver 用ラベル (`accessibilityLabel`)・Dynamic Type 対応 (`font(.title).dynamicTypeSize(... )`) を忘れずに実装
App Clip（必要な場合）	10 MB 以下に圧縮し、`appClip` ターゲットを正しく設定
コンテンツ制限	ユーザー生成コンテンツがある場合は、適切なレポート機能と年齢制限（`ageRating`）を実装

6️⃣ まとめと次のステップ

環境構築
macOS Monterey (12) 以上 → Xcode 15.4 をインストール
xcode-select --install で CLI ツールを有効化
プロジェクト作成
SwiftUI App テンプレート（iOS 17）で新規アプリ生成
ContentView と @State のサンプルで UI を体感
状態管理
ObservableObject / @Published + @StateObject でモデル層を構築
ナビゲーション & アセット
NavigationStack と NavigationLink による画面遷移
Asset Catalog へ画像・SF Symbols を登録し、解像度自動切替を活用
実機テスト & デバッグ
プロビジョニングは自動管理で完結
Instruments と SwiftUI Inspector で CPU/メモリ・再描画回数を測定
App Store 提出
Archive → App Store Connect アップロード → TestFlight ベータテスト
2026 年版ガイドライン（プライバシー、iOS 17/18 機能、アクセシビリティ）をすべてチェック

🚀 次に挑戦したいこと

Live Activities や Dynamic Island を組み込んだ通知体験
WidgetKit でホーム画面ウィジェットを作成し、App Clip と連携させる
多言語対応（Localization） と アクセシビリティテスト を自動化する CI パイプライン構築

これらのステップを順に実行すれば、SwiftUI で本格的な iPhone アプリ開発から公開までをスムーズに完了できます。ぜひ手元のプロジェクトで試してみてください！

スポンサードリンク