Power Apps コンテナのネスト構造を作る方法|フォルダ階層のように考えると整理しやすい

Power Apps でコンテナを使い始めると、すぐに直面するのがネスト(入れ子)構造です。コンテナの中にさらにコンテナを入れる。これが理解できると、画面設計の見通しが一気に良くなります。

ネスト構造とは何か

ネストとは、コンテナの中にさらにコンテナを入れる構造のことです。マトリョーシカ人形を思い浮かべる方もいるかもしれませんが、実際の操作感はPCのフォルダ構造に近いです。ドライブの中にフォルダがあり、その中にサブフォルダがあり、さらにその中にファイルが入っている。Power Apps のコンテナもこれと同じ考え方で設計します。

具体的に対応させると、こうなります。ドライブが画面(Screen)、その直下にルートコンテナ、その中にセクションコンテナ、さらに内側に個別のコントロール(ラベルやボタン)が並ぶイメージです。フォルダ階層を整理するのと同じ感覚で画面を設計できるようになると、コントロール数が増えても迷わなくなります。

実例で追うネスト構造:scrHomeの4階層

実際に私が業務で使っているアプリのホーム画面(scrHome)を例に取ると、ネスト構造は4階層になっています。ざっくりとした骨格はこうです。

cntAll_Home(垂直コンテナ:画面全体)
└─ cntRight_Home(垂直コンテナ:メインコンテンツ領域)
   └─ cntBI(水平コンテナ:KPI表示エリア)
      └─ cntBI_1stL(水平コンテナ:KPI行の左側)
         └─ lblLastUpdate(ラベル:最終更新日)
         └─ btnRefreshBI(ボタン:更新)

このYAMLの階層を追いながらなぜここで入れ子にするのかを考えると、構造の意図が見えてきます。cntAll_Home は画面全体を縦に積み上げる垂直コンテナです。その中の cntRight_Home はメインコンテンツを管理する垂直コンテナで、ここでヘッダーとボディの上下関係を制御しています。さらに内側の cntBI は複数のKPIカードを横並びにする水平コンテナ、cntBI_1stL はその中の1行目の左エリアをさらに水平に分割するコンテナです。

各階層でやることはたった一つ。この親コンテナの子要素を縦に並べるか、横に並べるかを決めるだけです。この問いを内側に向かって繰り返すのが、ネスト設計の本質です。コンテナとセクション設計の考え方については、画面をセクションに分割する設計の考え方の記事でより詳しく解説しています。

階層ごとの判断:仕切り板の向きだけを決める

ネスト設計で迷うポイントは、ほぼ一つに集約されます。このコンテナは縦方向(垂直)か横方向(水平)か、という判断です。コンテナの追加後でも Variant プロパティを変更すればいつでも切り替えられますが、最初から方向を意識しておくと後の修正が少なくなります。

判断の基準としてよく使うのが仕切り板を1枚入れるとしたらという問いです。

縦に仕切り板を入れると左右に分かれる。横に仕切り板を入れると上下に分かれる。分けたい子要素がその片側に全部収まる方向が、そのコンテナに設定すべき方向です。これを最初の階層から繰り返すだけで、どれだけ画面が複雑になっても設計プロセス自体は変わりません。

子コンテナが1コントロールしか持たないケース

ネストを組んでいると、子コンテナの中にコントロールが1つしか入らないケースが出てきます。これは省略できるかどうかを判断するポイントです。整列やパディングの目的でコンテナを使っている場合はそのまま残しましょう。一方、単純に場所を決めるためだけに存在しているコンテナであれば、コントロールを直接親コンテナに入れたほうがシンプルになります。

個人的には、後から子要素が増えそうなら残す、増えない確信があるなら省略する、という判断をしています。コンテナの追加は後からでもできますが、後から省略するのは意外と面倒なので、迷ったら残しておく方が無難です。

よくある失敗:ネストが深くなりすぎる

ネスト構造に慣れてくると、今度は深くなりすぎるという問題が出てきます。5階層、6階層と深くなると、ツリービューを縦にスクロールしても全体像が把握できなくなります。私も最初の頃はこれをやってしまいました。ツリービューを開いた瞬間にどこに何があるかわからないという状態になるのは、深すぎるネストのサインです。

目安として、3〜4階層を超えたら設計を見直すことをおすすめします。階層が深くなる原因のほとんどは、1つのコンテナが担う役割が多すぎることです。このコンテナは何のために存在するかを1文で言えないなら、分割・整理のタイミングです。命名規則と合わせてツリービューを整理する方法は、コンテナの命名規則とツリービュー整理術の記事でまとめています。

同じ問いを内側に向かって繰り返すだけ

ネスト設計の良いところは、覚えることがほとんどないことです。縦か横かを決める。この問いを内側に向かって繰り返す。それだけです。最初の画面で慣れてしまえば、次の画面でも同じプロセスで設計できます。

どこから手を付けていいかわからないという段階から、この画面は垂直コンテナから始めて、内側を水平で分けて…と考えられるようになると、Power Apps の開発がぐっと楽になります。ギャラリーの中でコンテナを活用するレイアウト設計については、ギャラリー内にコンテナを使ったレイアウト設計の記事で続きを解説しています。ぜひ合わせて読んでみてください。

コンテナを使ったレイアウト設計全体の体系についてはPower Apps コンテナ完全ガイドにまとめているので、より深く学びたい場合はそちらも参照してください。

Xでフォローしよう