2026年版 SwiftUI 入門ハンズオン：Xcode 15でカウンター＆リストアプリを作成

2026年4月20日

お得なお知らせ

スポンサードリンク

AI時代のキャリア構築

プログラミング学習、今日から動き出す

「何から始めるか」で止まっている人こそ、無料説明会や本で自分に合うルートを30分で確定できます。

Enjoy Tech!｜月額制でWeb系に強い▶ (Kindle本)ＩＴエンジニアの転職学｜後悔しないキャリア戦略▶

▶ AIコーディング環境なら実践Claude Code入門（Amazon）が実務で即使える入門書です。Amazonベストセラーにも選ばれていますよ。

Contents

1 1. 本ハンズオンのゴール
2 2. SwiftUI の現在の位置づけ
3 3. Xcode 15 のインストールと Canvas 活用
4 4. ハンズオン ― カウンター＆記事リストの実装
- 4.1 4‑1. カウンターアプリ（約 15 行）
- 4.2 4‑2. 記事リストアプリ（非同期画像付き）
5 5. Apple エコシステムを活かす開発フロー
- 5.1 学習ステップ例
6 6. デバッグテクニックと次のアクション
7 7. まとめ

スポンサードリンク

1. 本ハンズオンのゴール

SwiftUI の基本構造を理解し、実際に動くアプリを作る
Xcode 15 系列で提供されている Canvas・Live Preview を使いこなす
Apple が推奨する開発フロー（Developer Program → TestFlight → App Store Connect）を体験できる

2. SwiftUI の現在の位置づけ

項目	iOS 17 / macOS 14 の標準機能
宣言的 UI	`View` プロトコルに従い、状態が変化すると自動で再描画
レイアウト	従来の `VStack` / `HStack` に加え、iOS 17 からは `Layout` プロトコルを拡張したカスタムレイアウトが利用可能
画像取得	標準実装の `AsyncImage` がキャッシュとプレースホルダーに対応（iOS 17.0 以降）
状態管理	`@State`, `@Binding`, `@ObservedObject`, `@StateObject` に加えて、スレッド安全を保証する `@MainActor` が推奨されている

ポイント
SwiftUI は毎年微調整が行われますが、上記の API はすべて Xcode 15.0 以降で安定して利用できます。公式ドキュメント（SwiftUI – Apple Developer）を随時確認しましょう。

3. Xcode 15 のインストールと Canvas 活用

3‑1. インストール手順

# Mac App Store から最新版の Xcode を取得（執筆時点は 15.2）
open -a &quot;App Store&quot; &amp;&amp; echo &quot;検索欄に \&quot;Xcode\&quot; と入力してインストール&quot;

# コマンドラインツールを有効化
xcode-select --install

# Mac App Store から最新版の Xcode を取得（執筆時点は 15.2）

open -a "App Store" && echo "検索欄に \"Xcode\" と入力してインストール"

# コマンドラインツールを有効化

xcode-select --install

補足
Apple Developer Program に加入済みであれば、Apple Developer サイトからベータ版も取得できます。安定版だけで十分な場合は App Store 推奨です。

3‑2. プロジェクト作成

File → New → Project
「App」テンプレートを選択
Interface: SwiftUI, Life Cycle: SwiftUI App, Language: Swift を指定

ヒント：Xcode のウィザードは iOS 17 / macOS 14 用のビルド設定（iOS Deployment Target 17.0、macOS Deployment Target 14.0）を自動で付与します。

3‑3. Canvas と Live Preview

エディタ上部にある Resume ボタン → プレビュー開始
Live Preview（右上のシンボル）をオンにすると、コード変更がリアルタイムで iPhone 15 Pro や Mac (Apple Silicon) の画面に反映されます。

実務的活用例：デザイン案をクライアントと共有したいときは、Canvas の「Open in Simulator」からシミュレータへ即座に切り替えて動作確認が可能です。

4. ハンズオン ― カウンター＆記事リストの実装

4‑1. カウンターアプリ（約 15 行）

import SwiftUI

struct CounterView: View {
    @State private var count = 0

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

            Button(action: { count += 1 }) {
                Text(&quot;+1&quot;)
                    .frame(minWidth: 80, minHeight: 44)
                    .background(Color.accentColor.opacity(0.15))
                    .cornerRadius(8)
            }
        }
        .padding()
    }
}

import SwiftUI

struct CounterView: View {

@State private var count = 0

var body: some View {

VStack(spacing: 24) {

Text("カウント: \(count)")

.font(.title2)

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

Text("+1")

.frame(minWidth: 80, minHeight: 44)

.background(Color.accentColor.opacity(0.15))

.cornerRadius(8)

}

.padding()

}

@State が更新されるたびにビュー全体が再描画されます。
Canvas の Live Preview でボタンをクリックすれば、カウント増加が即座に確認できます。

4‑2. 記事リストアプリ（非同期画像付き）

データモデルとサンプルデータ

import SwiftUI

struct Article: Identifiable {
    let id = UUID()
    let title: String
    let imageURL: URL
}

// Apple が提供するサンプル画像を使用（実際のアプリでは自前の API に差し替え）
let sampleArticles = [
    Article(title: &quot;SwiftUI の新機能まとめ&quot;,
            imageURL: URL(string: &quot;https://developer.apple.com/assets/elements/icons/swiftui.svg&quot;)!),
    Article(title: &quot;AsyncImage で画像を楽々取得&quot;,
            imageURL: URL(string: &quot;https://developer.apple.com/assets/elements/icons/xcode.svg&quot;)!)
]

import SwiftUI

struct Article: Identifiable {

let id = UUID()

let title: String

let imageURL: URL

}

// Apple が提供するサンプル画像を使用（実際のアプリでは自前の API に差し替え）

let sampleArticles = [

Article(title: "SwiftUI の新機能まとめ",

imageURL: URL(string: "https://developer.apple.com/assets/elements/icons/swiftui.svg")!),

Article(title: "AsyncImage で画像を楽々取得",

imageURL: URL(string: "https://developer.apple.com/assets/elements/icons/xcode.svg")!)

]

ビュー・ロジック

@MainActor
final class ArticleStore: ObservableObject {
    @Published var articles: [Article] = []

    func loadSample() {
        // 本番では URLSession で API 呼び出しに置き換える
        articles = sampleArticles
    }
}

@MainActor

final class ArticleStore: ObservableObject {

@Published var articles: [Article] = []

func loadSample() {

// 本番では URLSession で API 呼び出しに置き換える

articles = sampleArticles

}

UI（List + AsyncImage）

struct ArticleListView: View {
    @StateObject private var store = ArticleStore()

    var body: some View {
        NavigationStack {
            List(store.articles) { article in
                HStack(spacing: 12) {
                    AsyncImage(url: article.imageURL,
                               transaction: Transaction(animation: .easeInOut),
                               cachePolicy: .returnCacheDataElseLoad) { phase in
                        switch phase {
                        case .empty:
                            ProgressView()
                                .frame(width: 60, height: 60)
                        case .success(let img):
                            img.resizable()
                               .scaledToFill()
                               .frame(width: 60, height: 60)
                               .clipped()
                        case .failure:
                            Image(systemName: &quot;photo&quot;)
                                .foregroundColor(.secondary)
                                .frame(width: 60, height: 60)
                        @unknown default:
                            EmptyView()
                        }
                    }

                    Text(article.title)
                        .font(.body)
                }
                .padding(.vertical, 4)
            }
            .navigationTitle(&quot;記事一覧&quot;)
        }
        .onAppear { store.loadSample() }
    }
}

struct ArticleListView: View {

@StateObject private var store = ArticleStore()

var body: some View {

NavigationStack {

List(store.articles) { article in

HStack(spacing: 12) {

AsyncImage(url: article.imageURL,

transaction: Transaction(animation: .easeInOut),

cachePolicy: .returnCacheDataElseLoad) { phase in

switch phase {

case .empty:

ProgressView()

.frame(width: 60, height: 60)

case .success(let img):

img.resizable()

.scaledToFill()

.frame(width: 60, height: 60)

.clipped()

case .failure:

Image(systemName: "photo")

.foregroundColor(.secondary)

.frame(width: 60, height: 60)

@unknown default:

EmptyView()

}

Text(article.title)

.font(.body)

}

.padding(.vertical, 4)

}

.navigationTitle("記事一覧")

}

.onAppear { store.loadSample() }

}

AsyncImage の transaction と cachePolicy を明示すると、画像読込完了時のフェードインとオフライン表示が自動化されます。
@MainActor が付与された ArticleStore は UI スレッドで安全に状態更新できます。

5. Apple エコシステムを活かす開発フロー

フェーズ	推奨ツール・サービス
コード管理	Git（GitHub または Bitbucket）＋ Xcode の Source Control
ビルド＆テスト	Xcode の自動テスト、TestFlight でベータ配布
デプロイ	App Store Connect → アプリ審査・リリース
学習サポート	Swift Playgrounds（iPad）でコードを手軽に試す Apple Developer Forums で質問・情報収集

学習ステップ例

公式チュートリアル – Apple の「Start Developing iOS Apps」ページで基礎概念を固める。
ハンズオン実装 – 本記事のカウンターとリストサンプルを自分のプロジェクトに組み込む。
テストフロー体験 – Xcode から TestFlight ビルドを作成し、社内デバイスで動作確認する。
公開準備 – App Store Connect にメタ情報・スクリーンショット（Apple が提供する SF Symbols を活用）を登録し、審査申請まで進める。

6. デバッグテクニックと次のアクション

6‑1. Canvas 上でブレークポイント

プレビュー中の任意行左側をクリック → 赤丸が表示。
実行時にその行に到達すると、Xcode が自動的に停止し Variables View から状態を確認できます。

6‑2. Simulator と Live Preview の同期

Canvas 右上の Open in Simulator をクリック → 同期されたシミュレータが起動。
UI が変わるたびにシミュレータもリアルタイムで更新され、デバイス実機感覚で確認可能。

6‑3. コンソール活用例

struct DebugCounterView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text(&quot;Count: \(count)&quot;)
                .onAppear { print(&quot;[Debug] CounterView appeared&quot;) }

            Button(&quot;＋1&quot;) { 
                count += 1 
                print(&quot;[Debug] count incremented → \(count)&quot;) 
            }
        }
    }
}

struct DebugCounterView: View {

@State private var count = 0

var body: some View {

VStack {

Text("Count: \(count)")

.onAppear { print("[Debug] CounterView appeared") }

Button("＋1") {

count += 1

print("[Debug] count incremented → \(count)")

}

print 出力は Canvas の Debug console と Simulator のコンソールの両方に表示されます。

7. まとめ

SwiftUI は iOS 17 / macOS 14 でも十分に実用的 な宣言型フレームワークです。
Xcode 15 系列の Canvas と Live Preview を活用すれば、コードを書いた瞬間に UI が確認でき、学習スピードが格段に上がります。
Apple の公式ツール（TestFlight・App Store Connect） に沿ったフローを体験することで、実務でも通用する開発サイクルが身につきます。

次のステップは、この記事で作成したプロジェクトを GitHub に公開し、TestFlight でベータテストに挑戦してみましょう。実際にユーザーのフィードバックを得ることで、SwiftUI の理解がさらに深まります。 🚀

スポンサードリンク

お得なお知らせ

スポンサードリンク

AI時代のキャリア構築

プログラミング学習、今日から動き出す

「何から始めるか」で止まっている人こそ、無料説明会や本で自分に合うルートを30分で確定できます。

Enjoy Tech!｜月額制でWeb系に強い▶ (Kindle本)ＩＴエンジニアの転職学｜後悔しないキャリア戦略▶

▶ AIコーディング環境なら実践Claude Code入門（Amazon）が実務で即使える入門書です。Amazonベストセラーにも選ばれていますよ。

-Swift

comment コメントをキャンセル

: Swift

Swift学習教材比較とおすすめベスト3 – サンプルコード・図解・日本語表現で選ぶ

教材選定基準はサンプルコード・図解・日本語表現の3点で比較し、初心者が手を動かしやすい教材を選ぶことが重要です。

: Swift

スズキ・スイフト新色フロンティアブルー2026の全情報発売日・カラーコード・予約方法まで

スズキ・スイフトに2026年春登場する新色『フロンティアブルーパールメタリック』のカラーコードや発売日、予約方法、価格情報をまとめました。

: Swift

MT廃止とISO20022完全シフト2025‑2026年移行ガイド

本稿では、SWIFTのMTフォーマット廃止とISO20022への完全移行スケジュール、システム変換手順、トレジャリー画面改修ポイント、さらなるCBDC連携までを網羅的に紹介します。

: Swift

Swift 5.9 と Kotlin 1.9 徹底比較：最新機能・IDE・非同期処理のポイント

Swift 5.9 と Kotlin 1.9 の最新機能やIDE・ビルドチェーン、型安全性、非同期処理のパフォーマンスを比較し、選定の指標を提示します。

: Swift

2026年版Swift学習ロードマップ：初心者から実務レベルへ

本ロードマップは、Swift未経験者から最新のSwift 6とSwiftUIを活用した実務レベルへ段階的に学習できる教材・コースを厳選し、具体的なミニアプリ例とともに提示します。

MCPとA2Aの概要・取得方法と2026年最新認証機能

2026年Instagramアルゴリズム変更5大ポイントと実践最適化ガイド

2026年版 SwiftUI 入門ハンズオン：Xcode 15でカウンター＆リストアプリを作成

1. 本ハンズオンのゴール

2. SwiftUI の現在の位置づけ

3. Xcode 15 のインストールと Canvas 活用

3‑1. インストール手順

3‑2. プロジェクト作成

3‑3. Canvas と Live Preview

4. ハンズオン ― カウンター＆記事リストの実装

4‑1. カウンターアプリ（約 15 行）

4‑2. 記事リストアプリ（非同期画像付き）

データモデルとサンプルデータ

ビュー・ロジック

UI（List + AsyncImage）

5. Apple エコシステムを活かす開発フロー

学習ステップ例

6. デバッグテクニックと次のアクション

6‑1. Canvas 上でブレークポイント

6‑2. Simulator と Live Preview の同期

6‑3. コンソール活用例

7. まとめ

2026年版 SwiftUI 入門ハンズオン：Xcode 15でカウンター＆リストアプリを作成

3. Xcode 15 のインストールと Canvas 活用