SwiftUI APIの設計技術：プログレッシブディスクロージャ

SwiftUIの基本原則の1つであるプログレッシブディスクロージャについて解説しますので、それがどのようにAPIの設計に影響するのかご覧ください。さらに、プログレッシブディスクロージャの使用方法や、これが迅速な反復や探索をどうサポートするのかを解説しますので、自分用のコードでも活用できるようになります。

リソース

- HDビデオ
- SDビデオ

ダウンロード

こんにちは SwiftUIチームのエンジニア Samです SwiftUIを設計するとき私たちは明確に定義された原則に基づいて意思を決定するよう努めて来ましたその中からプログレッシブディスクロージャ「段階的開示」を紹介します SwiftUIチームでは新しいAPIについて考え構築することに多くの時間を費やしていますあなたが気づいていないかもしれないことは再利用可能なコンポーネントや抽象化を構築した瞬間にあなたもAPIデザイナーであるということですこの講演では私たちのデザインプロセスを公開し段階的開示について学んだことを共有します次に再利用可能なコンポーネントや抽象化を構築する際ツールベルトに新しいツールを追加します

まずは段階的開示の本当の意味についてお話します結論から言うと APIの設計に限ったことではないのです実際この現象は macOSの最も一般的なUIの1つである保存ダイアログで見ることができます最初に保存ダイアログが表示されたときデフォルトの保存場所が設定されていますさらにこのダイアログには共通の場所をドロップダウンで表示されよく使う場所に簡単にアクセスできますファイルシステムをブラウズしてパスを見つける場合はダイアログの展開により複雑で強力なUIが表示されます必要に応じて明らかにできる複雑なレイヤーが存在しますこれは私たちがAPIで提供したいものと同じです素晴らしいUIを提供することに相当するコードは APIを使いやすくすることです

開発者として私たちは自分のコードを書く場所宣言のサイトという視点からコードを見ることが普通ですしかしコードを使いやすくすることはコードが実際に使われる場所つまりコールサイトと呼ばれるところから見てみる必要があります

段階的開示には使用例の複雑さに応じてコールサイトの複雑さも対応できるよう APIを設計することです

理想的なAPIはシンプルでアプローチしやすく強力な使用例に対応できることです

これは開発者にとっても大きなメリットですまず最初のビルドと実行にかかる時間を最小限にし APIを迅速に使用することができますまたコードの学習曲線も短縮され APIがすべての関係ない概念で埋もれるのを防ぐことができます

最後に簡潔なフィードバックを作ることです段階的開示を採用したAPIは少しずつ要素を追加し各ステップで作成したものを確認できます

Appの構築は一度に大きな先行投資をするのではなく迅速な改良の繰り返しとなります

段階的開示は有益な道標ですがその原則の受け入れのためどのようにAPIを設計すればよいでしょうか？ SwiftUIチームでは一般的な使用例の検討から始めます段階的開示の機能のため例を見てみましょうシンプルな事例はどうあるべきか確認が必要です

インテリジェトなデフォルトを提供れば一般的には必要なものだけを指定できます次にコールサイトの最適化を目指しコールサイトのすべての文字に目的を持たせるようにしますそして最後にAPIを可能性を列挙するのではなく要素を構成するように設計します早速一般的な使用例を考慮する方法から始め SwiftUIからいくつかの例を見てみましょう SwiftUIが特に上手く行う場所の１つはラベルです

ボタンを作成する場合そのボタンのラベルを指定する必要がありますほとんどの場合このラベルはボタンの目的を説明するテキストになります SwiftUIはそれを綴る簡潔な方法を提供しますさらにボタンをカスタマイズしたい場合 SwiftUIは別のオーバーロードを提供しますこれは任意のViewｗをラベルとして受け取ります

これによりこの単純なコントロールから複雑な機能を構築することができますこのAPIは一般的な使用例を丁寧に考慮するため 99％の確率でシンブルなバージョンのみ必要です

このラベルパターンは SwiftUIの至る所に現れますどこにでもあるというのは本当にそう思いますですから共通の使用例を考慮することは私たち全体の仕事に関わることです次にインテリジェトなデフォルトを提供するのです一般的な使用例を合理化するために明示的に指定しないすべての事例にたいしてインテリジェトなデフォルトを提供する必要があります SwiftUIの中で最もよく使われるAPIの１つである「テキスト」ほど良い例はありませんテキストはインテリジェトなデフォルトの素晴らしい例でこのようなコードを何百回も書いたことがあるでしょう

このコードだけでSwiftUIは環境のローカライズで Appバンドル内のローカライズされた文字列を検索してテキストをローカライズします現在のカラースキームに自動的に適応しダークモードにもすぐに対応しますそして現在の動的タイプサイズのアクセス可能性に応じて自動的にテキストを拡大縮小しますこのような動作については以前にもお話しましたがテキストはそれ以上に裏側で動いています

例えば２つのテキストを隣り合わせにして積み重ねるとテキスト間のスペースは現在の文脈内のテキストの正しい行間に自動的に調整されますそのすべての動作は手動で指定することができますが SwiftUIのインテリジェトなデフォルトでは使用例に関連しない場合コールサイトで表示されません

テキストはシンプルな例が極めて少ないAPIの例ですがインテリジェトなデフォルトはコールサイトに適用されます例えばツールバーですここではボタンが並んだツールバーを表示しますツールバーのボタンは位置を明示的に指定することなくプラットホームの慣習に従って配置されます macOSではツールバーの先端に表示されます iOSではナビゲーションバーに表示され末尾から表示されます最後にwatchOSでは最初の項目のみが表示されナビゲーションバーの下に固定されますこの機能はほとんどの場合において素晴らしいものですしかしより多くの制御が必要な場合はアイテムの位置を明示的に指定するための追加のAPIを提供します繰り返しになりますがカスタマイズが必要な場合はインテリジェトなデフォルトが大半の例を処理します

インテリジェトなデフォルトの提供は素晴らしい体験ですしかしこれらAPIの使用に不便さがあり洗練さがない場合全体の効果を台無しにする可能性がありますそこで最後の戦略はコールサイトの最適化です別のAPIを見てみましょう　テーブルです

複数列のテーブルは機能豊富なコントロールです設定することがたくさんあり多くの機能がありますしかし大半のテーブルはもっとシンプルでそのような機能は必要ないのです私たちはテーブルがより複雑な動作を行うことを望んでいます最も詳細な形式ではそれが可能ですソートや豊富なセルコンテンツを含む複数列セクション可能な行などをサポートしています

より一般的な例でも素晴らしい体験を提供したいのでこのシンプルなテーブルのフルスペックのコードを見てそのコールサイトをどのように最適化するかを見てみましょうまずこの例を分解してみましょうテーブルは各行のデータの生成方法から始まります

ここでは現在読み込み中のブックを繰り返しテーブルの行を作成しています次に各行のデータから列を生成する方法を指定しますここではタイトル欄と著者欄を作成します

ソート順のバインディングを取得しユーザーがテーブル列のヘッダをクリックするとソートの変更を可能にします

最後にソート順が変わるたびにテーブルのデータを再ソートするコードを追加しましたずいぶんな情報量ですね段階的開示の受け入れのためこのコールサイトを最適化する方法を紹介しましょう

一般的な使用例としてすぐに目につくのは行です大抵は行のフィールドはコレクションに対する ForEachです各項目にテーブルの行を提供します

開発者が自分でループする必要はありません SwiftUIはこの処理を裏で行う機能を提供しますコレクションを直接テーブルに渡すことでForEachの動作を裏で提供でき全てのサイトを簡素化できますがこれはまださらに簡素化できます他によくある使用例は何でしょう？ほとんどの場合テーブルに表示する値が文字列の場合その文字列を列に表示するためにテキストを使用しますこの場合もコールサイトを最適化します

keypathが文字列を指す場合は常にTableColumnに関するViewを省略できるようにします

これも大きな簡略化ですがまだまだ最適化は必要ですコールサイトにはすべてのテーブルが重要としない情報がありますソート順ですテーブルの最も単純な使用例はソートを全く気にしませんそこでソートを気にしないバージョンのテーブルを用意しました最終的なイテレーションですよりシンプルになりましたこのコールサイトのすべての文字は明確な目的を持ちすべてのステップで２つの重要な質問に行き着きました「便利なものを作るべき最も一般的な使用例は何か？」「常に必要とされるべき必須情報とは何か？」これらの指針的な質問はコールサイトを最適化するのに役立ちますが慎重に適用する必要があります APIについてその意味をよく考えないと道を踏み外しかねないですそれが最終的な戦略です列挙するのではなく構成ですそしてこれを説明するためにSwiftUIのレイアウトシステムの一部のデザインについてお話しましょうスタック特にHStackですまずHstackに必要な情報は何かを考えてみましょうスタックにどのようなコンテンツが含まれそのコンテンツの配置方法を知る必要がありますすでにViewビルダーを使用し HStackの中身を指定しているので配置に注意しましょうもう一度質問に立ち返り HStackに要素を配置する際最も一般的な使用例は何でしょうか？私は時々先頭から順番にボックスを表示させるようなスタックを見せたいと思うことがあります

もう1つよくある例は要素を中央に配置したいことですそして最後に要素を後縁に合わせたいこともあります

VStackはすでに同様のケースを持つAPIがあるのでスタック内の要素の配置のために同様の列挙型を作成するのは魅力的に見えるかもしれませんこれはご紹介したすべてのケースに対応しています HStackの配置を指定することで先頭最後尾中央の配置を選択することができましたしかし要素を均等に配置したり要素間のみスペースを入れたり最後の要素の前にだけスペースを入れたい場合はどうすればいいのでしょう？これは厄介なことになりましたねしかしもっと重要なのは持続不可能だということです望むすべての動作に列挙型のケースの追加が必要ですべての有用なケースを思いつくとは限りませんよくあるケースを便利なものを提供するより列挙していることに気がついたら APIを分解して解決策を構築できるような構成要素にしてみましょう列挙するのではなく構成です

スタックの場合 SwiftUIはスペーサーを提供しそれをスタックの要素と組み合わせて列挙したスペーシングスキームを構築することができます

段階的開示のための最高のエクスペリエンスをデザインすることはコールサイトを最小化するだけでなくどのように拡張するか慎重に検討しましたこの場合コンポジションです

自分でコードを書く場合作成するコンポーネントに対して同じような配慮をすることが非常に役立ちますそのためにはまず一般的な使用例を考慮することです段階的開示の適用によりあなたの書いたコードは最も一般的な使用例で時間を節約できます段階的開示があればよくあるケースで細かいことを考える必要がありませんコールサイトの最適化に取り組むことで迅速な反復が可能になります最後にコンポジションを活用することで柔軟性のあるAPIを構築することができます

そしてあなたはAPI設計者であるため他の誰かのために設計されているのか単に自分が使うためなのかにかかわらず教訓を毎日書くコードに適用することができますご覧いただきありがとうございました

1:59 - Declaration Site Example

struct BookView: View {
    let pageNumber: Int
    let book: Book

    init(book: Book, pageNumber: Int) {
        self.book = book
        self.pageNumber = pageNumber
    }

    var body: some View { ... }
}

2:13 - Call Site Example

VStack {
    BookView(book: favoriteBook, page: 1)
    BookView(book: savedBook, page: 234)
}

4:18 - Button Label

Button("Next Page") {
    currentPage += 1
}

4:36 - Button label expanded

Button {
    currentPage += 1
} label: {
    Text("Next Page")
}

4:43 - Button label advanced case

Button {
    currentPage += 1
} label: {
    HStack {
        Text("Next Page")
        NextPagePreview()
    }
}

4:56 - Button label common case
```
Button("Next Page") {
    currentPage += 1
}
```
5:30 - Text example
```
Text("Hello WWDC22!")
```

6:12 - Stacks of Text

VStack {
    Text("Hello WWDC22!")
    Text("Call to Code.")
}

6:46 - Toolbar

.toolbar {
    Button {
        addItem()
    } label: {
        Label("Add", systemImage: "plus")
    }

    Button {
        sort()
    } label: {
        Label("Sort", systemImage: "arrow.up.arrow.down")
    }

    Button {
        openShareSheet()
    }: label: {
        Label("Share", systemImage: "square.and.arrow.up")
    }
}

7:20 - Toolbar with explicit placement

.toolbar {
    ToolbarItemGroup(placement: .navigationBarLeading) {
        Button {
            addItem()
        } label: {
            Label("Add", systemImage: "plus")
        }

        Button {
            sort()
        } label: {
            Label("Sort", systemImage: "arrow.up.arrow.down")
        }

        Button {
            openShareSheet()
        }: label: {
            Label("Share", systemImage: "square.and.arrow.up")
        }
    }
}

8:09 - Advanced use case table

@State var sortOrder = [KeyPathComparator(\Book.title)]

var body: some View {
    Table(sortOrder: $sortOrder) {
        TableColumn("Title", value: \Book.title) { book in
            Text(book.title).bold()
        }
        TableColumn("Author", value: \Book.author) { book in
            Text(book.author).italic()
        }
    } rows: {
        Section("Favorites") {
            ForEach(favorites) { book in
                TableRow(book)
            }
        }
        Section("Currently Reading") {
            ForEach(currentlyReading) { book in
                TableRow(book)
            }
        }
    }
    .onChange(of: sortOrder) { newValue in
        favorites.sort(using: newValue)
        currentlyReading.sort(using: newValue)
    }
}

8:41 - Simpler table use case

@State var sortOrder = [KeyPathComparator(\Book.title)]

var body: some View {
    Table(sortOrder: $sortOrder) {
        TableColumn("Title", value: \Book.title) { book in
            Text(book.title)
        }
        TableColumn("Author", value: \Book.author) { book in
            Text(book.author)
        }
    } rows: {
        ForEach(currentlyReading) { book in
            TableRow(book)
        }
    }
    .onChange(of: sortOrder) { newValue in
        currentlyReading.sort(using: newValue)
    }
}

9:58 - Table collection convenience

@State var sortOrder = [KeyPathComparator(\Book.title)]

var body: some View {
    Table(currentlyReading, sortOrder: $sortOrder) {
        TableColumn("Title", value: \.title) { book in
            Text(book.title)
        }
        TableColumn("Author", value: \.author) { book in
            Text(book.author)
        }
    }
    .onChange(of: sortOrder) { newValue in
        currentlyReading.sort(using: newValue)
    }
}

10:23 - Table string key path convenience

@State var sortOrder = [KeyPathComparator(\Book.title)]

var body: some View {
    Table(currentlyReading, sortOrder: $sortOrder) {
        TableColumn("Title", value: \.title)
        TableColumn("Author", value: \.author)
    }
    .onChange(of: sortOrder) { newValue in
        currentlyReading.sort(using: newValue)
    }
}

10:51 - Table without sorting

var body: some View {
    Table(currentlyReading) {
        TableColumn("Title", value: \.title)
        TableColumn("Author", value: \.author)
    }
}

13:37 - Stack example: leading

struct StackExample: View {
    var body: some View {
        HStack { // leading
            Box().tint(.red)
            Box().tint(.green)
            Box().tint(.blue)
        }
    }
}

13:40 - Stack example: centered

struct StackExample: View {
    var body: some View {
        HStack { // centered
            Spacer()
            Box().tint(.red)
            Box().tint(.green)
            Box().tint(.blue)
            Spacer()
        }
    }
}

13:42 - Stack example: evenly spaced

struct StackExample: View {
    var body: some View {
        HStack { // evenly spaced
            Spacer()
            Box().tint(.red)
            Spacer()
            Box().tint(.green)
            Spacer()
            Box().tint(.blue)
            Spacer()
        }
    }
}

13:43 - Stack example: space only between elements

struct StackExample: View {
    var body: some View {
        HStack { // space only between elements
            Box().tint(.red)
            Spacer()
            Box().tint(.green)
            Spacer()
            Box().tint(.blue)
        }
    }
}

13:46 - Stack example: space only before last element

struct StackExample: View {
    var body: some View {
        HStack { // space only before last element
            Box().tint(.red)
            Box().tint(.green)
            Spacer()
            Box().tint(.blue)
        }
    }
}

13:47 - Stack example: space only after first element

struct StackExample: View {
    var body: some View {
        HStack { // space only after first element
            Box().tint(.red)
            Spacer()
            Box().tint(.green)
            Box().tint(.blue)
        }
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。