SwiftUIを学ぶ最初のステップとして、シンプルな「カウンターアプリ」を作るのがおすすめです。このアプリでは、ボタンをタップすると数値が増減するシンプルなUIを実装します。
Contents
- カウンターアプリのポイント
- カウンターアプリのコード
- 解説
- 1.
import SwiftUI - 2.
struct ContentView: View - 3.
@State private var count = 0 - 4.
var body: some View - 5.
VStack(spacing: 20) { ... } - 6.
Text("カウンター: \(count)") - 7.
Button(action: { count += 1 }) { Text("+") } - 8.
.frame(width: 80, height: 80) - 9.
.background(Color.blue.opacity(0.7)) - 10.
.foregroundColor(.white) - 11.
.clipShape(Circle()) - 12.
struct ContentView_Previews: PreviewProvider
- 1.
- まとめ
- 次に学ぶべきこと
カウンターアプリのポイント
- SwiftUIの基本構造を理解できる
@Stateの使い方を学べる（状態管理）ButtonやTextなどの基本的なViewを使う- レイアウトを
VStackで組む
カウンターアプリのコード
import SwiftUI
struct ContentView: View {
@State private var count = 0 // 状態変数
var body: some View {
VStack(spacing: 20) {
Text("カウンター: \(count)")
.font(.largeTitle)
.padding()
HStack {
Button(action: { count -= 1 }) {
Text("−")
.font(.largeTitle)
.frame(width: 80, height: 80)
.background(Color.red.opacity(0.7))
.foregroundColor(.white)
.clipShape(Circle())
}
Button(action: { count += 1 }) {
Text("+")
.font(.largeTitle)
.frame(width: 80, height: 80)
.background(Color.blue.opacity(0.7))
.foregroundColor(.white)
.clipShape(Circle())
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}解説
SwiftUIのコードの各用語について、初心者でもわかりやすいように解説します。
1. import SwiftUI
🔹 SwiftUIライブラリをインポート
SwiftUIを使うために必要なライブラリを読み込んでいます。UIKitのようにimport UIKitとするのと同じ役割です。
2. struct ContentView: View
🔹 画面（ビュー）を定義するための構造体
SwiftUIでは、画面のデザインやロジックをView プロトコルに準拠した struct で作ります。
struct ContentView: View {このコードは、「ContentView は View というルールに従うよ」と宣言しています。
3. @State private var count = 0
🔹 状態管理をするための変数 (@State)
@State private var count = 0@Stateは、SwiftUIで画面の変化をトラッキングするための特別な変数です。countを変更すると、SwiftUIが自動的に画面を再描画してくれます。privateを付けることで、このビューの中だけで使える変数になります。
4. var body: some View
🔹 画面の見た目を定義する
var body: some View {bodyはViewのルールとして必ず必要なプロパティsome Viewは「bodyには何かしらのViewが入るよ」という意味bodyの中にレイアウトやUI要素を記述する
5. VStack(spacing: 20) { ... }
🔹 縦に並べるレイアウト (VStack)
VStack(spacing: 20) {VStackは「縦に要素を並べる」レイアウトspacing: 20で要素間のスペースを20ポイントに設定
6. Text("カウンター: \(count)")
🔹 テキストを表示する (Text)
Text("カウンター: \(count)")Textは、文字を表示するためのSwiftUIのビュー"\(count)"は文字列補間でcountの値を埋め込んでいる.font(.largeTitle)で文字の大きさを変更
7. Button(action: { count += 1 }) { Text("+") }
🔹 ボタンの作成 (Button)
Button(action: { count += 1 }) {
Text("+")
}Buttonは押すと何かの処理を実行するUI要素action: { count += 1 }の部分で「ボタンを押したらcountを1増やす」という処理を記述{ Text("+") }の部分で、ボタンの見た目を定義
8. .frame(width: 80, height: 80)
🔹 大きさを指定 (frame)
.frame(width: 80, height: 80)- 幅80、高さ80のサイズに指定
Textだけだと小さいので、これでボタンの大きさを調整
9. .background(Color.blue.opacity(0.7))
🔹 背景色をつける (background)
.background(Color.blue.opacity(0.7))- 背景色を青 (
Color.blue) にする .opacity(0.7)で透明度70%に設定
10. .foregroundColor(.white)
🔹 文字色を指定 (foregroundColor)
.foregroundColor(.white)- ボタン内の
Textの色を白 (.white) に設定
11. .clipShape(Circle())
🔹 形を丸くする (clipShape)
.clipShape(Circle())Circle()を使って、ボタンを円形にクリップ（切り取る）
12. struct ContentView_Previews: PreviewProvider
🔹 プレビュー用のコード (PreviewProvider)
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}PreviewProviderは Xcode のプレビュー機能 を提供する仕組み- これがあると、Xcodeのプレビュー画面で
ContentViewをすぐに確認できる
まとめ
| 用語 | 説明 |
|---|---|
import SwiftUI | SwiftUIライブラリをインポート |
struct ContentView: View | 画面を表す View を作る |
@State private var count = 0 | 状態管理のための変数 |
var body: some View | 画面のデザインを定義 |
VStack(spacing: 20) {} | 縦に並べるレイアウト |
Text("カウンター: \(count)") | テキストを表示 |
Button(action: { count += 1 }) {} | ボタンを作成 |
.frame(width: 80, height: 80) | ボタンの大きさを指定 |
.background(Color.blue.opacity(0.7)) | 背景色を指定 |
.foregroundColor(.white) | 文字色を指定 |
.clipShape(Circle()) | ボタンを丸くする |
struct ContentView_Previews: PreviewProvider | Xcodeのプレビュー用 |
この基本を理解すれば、SwiftUIの基本的なアプリは作れるようになります！
次はこのカウンターアプリを改造して、リセットボタンを追加したり、アニメーションを加えたりするともっと理解が深まりますよ💡
次に学ぶべきこと
このアプリが作れたら、次は以下の機能を追加するとより理解が深まります：
✅ @State から @ObservedObject に変更してみる
✅ リセットボタンを追加する
✅ アニメーションを加えてみる
試しに自分で改造しながら学ぶのが大切！まずはこのカウンターアプリを作ってみよう💡
