0Pricing
Swift Academy · レッスン

Viewのアイデンティティを理解する

SwiftUIがViewを差分計算し再利用する方法を制御します。

「Viewのアイデンティティを理解する」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。

アイデンティティがSwiftUIを動かす

SwiftUIは各ビューをアイデンティティで追跡し、既存のビューを更新するか、新しいビューを作成するかを判断します。

アイデンティティを正しく扱うことは、正確性とパフォーマンスを大きく左右します。

2種類のアイデンティティ

SwiftUIでは、構造的アイデンティティ(ビューのビュー階層内での位置)と明示的アイデンティティ(割り当てる id)の2種類を使います。

構造的アイデンティティ

デフォルトでは、ビューのアイデンティティは階層内の位置から決まります。以下のif分岐は、構造的に異なる2つのビューを作成します。

var body: some View {
    if isOn {
        Text("On")  // one identity
    } else {
        Text("Off") // a different identity
    }
}

分岐で状態が失われる理由

各分岐は異なる構造的アイデンティティを持つため、分岐を切り替えると最初のビューが破棄され、2つ目のビューが作成されます。その内部にある@Stateはリセットされます。

if isExpanded {
    DetailView() // new instance each time the branch flips
} else {
    SummaryView()
}

id()による明示的アイデンティティ

.id(_:)モディファイアは明示的アイデンティティを割り当てます。idを変更すると、SwiftUIに「これは別のビューです」と伝わり、新しいインスタンスの作成と状態のリセットが強制されます。

CounterView()
    .id(selectedTab) // new identity per tab

ForEachでのアイデンティティ

ForEachには、各要素の安定したアイデンティティが必要です。安定したidへのキーパスを使い、変更可能なコレクションでは配列のインデックスを決して使わないでください。

ForEach(items, id: \.id) { item in
    RowView(item: item)
}

インデックスをアイデンティティにする罠

インデックスや変更される値にid: \.selfを使うと、データの変更時にアイデンティティの対応が入れ替わり、誤ったアニメーションや状態の消失が発生します。

// Risky if items reorder or values repeat:
// ForEach(0..<items.count, id: \.self) { ... }

アイデンティティとアニメーション

アニメーションは、同じアイデンティティの状態間を補間します。アイデンティティが変わると、SwiftUIは滑らかなアニメーションではなく、挿入・削除のトランジションを実行します。

withAnimation {
    // same identity -> property animates
    // changed id     -> transition (fade/slide)
}

条件付きモディファイアはアイデンティティを変える

ifの内部でモディファイアを適用すると、構造的アイデンティティが変わり、状態がリセットされることがあります。条件に応じてモディファイアの値を計算し、1つのビューとして扱うことを優先してください。

// Better: keep one identity
Text("Hi")
    .opacity(isHidden ? 0 : 1)
// Worse: branching creates two identities

AnyViewはアイデンティティ情報を消去する

ビューをAnyViewでラップすると、SwiftUIから型が見えなくなり、効率的に差分を計算する能力が弱まります。可能な場合は、具体的な型または@ViewBuilderを使用してください。

// Prefer @ViewBuilder over returning AnyView
@ViewBuilder
func content() -> some View {
    if flag { A() } else { B() }
}

安定したアイデンティティ=安定した状態

原則として、状態と滑らかなアニメーションを維持したい場合はアイデンティティを安定させ、意図的に新しく開始したい場合にだけアイデンティティを変更してください。

確認テスト:ビューのアイデンティティ

ビューのアイデンティティについて理解度を確認します。

まとめ:ビューのアイデンティティを理解する

SwiftUIは、ビューを構造的(ツリー内の位置)および明示的(.id)に識別します。安定したアイデンティティは@Stateを保持し、プロパティの滑らかなアニメーションを可能にします。アイデンティティを変更すると状態がリセットされ、トランジションが発生します。

ForEachには安定したidを指定し、変更可能なデータではインデックスをアイデンティティにすることを避けてください。アイデンティティを切り替える分岐を最小限にし、具体的な型で対応できる場合はAnyViewも避けます。

よくある質問

「Viewのアイデンティティを理解する」レッスンは無料ですか?

はい。「Viewのアイデンティティを理解する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。

「Viewのアイデンティティを理解する」で何を学びますか?

SwiftUIがViewを差分計算し再利用する方法を制御します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Swift Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「Viewのアイデンティティを理解する」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwift Academyレッスンでコードを書いて実行できますか?

はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Viewのアイデンティティを理解する
  2. bodyの再評価を最小限にする
  3. EquatableなViewと@Stateのスコープ
  4. SwiftUI Instrumentによるプロファイリング
← Swift Academyに戻る