初めての Power Apps キャンバスアプリ開発

## はじめに
初めて PowerApps を利用する場合、通常のプログラミングとは異なりローコード開発ということで取っ付きずらいポイントがいくつかあります。
そのため、キャンバスアプリ開発を始めるうえで最初に知っておくと良いポイントについてざっくりと纏めようと思います！

## 環境関連

### レスポンシブデザインに対応
Power Apps は標準でレスポンシブデザインに対応しているため、PCの横向き表示や、タブレットやスマホによる縦向き表示も可能です。
ただし、レイアウト構成を意識した開発が必要となりますので、用途が限定されている場合は画面サイズや表示方向を制限すると開発工数を抑えられます。

### 同じアプリを複数人で同時編集できない
Power Apps は「Power Apps Studio」というWEB上のツールを使って開発を行います。
しかし現状、誰かが編集をしているとロックされた状態となり、同時に複数人で編集はできません。
そもそも Power Apps は、複数人での開発が必要となるような大規模なシステムの開発には向いていないと思いますが、目的別にアプリを分けて、それぞれを各人が開発するのがいいかと思われます。

:::note warn
編集中のまま閉じるとたまにロックが残ることがありますので、画面左上の「← 戻る」ボタンを押してから閉じることをオススメします！
:::

### 編集内容は自動保存される
画面上で編集している内容は定期的に自動保存されます。（WEBベースの開発ツールでは必須！）
設定画面に項目がありますが、既定で有効になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/d0c1ea31-85c0-9c14-5650-5a58ec622d76.png)

:::note info
画面左上の「元に戻す」ボタン、もしくは 'Ctrl + Z' で１つ前の状態に戻すことが可能です。（たまに効かないことがあるのでご注意を・・・）
:::

### 変更内容はバージョン管理される
保存した内容は自動的にバージョン管理されます。アプリの詳細からバージョンの一覧を確認できます。（どこが変更されたか（差分）までは見えません）
また、どのバージョンが公開済みになっているかも見られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/5f6f633b-0658-2ea7-6df8-95ea15c59037.png)
過去のバージョンを復元する場合、新しいバージョンとして保存されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/f6f2a305-0e49-6231-3d4f-53faf0513ffb.png)

## 画面／コントロール関連

### 初期処理の実行について
アプリの実行時に１回だけ実行したい処理については、アプリオブジェクト（App）の`OnStart`に記載します。
開発時は三点リーダから「OnStart を実行します」で再度実行できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/bc8136d5-88d8-4853-6249-dbcd764cc1d2.png)
設定画面を見ると`OnStart`ではなく`StartScreen`の使用を推奨しているように見えますが、アプリ起動時に画面遷移が必要な場合については`StartScreen`を推奨するということみたいです。（そんなふうには読み解けない；；）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/1cec3f2b-685f-46f0-1138-6d5b173178b1.png)
詳細は以下を参照してください。

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/object-app#onstart-property

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/6678fb90-9cc5-5895-2747-8866a0ed15d3.png)
ただし時間のかかる処理は避けた方がよいため、`Concurrent`関数を使って並列化を図るなど工夫が必要です。（クライアント側のマシンパワーにも左右される点に注意）

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-concurrent

また、各画面での初期処理に関しては`OnVisible`に記載します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/d930e217-2474-58ce-e56b-e77a69fc870e.png)

### コントロールのプロパティは直接変更できない
コントロールのプロパティの内容は自身のプロパティ内で定義するか、変数を介してでないと変更できません。

**自身のプロパティ内で定義した場合**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/a2fb7d2d-1a62-b532-5d8a-0a2192f1d7bc.png)

**変数を介した場合**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/36b5572d-4dca-d54c-a91d-3be60fa0dcd6.png)

私は PowerApps と Microsoft Access は近しい部分があるなと思っていますが、Access では直接プロパティの変更が可能です。
しかし直接変更できてしまうと、どこでその処理が書かれているのかを探すのが物凄く大変で直観的ではありませんでした。
そのため、上記の制約はとても良いものだと思います。

ちなみに変数は、どこで使用されているかを一覧で見ることが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/fc095486-8820-4639-0021-d8e5e9faee5b.png)

検索画面からも探れるため、こちらからも確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/b9618183-819e-669c-52fc-ba8b9ae8cd8d.png)

### 異なる画面でも同じコントロール名は使えない
この制約は地味に面倒です・・・。
他画面からコントロールを参照できるようになっているからこのような制約があるのかと思いますが、それなら「画面名＋.(ドット)＋コントロール名」とかでアクセスできるようにして欲しい、、、

### ポップアップのダイアログは用意されていない
キャンバスアプリでは標準でポップアップのダイアログは用意されていません。（モデル駆動型アプリには存在する模様）
そのためダイアログを実現したい場合は、四角図形をダイアログに見立てて配置し、その図形上にボタンを配置して、表示制御を切り替えるといった対応が必要となります。

https://tech-blog.cloud-config.jp/2021-06-25-power-apps-popup

コンポーネントで作成すれば使いまわすことも可能です。

https://artisan.jp.net/blog/power-apps-canvas-apps-create-component/

## コーディング関連

### 使用言語は「Power Fx」
> Power Fx は Microsoft Power Platform 全体で使用されるロー コード言語です。 汎用、厳密な型指定、宣言型、そして関数型のプログラミング言語です。
[引用：Microsoft Power Fx の概要](https://learn.microsoft.com/ja-jp/power-platform/power-fx/overview)

調べ物をするときはキーワードに「PowerApps」と付けた方がヒットする気がするので、普段はあまり意識する必要はなさそうです。

### コーディング規約について
先ずは以下のガイドラインを参考にするのが良いかと思います。
> [PowerApps キャンバスアプリのコーディング規約とガイドライン](https://memo.tyoshida.me/wp-content/uploads/2021/06/4bbaa6955f6a1caa85a9653c13d61d72.pdf)

ただし、実際に開発をした経験上、以下のサイトでも紹介されているように、あまり凝り過ぎず手を掛け過ぎないないようにした方がいいなと思いました。

https://powerplatformnikki.com/powerappsnamingconvention/

### 変数は３種類
| 種類 | スコープ | 書き方 |
|:-|:-|:-|
| グローバル変数  | アプリ内  | Set(変数名, 値)  |
| コンテキスト変数  | 画面内  | UpdateContext({変数名: 値})  |
| With 関数内の変数  | With 関数内  | With({変数名: 値}・・・  |

https://ippu-biz.com/development/powerplatform/powerapps/variable/

変数の一覧は「Power Apps Studio」上で確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/dbe6d333-aa71-206b-4d78-696b6dedadcc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/7d987a22-f954-e509-7d0b-f5f0b0c721b4.png)
増えすぎると非常に見通しが悪くなるため、用途に合わせて With 関数を積極的に利用しましょう。

### リスト（配列）について
以下の種類が存在します。
* Record
* Table
* Collection
* JSON

Collection は追加・変更・削除ができます。
その他は主に取得データであったり、登録するデータとして使用されます。

https://qiita.com/MiyakeMito/items/43290dd4d4876c0b5be3

Form で Submit するリストデータを Collection で作成した場合、Table への変換が必要となりますが、以下のように`UpdateContext`で変換可能です。

```csharp:変換処理の実行例
UpdateContext({変換先のテーブル: 変換元のコレクション});
```

### 処理の共通化
Power Apps では処理をコントロールのプロパティにしか記述できないため、処理を共通化して呼び出すといったことができません。
そこで、画面上のどこかに非表示（Visible：false）のボタンを配置して`OnSelect`プロパティに処理を記述し、実行（Select）することで疑似的に共通処理を実現できます。

```csharp:共通処理の実行例
Select(Button処理A);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241051/ae967851-bfd7-0d2b-ab4d-b10287834c7d.png)

:::note info
上記の方法で呼び出された処理は非同期で実行されるため`処理Ａ`が終わってから`処理Ｂ`・・・といった順序で実行したい場合は、`処理Ａ`の中で最後に`処理Ｂの実行`処理を記述する必要があります。
:::

## その他

### 「委任」について
PowerApps でデータ取得を行う場合、この「委任」というキーワードは必ず意識する必要があります。
何かというと、クエリを処理する際に「委任」すると、サーバー（SharePoint）側で処理した結果を受け取れるようになります。
そうすることで受信するデータ量を減らして、クライアント側での処理負荷を軽減できます。
委任できていない場合、データを全件受信してからクライアント側で処理することになってしまいます。（とはいえ、委任できていない時は警告が表示されるので、気付かないということはないはずです）
委任できない関数や制限については予め頭に入れておくとよさそうです。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/delegation-overview

### 「Power Apps for Microsoft 365」ライセンスについて
「Power Apps for Microsoft 365」ライセンスでは、Power Platform のコアともいえる`Dataverse（旧CDS：Common Data Service）`との連携はできません。
（Teams 上で作成した PowerApps については Dataverse for Teams が利用できます）

この他、自作のコネクタ（カスタムコネクタ）は`プレミアムコネクタ`に分類されるため、上記のライセンスでは利用できません。
カスタムコネクタが利用できないと、Microsoft Graph API の利用もできず、標準コネクタでは出来ることの幅が物凄く狭いです・・・

https://ez-office.jp/blog/detail/20220716-01

## さいごに
ローコード開発は１からプログラムをごりごりコーディングするよりは楽といった紹介のされ方も見受けられますが、正直なところ現状では色々とややこしい割には実現できることの幅が狭い（プランにもよりますが）といった印象です・・・。

しかし一度覚えてしまえば、用途に合った開発に対しては非常に早いスピードで対応できるので、今後どのように伸びていくのかを期待したいと思います！

また、ユニフェイスでは新しいことにチャレンジしたい人材を募集しておりますので、気になる方はぜひご応募お願いします😊
[技術ブログ](https://hub.uni-face.co.jp/)も公開していますのでこちらもチェックしてみてください！

https://uni-face.co.jp/