🐷
SwiftUIでプレースホルダーを表示しよう

2024/08/26に公開
iOS
Swift
SwiftUI
tech
SwiftUIを使ってアプリを開発していると、データの読み込みが完了するまでの間に何を表示するか考えることがあるでしょう。
そんなときに便利なのが、.redacted(reason: .placeholder) という修飾子です。
この修飾子を使えば、まだデータがロードされていないときに、仮のプレースホルダーを表示することができます。

 .redacted(reason: .placeholder)とは？###.redacted(reason: .placeholder) は、SwiftUIで使われる修飾子の一つで、コンテンツを「隠す」または「ぼかす」ために使用されます。主に、データがまだ準備されていないときや、仮のコンテンツを表示したいときに使われます。
この修飾子を適用することで、実際のコンテンツがプレースホルダーのように表示され、データがロードされる前にユーザーに視覚的なフィードバックを提供できます。

 実際に使ってみよう例えば、ユーザーのプロフィール情報を表示するリストを考えてみましょう。データがまだロードされていないとき、.redacted(reason: .placeholder)を使ってプレースホルダーを表示できます。

VStack {
    Text("User Name")
        .font(.title)
        .redacted(reason: .placeholder)

    Text("user@example.com")
        .font(.subheadline)
        .redacted(reason: .placeholder)
}
.padding()
このコードを実行すると、"User Name"と"user@example.com"というテキストが灰色でぼかされた状態で表示されます。これにより、ユーザーに「データがまだロードされていないんだな」とわかってもらうことができます。

 いつ使うべき？redacted(reason: .placeholder) は、以下のような場合に非常に有効です。
データの読み込み中: APIからのデータ取得が完了する前に、UIを整えておきたいとき。
一時的な仮表示: 何らかの理由でデータが取得できない場合でも、アプリが空っぽに見えないようにしたいとき。
ユーザーの期待感を維持する: 「データが来たらこうなるんだよ」ということをユーザーに示して、-期待感を持たせるため。

 まとめ.redacted(reason: .placeholder) を使えば、SwiftUIアプリのユーザー体験を向上させることができます。データの読み込み中でも、ユーザーに適切な視覚的フィードバックを提供し、アプリが整って見えるようになります。適切に活用して、見た目も機能もスマートなアプリを作りましょう！
.redacted(reason: .placeholder)とは？###

実際に使ってみよう

いつ使うべき？

まとめ

Discussion
