SwiftUIで数値の増減を簡単に実装したいと思ったことはありませんか？
この記事では、SwiftUIのStepperについて、基本的な使い方から実践的なカスタマイズ方法まで、初心者の方にもわかりやすく解説します。
この記事でわかること
- Stepperの基本的な使い方
- 範囲指定やステップ幅の設定方法
- 実践的なカスタマイズ例
- onIncrement/onDecrementを使った高度な制御方法
目次
Stepperとは？
Stepperは、SwiftUIで提供される数値を増減させるためのUIコンポーネントです。
「+」と「-」のボタンが横並びで表示され、ユーザーがタップすることで値を段階的に変更できます。
設定画面や数量選択など、数値入力が必要な場面で非常に便利です。
Stepperの基本的な使い方
まずは最もシンプルな実装例を見てみましょう。
import SwiftUI
struct ContentView: View {
@State private var count = 0
var body: some View {
VStack {
Text("カウント: \(count)")
.font(.title)
Stepper("値を変更", value: $count)
}
.padding()
}
}
ポイント
@Stateで状態を管理する変数を用意value:パラメータに$countのようにバインディングで渡す- Stepperの第一引数はラベルテキスト
このコードを実行すると、「+」ボタンで値が増加し、「-」ボタンで値が減少します。
範囲を指定する方法
数値の最小値と最大値を設定したい場合は、in:パラメータを使用します。
struct ContentView: View {
@State private var age = 20
var body: some View {
VStack(spacing: 20) {
Text("年齢: \(age)歳")
.font(.title)
Stepper("年齢を選択", value: $age, in: 0...120)
}
.padding()
}
}
範囲指定のメリット
- 不正な値の入力を防げる
- ユーザーエクスペリエンスの向上
- バリデーション処理が不要
この例では、0歳から120歳までの範囲に制限されます。
ステップ幅を変更する方法
1回のタップでどれだけ値を変更するかは、step:パラメータで指定できます。
struct ContentView: View {
@State private var price = 0
var body: some View {
VStack(spacing: 20) {
Text("価格: ¥\(price)")
.font(.title)
Stepper(
"価格を設定",
value: $price,
in: 0...10000,
step: 100
)
}
.padding()
}
}
この例では、1回のタップで100円ずつ増減します。
ステップ幅が活用できる場面
- 価格設定（100円単位、1000円単位など）
- 時間設定（5分単位、15分単位など）
- 温度調整（0.5度単位など）
小数点を扱う実装例
Stepperは整数だけでなく、小数点を含む数値も扱えます。
struct ContentView: View {
@State private var temperature = 20.0
var body: some View {
VStack(spacing: 20) {
Text("温度: \(temperature, specifier: "%.1f")°C")
.font(.title)
Stepper(
"温度調整",
value: $temperature,
in: 15.0...30.0,
step: 0.5
)
Text("快適な室温に設定してください")
.font(.caption)
.foregroundColor(.gray)
}
.padding()
}
}
ポイント
Double型の変数を使用specifier: "%.1f"で小数点第1位まで表示step: 0.5で0.5度ずつ変更
onIncrement/onDecrementで細かく制御する
より高度な制御が必要な場合は、クロージャを使った方法があります。
struct ContentView: View {
@State private var count = 0
@State private var message = ""
var body: some View {
VStack(spacing: 20) {
Text("カウント: \(count)")
.font(.title)
Text(message)
.foregroundColor(.blue)
Stepper("カウンター") {
// 増加時の処理
count += 1
message = "値が増加しました！"
print("増加: \(count)")
} onDecrement: {
// 減少時の処理
count -= 1
message = "値が減少しました！"
print("減少: \(count)")
}
}
.padding()
}
}
この方法のメリット
- 増減時に独自の処理を追加できる
- ログ出力やアナリティクス送信が可能
- UIフィードバックを細かく制御できる
実践的な活用例：商品注文画面
実際のアプリで使えそうな例を見てみましょう。
struct ProductOrderView: View {
@State private var quantity = 1
var unitPrice = 1200
var totalPrice: Int {
quantity * unitPrice
}
var body: some View {
VStack(spacing: 25) {
Text("商品注文")
.font(.largeTitle)
.bold()
VStack(alignment: .leading, spacing: 15) {
HStack {
Text("単価:")
Spacer()
Text("¥\(unitPrice)")
.bold()
}
HStack {
Text("数量:")
Spacer()
Stepper(
"\(quantity)個",
value: $quantity,
in: 1...99
)
}
Divider()
HStack {
Text("合計:")
.font(.title2)
Spacer()
Text("¥\(totalPrice)")
.font(.title)
.bold()
.foregroundColor(.blue)
}
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
Button("注文する") {
// 注文処理
}
.buttonStyle(.borderedProminent)
}
.padding()
}
}
Stepperのデザインカスタマイズ
Stepperの見た目をカスタマイズする方法もあります。
struct ContentView: View {
@State private var volume = 50
var body: some View {
VStack(spacing: 20) {
Text("音量: \(volume)%")
.font(.title)
Stepper(
value: $volume,
in: 0...100,
step: 5
) {
HStack {
Image(systemName: "speaker.wave.2.fill")
Text("音量調整")
.font(.headline)
}
}
.padding()
.background(Color.blue.opacity(0.1))
.cornerRadius(10)
}
.padding()
}
}
カスタマイズのポイント
- ラベル部分にカスタムビューを配置できる
- アイコンやスタイルを自由に設定可能
- 背景色や角丸などで見た目を調整
よくある質問（FAQ）
Q1. Stepperで初期値を設定するには？
@State変数の初期値を設定するだけです。
@State private var count = 10 // 初期値10
Q2. マイナスの値も扱える？
はい、範囲指定で負の値を含めることができます。
Stepper("温度", value: $temp, in: -10...40)
Q3. ボタンの無効化はできる？
.disabled()モディファイアを使用します。
Stepper("カウント", value: $count)
.disabled(isProcessing)
まとめ
この記事では、SwiftUIのStepperについて以下の内容を解説しました。
- Stepperの基本的な使い方と構文
- 範囲指定とステップ幅の設定方法
- 小数点を含む数値の扱い方
- onIncrement/onDecrementを使った高度な制御
- 実践的な活用例とカスタマイズ方法
Stepperは非常にシンプルながら、数値入力が必要な場面で大活躍するコンポーネントです。
ぜひ自分のアプリに取り入れて、ユーザーフレンドリーなUIを実現してください！
