SwiftUIで「進捗」や「数値の割合」を視覚的に表現したいときに便利なのが Gauge です。
バッテリー残量、ダウンロード進捗、運動量、温度など、「値の範囲内でどの位置にあるか」を表示したいUIによく使われます。
この記事では Gauge の基本的な意味や使い方、活用シーン、注意点まで、初心者でもわかりやすいよう丁寧に解説します。
Gauge とは？
Gauge は SwiftUI における専用ビューの1つで、数値データを視覚的に示す棒グラフやメーターのようなコンポーネントです。
例えば、0〜100の範囲で現在の数値が「どのあたりか」を表示したいときに使えます。
UIKitで同様のUIを作るには UIProgressView やカスタムビューが必要でしたが、SwiftUIでは Gauge を使うだけで簡単に同様のUIが作成できます。
基本的な使い方
最もシンプルな Gauge の使い方は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import SwiftUI struct ContentView: View { @State private var value: Double = 50 var body: some View { Gauge(value: value, in: 0...100) { Text("進捗") } } } |
このコードでは、0〜100の範囲内で、現在の値（value）がどの位置にあるかを表示します。
Gauge は基本的に「現在値（value）」と「範囲（in: ～）」を指定するだけで表示ができるシンプルなUIです。
主要な引数とその意味
Gauge はカスタマイズ可能な引数を複数持っており、見た目や表示内容を柔軟に調整できます。
主な引数の役割は以下の通りです。
| 引数・要素 | 型／説明 |
|---|---|
value |
Double／現在の値を指定 |
in: |
Range／値の範囲を指定（例：0...100） |
label |
ViewBuilder／Gaugeのタイトルや説明テキストを定義 |
currentValueLabel |
ViewBuilder／現在の数値を表示（例：「50%」） |
minimumValueLabel |
ViewBuilder／最小値のラベル（例：「0」） |
maximumValueLabel |
ViewBuilder／最大値のラベル（例：「100」） |
style（modifier） |
GaugeStyle／見た目のスタイル（例：.accessoryLinear） |
具体例：数値付きのゲージ表示
以下のコードでは、最小値・最大値・現在値のラベルも追加した Gauge を表示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import SwiftUI struct ContentView: View { @State private var progress = 30.0 var body: some View { VStack { Gauge(value: progress, in: 0...100) { Text("バッテリー残量") } currentValueLabel: { Text("\(Int(progress))%") } minimumValueLabel: { Text("0%") } maximumValueLabel: { Text("100%") } Slider(value: $progress, in: 0...100) .padding() } } } |
このように Gauge は他の UI（この例では Slider）と組み合わせることで、インタラクティブな進捗表示が可能になります。
この例では下部のSliderを動かすことで進捗バーを自分で動かすことができます。
また、見た目を変える .gaugeStyle() モディファイアを使えば、デザインに応じたスタイル変更もできます。
Gauge のスタイル例
SwiftUI では以下のような GaugeStyle を指定できます（一部は watchOS 向けです）。
|
1 2 3 4 |
.gaugeStyle(.accessoryLinear) // 横長の棒グラフ型（iOS向け） .gaugeStyle(.accessoryCircular) // 円形ゲージ（watchOS向け） .gaugeStyle(.linearCapacity) // バッテリー風の棒グラフ（iOS向け） |
たとえば、下記のように書けば円形のゲージになります（watchOS推奨）：
|
1 2 3 4 5 |
Gauge(value: 0.7) { Text("運動量") } .gaugeStyle(.accessoryCircular) |
ただし、iOSアプリの場合は .accessoryLinear や .linearCapacity を使うと見た目が安定するので、こちらをおすすめします。
活用シーン
Gauge は特に以下のようなシーンで便利です：
- ユーザーの進捗表示（例：目標達成率、習得度、学習進捗）
- 端末情報の表示（例：バッテリー残量、ストレージ使用量）
- ヘルスケア系（例：心拍数、歩数、運動時間）
- スライダーや数値入力と組み合わせたビジュアルフィードバック
- IoT機器のデータ表示（例：温度、湿度、電力消費量）
値の変化を一目でわかりやすく伝えるためのUIとして、Gauge は非常に有効です。
初心者にもやさしく、SwiftUIのスタイルに沿った形で実装できるのが特徴です。
使用時の注意点
Gauge はとても便利なUIコンポーネントですが、値の範囲指定やスタイルの選び方によって挙動や見た目が大きく変わるため注意が必要です。
valueとin:の範囲指定に注意
実際の数値が範囲外にあるとゲージが正しく描画されず、期待通りのUIになりません。必ずvalueがin:の範囲内に収まるように制御する必要があります。- スタイルの互換性に注意
GaugeStyleの一部は watchOS 専用です。iOSで使用すると表示されなかったりデザインが崩れることがあります。iOS向けには.accessoryLinearや.linearCapacityを選ぶのがおすすめです。 - ラベルをつけて意味を補足する
ゲージは棒や円で進捗を示すだけなので、ラベルを付けないと「何を示しているゲージなのか」がユーザーに伝わりにくいです。 - 用途に合ったデータに使う
Gaugeは連続的に変化する数値（進捗や割合など）を表すのに向いています。段階評価やカテゴリ分けのように「離散的な値」を扱いたい場合は別のUI（例えばProgressViewやアイコン表示）を検討しましょう！
こうしたポイントを理解しておけば、Gauge をより直感的でわかりやすいUIとしてアプリに取り入れることができます。
まとめ
今回は SwiftUI の Gauge について詳しく紹介しました。
Gaugeは数値の割合や進捗を視覚的に表示するための Viewvalue、in:で範囲と値を指定し、必要に応じてラベル表示を追加.gaugeStyle()を使うことで見た目の調整も可能- iOS・watchOS 両方に対応（スタイルには要注意）
- 学習アプリ、健康管理、バッテリー表示など幅広く使える
SwiftUIで進捗を表示したいときには、Gauge を使うことで見やすくて親しみやすいUIを簡単に実装できます。
ぜひ自分のアプリに取り入れて、ユーザーに直感的な情報提示をしてみてください。
