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

2026年5月9日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

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） に沿ったフローを体験することで、実務でも通用する開発サイクルが身につきます。