最終更新:
Swift入門：SwiftUIで「押すと増える」最初のiOS画面を作ろう
🐤 SwiftUIで、押した数を表示
🎚 難易度 ★☆☆ 初心者向け
⏱ 学習時間の目安 読むだけ10分程度。練習時間は環境で変わります。
📚 前提知識 iOSアプリの練習には、対応するmacOSのMac・Xcode・iOSシミュレータ
✅ このガイドで学べること
- 身近な課題で役割を説明できる
- 最初の操作と確認方法がわかる
ひよこ SwiftでiPhoneのアプリを作ってみたい！
ひよこ Windowsでもできるの？
ペンギン先生 ひよこ Macなら何を入れる？
ひよこ Swiftの文法は何から覚える？
ペンギン先生 変えない値はlet、変更する値はvarだよ。まず文字や数字を表示してみよう。「値がないこともある」型はOptionalと呼ばれるけれど、カウンターでは整数から始められるよ。
ひよこ 画面はどう書くの？
ペンギン先生 SwiftUIのTextで文字、Buttonでボタン、VStackで縦並びを作るよ。ContentViewの中に組み合わせて、「0」と「1増やす」を表示してみよう。
ひよこ 数字を変えたら画面も変わる？
ペンギン先生 この例では@Stateで数を保持するよ。ボタンの処理で値を増やすと、その値を使う表示も更新されるんだ。画面のたびに0へ作り直す変数とは違うよ。
ひよこ App Storeへ出すのも同じ手順？
ペンギン先生 シミュレータで試すことと、実機の署名やストアへ提出することは別だよ。まず0→1→2を確かめよう。配布するときは、その時点のAppleの契約・署名・審査条件を確認するんだ。
ひよこ 覚え方を教えて！
最初のゴール：0→1→2になる画面
この記事は、MacのXcodeでiOSのカウンターを作る入口です。Swift言語そのものはWindowsやLinuxにも対応しています。言語を学ぶだけならMacが必須、という意味ではありません。
準備するもの
- Xcodeの対応要件を満たすMacとmacOS。
- Xcodeと、実行先に選ぶiOSシミュレータのランタイム。
- アプリを保存する自分用の作業フォルダ。
Xcodeの必要容量や対応OSは更新されます。固定の容量や古いOS名を頼りにせず、公式の要件表とダウンロード案内を確認してください。
ContentViewを小さく書き換える
Xcodeで新しいiOSのAppプロジェクトを作ります。言語はSwift、画面の方式はSwiftUIを選びます。生成されたContentView.swiftの内容を、次のようにします。プロジェクトのApp側のファイルは、そのまま使います。
import SwiftUI
struct ContentView: View {
@State private var count = 0
var body: some View {
VStack(spacing: 20) {
Text("押した回数：\(count)")
.font(.title)
Button("1増やす") {
count += 1
}
}
.padding()
}
}実行先にiPhoneのシミュレータを選び、Runを実行します。「押した回数：0」が出て、ボタンを2回押すと「押した回数：2」になれば成功です。実機の署名設定へ進む前に、ここを確認しましょう。
コードを読む3つの手掛かり
VStackは部品の縦並び。TextとButtonをまとめています。@State private var countは、この画面が持つ数です。値を変えると、その値を読む表示に変更が反映されます。Buttonの後の{ ... }が、押したときに実行する処理です。ここでは1を足します。
.padding()は周りに余白を付けます。まずは数字を追い、次に余白や文字サイズを変えると、コードと見た目の関係をつかみやすくなります。
Swiftの基本：変数とOptional
let shopName = "ひよこカフェ"
var visitCount = 0
visitCount += 1
print(shopName, visitCount)
let seats = Int("12")
if let availableSeats = seats {
print("席数：", availableSeats)
} else {
print("数字として読めません")
}letは代入後に変更しない値、varは変更できる値です。文字列を整数にできない場合もあるので、Int("12")の結果はOptionalになります。if letで値がある場合を取り出すと、無理に存在を決めつけず扱えます。この文法例は、アプリの別の処理として読むか、Swiftを実行できる学習環境で試してください。
うまく動かないとき
- 実行先が選べない：必要なシミュレータのランタイムと、Xcode・macOSの対応を確認します。
- ContentViewが二重になる：同名の型を別ファイルへ追加せず、生成されたファイルを置き換えたか確認します。
- アプリを終了すると0に戻る：この例の状態は永続保存していません。起動をまたいで残すには、別の保存方法が必要です。
次に学ぶなら
別の作り方と比べるならFlutter入門、アプリとサーバーのやり取りへ進むならAPI開発入門がつながります。
参考資料
- Swift：Windowsへのインストール — Windowsの言語環境と実行
- Swift：The Basics — let・var・Optional・if let
- Apple：Xcodeの対応要件 — macOS・SDK・シミュレータの対応
- Apple：SwiftUI State — 画面の状態と変更の反映