.monospacedDigit() は、SwiftUIで数字を表示するときに「桁数によって文字の幅がズレないようにしたい」場合にとても便利なモディファイアです。
例えば、カウントアップのように数字が変わるUIでは、文字幅が変わると全体のレイアウトがガタついて見えてしまいます。
そんな時に .monospacedDigit() を使うと、数字だけを固定幅で表示してくれて、見た目が安定します。
この記事では、.monospacedDigit() の基本的な使い方から、注意点やおすすめの活用シーンまでわかりやすく解説します。
.monospacedDigit() とは？
.monospacedDigit() は SwiftUI の Text ビューなどに使えるモディファイアで、「数字だけを等幅フォント（モノスペース）で表示する」効果を与えます。
普通に Text("123") と書いた場合、数字ごとに文字幅が微妙に異なるフォントが使われることがあります。
これがUIのズレにつながる原因になります。
.monospacedDigit() を使うと、数字部分だけがすべて同じ幅で表示されるため、桁数が変わっても文字の位置が安定します。
具体例：数字を固定幅で表示する
具体例で確認しましょう。
.monospacedDigit()をつける場合と付けない場合でどのように変わるかを比較した例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import SwiftUI struct ContentView: View { @State private var count = 0 var body: some View { VStack(spacing: 20) { Text("指定なし：\(count)") .font(.system(size: 40)) Text("指定あり：\(count)") .font(.system(size: 40)) .monospacedDigit() Button("カウントアップ") { count += 1 } } .padding() } } |
この例では .font(.system(size: 40)) で大きめのフォントを指定し、指定ありの方には.monospacedDigit() をつけて数字部分だけを等幅にしています。
上記のように、.monospacedDigit() をつけた方が、数字が変わっても数字の幅が変わらず、安定していますよね！？
これが.monospacedDigit()の効果です。
フォント全体をモノスペースにする方法(.monospaced())との違い
SwiftUIには .monospaced() というモディファイアもありますが、これは「すべての文字をモノスペースフォントに変える」ものです。
| モディファイア名 | 対象 | 特徴 |
|---|---|---|
.monospacedDigit() |
数字だけ | 数字だけを固定幅で表示する |
.monospaced() |
すべての文字 | 全体を固定幅フォントに変更する |
テキストに英語や日本語の文字が含まれていても、数字だけを固定幅にしたい場合は .monospacedDigit() のほうが自然です。
.monospacedDigit() を使うべきシーン
このモディファイアは以下のような場面で効果的です。
- タイマー表示（
00:01 → 00:02のような変化でズレないように） - ストップウォッチや残り時間のカウントダウン
- デジタル風の数値表示（ゲームやデータ表示）
- 金額やカウントの表示（例：¥1,000 → ¥2,000）
数字の桁数が変わったときにUIがブレて見づらくなるのを防ぐのに役立ちます。
まとめ
今回は「数字だけを等幅フォント（モノスペース）で表示する」効果を与えてくれる.monospacedDigit()を紹介しました！
.monospacedDigit()は数字だけを等幅で表示するモディファイア- カウントや時間表示、金額などに最適
- フォント全体をモノスペースにしたい場合は
.monospaced()を使う
.monospacedDigit()を使えば、UIのブレが気になる場面で簡単に安定感を出せます。
タイマーやストップウォッチ機能などでは非常に役立つモディファイアなので、是非活用してくださいね！
