【Power Apps初心者講座】アプリの構成要素（アプリ・画面・コントロール）とプロパティを構造的に理解しよう

Power Apps初心者の方向けに**Power Appsの基本概念**を説明する試みです。

この記事では、

- **画面、コントロールなどのアプリの構成要素**
- **OnSelect、Text、Selectedなどのプロパティ**
- **プロパティの種類**

を解説しています。

コントロールやプロパティなど粒度の細かい情報で迷子になっている初心者の方は、**これらを構造的に理解するところから**始めてみてください。

## アプリの構成要素

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/153ce729-9c62-4600-a593-5f388189a7bc.png)

アプリの構成要素は**アプリ、画面、コントロールの3つがあり、アプリ : 画面 = 1 : N、画面 : コントロール = 1 : Nという関係性**になっています。

これらの関係性はアプリのツリービューを見るとよくわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/1efbbd70-30d0-dbbf-7b2a-af6c5158f09a.png)

### アプリ（App）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/3ff98f37-7c82-4b87-12c8-06860be38e40.png)

1アプリごとにアプリオブジェクトをもち、**アプリの起動時に実行される処理(OnStart)やアプリのサイズ(Size)などの、アプリ全体に関連する基幹的なプロパティ**を持ちます。

### 画面（Screen）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/585b1063-2ceb-b9e2-4e45-aa6afb6626ab.png)

1アプリに複数の画面を作成することができ、この画面内に複数のコントロールを配置することができます。

**画面が表示された時に実行される処理(OnVisible)や画面の背景(Fill, BackgroundImage)など、画面に関するプロパティ**を持ちます。

### コントロール

ボタンやラベルなど、画面に配置することのできる要素を**コントロール**と呼びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/5f4d215a-f28c-ac21-cbd7-37d629bb453e.png)

コントロールはそれぞれに**固有の役割・プロパティ**を持ちます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/a82eeeca-9718-a66c-870e-5641caf45afd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/d9f42629-2446-ddaa-4f7c-817eb11fe0e5.png)

## プロパティ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/3e07523e-0c52-9488-91d0-932e980cf870.png)

「プロパティ」とは**アプリの構成要素（アプリ・画面・コントロール）**が持つ、

- **テキスト、色や塗りつぶしなどの見た目**
- **どのデータを選択したか、どんなデータが入力されているかなどの情報**
- **アプリ上で何らかの操作がされた時に実行される処理**

を**テキストや数値などの静的な値**または**関数を用いた数式で動的に**指定することのできる項目です。

また、**入力プロパティにはプロパティに適したデータ型の値を指定する必要**があります。

https://powerplatformnikki.com/data-type

**入力、出力プロパティに動作の数式を設定するとエラー**になりますが、**動作プロパティに非動作の値を入力してもエラーにならない**ので値やそのデータ型の確認に活用できます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">OnSelectプロパティくん、何でも受け入れてくれるじゃん…<br>デバッグがめっちゃ捗るのに今まで何で気が付かなかったんだろう。<a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> <a href="https://t.co/nhz2PNEN6d">pic.twitter.com/nhz2PNEN6d</a></p>&mdash; PPログ@100日ブロガー (@PowerPlatform4) <a href="https://twitter.com/PowerPlatform4/status/1745070370267562259?ref_src=twsrc%5Etfw">January 10, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/f8bf457c-3121-82b7-316b-0ff3333330f3.png)

### 入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/80e10867-bfd9-39ed-b55a-fb319b0e67df.png)

アプリ作成時に**数式バーに値を入力することのできるプロパティ**（On〇〇〇を除く）が、入力プロパティです。

入力された値によって主に画面やコントロールの**見た目**が変化します。

**代表例**

- **Text** - ラベルやボタンなどに表示されるテキスト
- **Items** - ギャラリーなどのコントロールで一覧表示するテーブルデータ
- **Visible** - コントロールの表示/非表示を切り替えるためのブール値
- **X, Y** - コントロールの位置を指定する数値
- **Width, Height** - コントロールのサイズを指定する数値

### 出力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/ea918b8a-95c4-b1ac-9858-17e56656d539.png)

**他のプロパティ内で参照させることのできるプロパティ**が、出力プロパティです。

他のプロパティで参照させないと確認することができないので、探してみると意外と知らない出力プロパティが見つかるかもしれません（編集フォームにありがち）。

**代表例**

- **App.ActiveScreen** - アプリで表示中の画面の情報
- **Screen.Name** - 画面の名前
- **Gallery.Selected** - ギャラリーで選択したレコード
- **Form.Mode** - フォームのモード。Form.Mode = 0/1/2を指定することで、現在のモードを判別可能。（0 = 編集, 1 = 新規, 2 = 表示）
- **Form.Updates** - データソースに対してフォームが更新しようとしているレコード値

### 入出力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/fb6ceeda-bbc9-170d-9455-50f971540a11.png)

**入力、出力プロパティ両方の性質を持つプロパティ**が、入出力プロパティです。

入力した値がそのまま出力されるので**複雑な数式の結果を出力したり、その結果を複数の箇所で参照したり**、**動的な変数のように利用**することができます。

https://powerplatformnikki.com/variabletypes

### 動作

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/28e48e0d-0bef-c7f0-84c5-47fd2afe36b4.png)

**頭にOnとつくプロパティ**が、動作プロパティです。

この動作プロパティに**Navigate関数やSet関数などの動作の数式を設定することで、アプリがユーザーの操作に応じて動作する**ようになります。

ユーザーのアクションの種類に応じて様々な動作プロパティが用意されているので、動作プロパティの種類を把握するとアプリの動作に多様性が生まれます。

**代表例**

- **App.OnStart** - アプリの起動時に実行される処理
- **Screen.OnVisible** - 画面が表示された時に実行される処理
- **OnSelect** - ボタンなどのコントロールを押下した時に実行される処理
- **OnChange** - コンボボックスなどで選択されていたデータと別のデータを選択した時に実行される処理
- **Form.OnSuccess** - 編集フォームがエラーなくデータソースにデータを保存することができた時に実行される処理

## 元記事

https://powerplatformnikki.com/componentsproperties/