SwiftUIで定期的にビューの内容を更新したいときに便利なのが TimelineView です。
時計やカウントダウンタイマー、株価表示、天気アプリのように「時間経過に応じて自動で表示を更新したい」場面で活用できます。
この記事では TimelineView の基本的な意味や使い方、引数の意味、活用シーン、注意点までを、初心者にもわかりやすく丁寧に解説します。
TimelineView とは？
TimelineView は、SwiftUIに用意された特殊な View で、「時間に基づいて自動的にビューを再描画する仕組み」を提供してくれます。
通常の View は明示的な状態更新（@Stateの変更など）によって再描画されますが、TimelineView は一定の時間間隔で自動的に更新されるため、ユーザー操作なしで時間ベースの更新が可能です。
例えば、以下のようなリアルタイム時計を作るのに適しています。
|
1 2 3 4 5 6 7 8 9 10 11 |
import SwiftUI struct ClockView: View { var body: some View { TimelineView(.periodic(from: .now, by: 1.0)) { context in Text(context.date.formatted(date: .omitted, time: .standard)) .font(.largeTitle) } } } |
この例では、1秒ごとに TimelineView の中の context.date が更新され、それに伴って Text の表示が自動的に切り替わります。
「一定間隔で中身が自動的に変わってくれる View」と思っておくと理解しやすいです。
具体例
たとえば、1秒ごとに「現在時刻」を表示する時計アプリは以下のように書けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import SwiftUI struct ClockView: View { var body: some View { TimelineView(.periodic(from: .now, by: 1)) { context in VStack { Text("現在の時刻") Text(context.date.formatted(date: .omitted, time: .standard)) .font(.system(size: 32, weight: .bold, design: .monospaced)) } } } } |
ここで使われている .periodic(from:by:) は、「いつから、何秒ごとに更新するか」を指定するものです。
この例では「今（.now）から、1秒ごと」に更新しています。
また、context.date は内部的に更新された最新の時刻が格納されており、これを表示に使うことで時間の自動更新が可能になります。
主要な引数とその意味
TimelineView は下記のイニシャライザで定義されています。
|
1 |
init(_ schedule: TimelineSchedule, content: @escaping (Context) -> Content) |
ここで重要なのが schedule です。
これは「どのタイミングでビューを更新するか」を決める仕組みで、いくつかのバリエーションがあります。
schedule（TimelineSchedule）
- 役割: ビューを自動更新するためのスケジュールを定義する
- 指定方法:
.periodic,.everyMinute,.animationなどを選んで指定する - 特徴: ユーザー操作がなくても、指定したタイミングで
context.dateが更新される
代表的な指定方法
| 指定方法 | 説明 | 具体例 | 主な用途 |
|---|---|---|---|
.periodic(from:by:) |
指定した時刻から一定間隔で更新 | .periodic(from: .now, by: 1.0) |
時計、カウントダウン |
.everyMinute |
毎分ちょうど（:00秒）に更新 | .everyMinute |
株価更新、天気予報 |
.animation |
アニメーションフレームごとに更新 | .animation |
アナログ時計の秒針など滑らかな動き |
使用例
.periodic(from:by:)
1秒ごとに現在時刻を更新する時計：
|
1 2 3 4 |
TimelineView(.periodic(from: .now, by: 1.0)) { context in Text(context.date.formatted(date: .omitted, time: .standard)) } |
.everyMinute
毎分ごとに分単位で表示を更新：
|
1 2 3 4 |
TimelineView(.everyMinute) { context in Text(context.date.formatted(date: .omitted, time: .shortened)) } |
.animation
アニメーションに合わせてフレームごとに更新：
|
1 2 3 4 |
TimelineView(.animation) { context in AnalogClockView(currentDate: context.date) } |
content(context:)
- 意味:
TimelineView内部で渡されるContextを利用してUIを描画する - 主な使い道:
context.dateを使って最新の時刻や更新タイミングを取得する
例：
|
1 2 3 |
TimelineView(.periodic(from: .now, by: 5.0)) { context in Text("更新時刻: \(context.date.formatted(date: .omitted, time: .standard))") } |
活用シーン
TimelineView は特に以下のようなシーンで有効です：
- アナログ／デジタル時計の表示
- タイマーやカウントダウン（例：試験やストップウォッチ）
- 天気情報の定期更新
- スポーツの試合時間表示
- 一定間隔でリフレッシュが必要なダッシュボード表示
例えば、株価を1分ごとに更新したい場合や、試験用アプリで残り時間をカウントダウン表示する場合に、TimelineView を使えばスムーズに実装できます。
使用上の注意点
便利な TimelineView ですが、いくつかの注意点があります。
- 頻繁な更新はリソースに注意
- 0.01秒などで細かく更新するとパフォーマンスに影響が出る場合があります。
- scheduleの選定が重要
- リアルタイムが必要な場合は
.periodic()を、アニメーション連動が必要な場合は.animationを使い分けましょう。
- リアルタイムが必要な場合は
- watchOS専用のTimelineScheduleもある
TimelineScheduleは watchOS に特化した設計も含まれているため、iOSアプリでは.periodicなどの基本的なものを使うのがおすすめです。
また、TimelineView は SwiftUI の View の一種なので、body の中で使用する必要があり、@State などと連動させる必要はありません。
まとめ
TimelineView は SwiftUI で一定時間ごとに自動更新される View を構築するための仕組みです。
.periodic(from:by:)を使って任意の間隔で View を更新可能context.dateを使って現在時刻や更新タイミングを取得- 時計、タイマー、データの定期更新などに最適
- 更新間隔は適切に設定し、パフォーマンスへの配慮も重要
SwiftUIで時間ベースの処理を実装したい場合は、TimelineView を活用することで、より宣言的かつ簡潔に表現できます。
ぜひアプリに組み込んで、リアルタイムな表現を実現してみてくださいね！
