はじめに
この記事は、アソビュー Advent Calendar 2025の11日目（表面）です。
こんにちは、アソビューでアプリ開発とバックエンド開発を担当している上中です。
最近、一時的にバックエンド開発に戻っていますが、早くもアプリ開発が恋しくなってきています。
ということで今回は、SwiftUIを忘れないように過去にアプリで実装した「再帰的にViewを呼び出すことで階層構造の配列データをドリルダウンのように表示するコンポーネント(以降ドリルダウンリスト)」について思い出しながら解説します。
ドリルダウンリストの概要
今回説明するドリルダウンリスト(DrillDownList)は、階層的なデータ構造をリストの再帰的な呼び出しによって表現するための汎用的なSwiftUIコンポーネントです。
以下がポイントになります。後ほど詳細は説明します。
- 再帰的なView呼び出しによって、任意の深さの階層データを表示可能
- 汎用的なデータを扱えるようにジェネリクスを使用
- 汎用的なデータでも階層構造を扱えるようKeyPathを使用
実装の詳細
コード全体
先にコードの全体像を載せておきます。
コードの詳細解説
ジェネリクスとKeyPathを用いた汎用的な階層データの取り扱い
まずは汎用的な階層データの取り扱いについて説明します。
引数のdata: Dataは、RandomAccessCollectionプロトコルに準拠する任意のコレクションです。今回は階層構造を持った配列を渡します（「使い方」の章参照）。
Data.Elementはコレクションに含まれる１つの要素を示すジェネリクス型です。
引数に渡すchildren: KeyPath<Data.Element, Data>によって、コレクションの中にあるネストされた配列要素を指定します。item[keyPath: children]のようにすることで、配列の要素(Data.Element)の中にあるデータから、childrenに該当する要素(Dataなのでコレクション型、今回の例ではselectionsの配列)を取得することができます。
itemName: KeyPath<Data.Element, String>は、同じように配列の要素(Data.Element)の中にあるデータから、String型のプロパティ(ここではdisplayName)を取得しています。これで取得した値が、次の階層ページのタイトルになります。
再帰的なナビゲーションによる画面遷移
DrillDownListの要素がタップされたとき、まだ次の階層がある（子要素childが空ではない）場合はnavigationPathとnavigationDestinationを使用して、次の階層にデータを渡しつつ画面を遷移(階層を１階層潜る)させます。
子要素childが空配列だった場合、すでに階層の最下層にいると判断し、ここではnavigationPath.removeLast(navigationPath.count)によって一番上の階層まで戻すようにしています。
この再帰を繰り返すことで、子要素が存在する限りは次の階層へと遷移していきます。
前の階層に戻る
デフォルトのナビゲーションバーを非表示にし、以下のようにカスタムヘッダーを実装しています。
左端に"<"ボタンを配置しており、これを押されるとdismiss()によって階層が一つ戻ります。
使い方
以下はドリルダウンリストの使用例です。
今回はsampleAreaDataというサンプルデータを用意しています。
北海道は階層が２つなので１階層だけ画面遷移します。
関東は最大３つまで階層を持っていますので、２階層画面遷移します。
まとめ
ドリルダウンリストは、階層的なコレクション型データを再帰的なView呼び出しで表現する際に使えるコンポーネントです。
ジェネリクスやKeyPathを活用することで、様々なコレクション型に対して再利用可能な実装となっています。
アソビューアプリでは、このコンポーネントで検索画面の「エリアから探す」や「ジャンルから探す」といった機能を実現しています。
最後に
アソビューでは新しい挑戦を歓迎しています。
弊社のアプリ開発に興味がある方は、ぜひ一度カジュアル面談にお越しください。
