Power Appsの変数・コンポーネント (気ままに勉強会 #83)

気ままに勉強会 #83 Power Appsの 変数とコンポーネント 2024/5/11 PPログ

PPログ X(Twitter) : https://twitter.com/PowerPlatform4 Blog : https://powerplatformnikki.com/ 2

• https://twitter.com/PowerPlatform4​
• https://powerplatformnikki.com/

Content • 保守性を意識したコードを書きましょう • 変数・コントロールを使う上で大事な3つのこと • 変数の種類と使い分け・スコープ • ロジックの抽象化 • ユーザー定義関数(App.Formulas) • コンポーネント 3

数式バーに書くことのできる値についてのお話です 4

ローコードだからこそ、保守性・可読性を意識したコードを 書きましょう ID Value 1 あ 2 い 3 う 4 え 5 お テーブルからLookUp関数を用いて以下の条件でラベルに出力する ・グローバル変数の値以上のIDを検索 ・コンテキスト変数の値以下のIDを検索 ・チェックボックス1がtrueなら奇数、falseなら偶数を検索 ・チェックボックス2がtrueならValueを、falseならIDを出力 5

結果は同じだからと楽をしても、クソコードはあなたや周りの人を いつか苦しめる × 〇 6

保守性・可読性の高いコードを書くために意識していること 1.変数・コントロールの命名規則を定め、順守する 2.適当に命名しない 3.スコープを理解し、適切に使い分ける 4. 要素(変数・コントロール)の数は最小限にする 5. 特殊な処理にはコメントを書き、秩序を持って空白や改行を入れる 7

変数・コントロールを使う上で大事な 3つのこと

変数・コントロールを使う上で大事な3つのこと 1. 命名規則を定め、順守する 2. 適当に命名しない 3. スコープを理解し、適切に使い分ける 9

適当に命名せず、変数名でどんな値が格納されるか・用途がわか るように命名しましょう 例：コントロールのHeightの値を格納する変数名 Size _ControlHeight コントロールのHeightに 入力するのかな… Sizeだからフォント サイズかな… 名前が抽象的だから他の 変数が命名しにくい… 幅の変数は _ControlWidthだな！ 10

命名規則を定め、順守しましょう 大事なのは、要素が見つけやすいように名前が統一されていることです https://powerplatformnikki.com/powerappsnamingconvention/ 11

• https://powerplatformnikki.com/powerappsnamingconvention/

運用側でコーディング規則を設定できないので、 覚えやすいシンプルな規則を作る必要があります(例) コントロール名 設置時の名前を使う 変数名 _や接頭辞(gbl, loc)をつける 12

変数の種類と使い分け・スコープ 13

投票ありがとうございました！ 14

基本的にはスコープの小さい方から使うが、まずはそれぞれの 要素を減らせないかを考えるべき アプリ グローバル変数 コレクション 画面 コンテキスト変数 コントロール ユーザー定義関数 コンポーネント プロパティ With関数 15

グローバル変数vsコンテキスト変数 グローバル変数 • スコープがアプリ全体なので値がどこでも使える • 意図せぬ値の更新が起きてしまうリスクがある コンテキスト変数 • スコープが宣言した画面のみなので意図せぬ値の更新によるバグを未然に防げる • Navigate関数で他画面に渡す手間があり、どこから来た値なのかを遡る必要がある 16

意図せぬ値の更新は、初期化処理の入れ忘れが主な原因 変数の数を減らすか、スコープを区切ることでバグを防ぐ ▼OnStart グローバル 変数 ▼更新&画面遷移 ▼画面遷移 AAA AAA グローバル 変数 AAA AAA コンテキスト 変数 いいい 画面A コンテキスト 変数 画面B IsBlankでバグる△ 17

意図せぬ値の更新は、初期化処理の入れ忘れが主な原因 変数の数を減らすか、スコープを区切ることでバグを防ぐ ▼OnStart グローバル 変数 ▼更新&画面遷移 ▼初期化&画面遷移 AAA 画面A コンテキスト 変数 グローバル 変数 AAA コンテキスト 変数 いいい 画面B IsBlankでバグらない△ 18

値が動的(数式や関数)であるか、静的(変数)であるかも考慮する 19

ロジックの抽象化

コンポーネントとユーザー定義関数の比較 ユーザー定義関数 コンポーネント 概要 アプリ全体で再利用できる数式を 作成する機能 複数アプリで横断的に利用できる 共通部品・ロジックを作成する機能 利用目的 ロジックの抽象化 OnStartで定義していた定数の代替 ロジックの抽象化 共通部品(コントロールのまとまり) の作成 試験段階でできること 引数ありの関数が作れる 使えるプロパティの型を増やせる 共有 ロジックのコピペのみ(個別要件向き) コンポーネントライブラリ (共通要件向き) その他 動作の数式は作れない レコード型、テーブル型が使えない 中級者以上でないと扱うのが難しい 21

ロジックの抽象化(≒関数化)の例 x+1 (x+1)2 x2-1 (x+1)(x-1)2 22

抽象化できれば、ロジックの処理の過程を理解することなく実装 できる f(a, b) = (x+1)a × (x-1)b f(1, 0) = x+1 f(2, 0) = (x+1)2 f(1, 1) = x2-1 f(1, 2) = (x+1)(x-1)2 ※抽象化する範囲を広げすぎるとロジックが複雑になるので注意 23

ロジックを抽象化することで、コードの再利用性が高くなります ユーザー定義関数 メリット： コードが短くなり可読性が向上する 実際の数式 ロジックの中身を毎回思い出さずに済む メンテナンスやテストの工数削減 24

抽象化対象の選定基準として、アプリ内またはアプリ間で重複す るロジックや複雑なロジックが挙げられます アプリA アプリB アプリC 25

重複している単純なロジック→コンポーネント 出現回数の多い複雑なロジック→ユーザー定義関数 複雑 アプリA 単純 複雑 アプリB アプリC 複雑 26

(注意)Power Appsでのロジックの抽象化は一部が試験段階です https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/working-with-experimental-preview 27

• https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/working-with-experimental-preview

ユーザー定義関数(App.Formulas)

ユーザー定義関数(App.Formulas)は、アプリ全体で再利用できる数式を 作成する機能です 引数なし(GA済み) • 出力のみの関数を作成する機能 • App.OnStartの代替 引数あり(試験段階の機能) • 入出力をもつ関数を作成する機能 • コンポーネントのロジックのみver 29

App.FormulasはApp.OnStartの代替になるのか？ 最も大きな違いは評価のタイミング グローバル変数(静的) App.OnStartで定義 OnSelectで更新 Textに表示 Textに再表示 ユーザー定義関数(動的) App.OnStartで定義 OnSelectで更新 Textに表示(更新) Textに再表示(更新) 30

ユーザー定義関数(引数なし)の使用例： リレーション先テーブルの取得 親テーブルギャラリーを選択した時 31

ユーザー定義関数(引数あり)の使用例： アプリURLの取得 用途： 開くレコードを指定するリンクの作成 別のアプリを開くリンク メリット： 環境移行時やアプリID変更時の改修コスト削減 長いURLの短縮による可読性の向上 32

App.OnStartとApp.Formulasのパフォーマンス比較 してみました(5/25予定) https://connpass.com/event/317081/

• https://connpass.com/event/317081/

コンポーネント 34

コンポーネントとは、Power Appsで再利用可能な共通部品を 作成することのできる機能です。 コントロールの共通部品化 • デザインの統一 • スキルのギャップ解消 関数の抽象化 • 複雑な数式の簡素化 • パフォーマンス向上 35

コンポーネントには4種類のプロパティの型があります。 データ以外の型は試験段階の機能です。 プレビュー(パラメーター設定可)→ 36

通常プロパティには、入力・出力・動作の三種類があります https://powerplatformnikki.com/componentsproperties/ 37

• https://powerplatformnikki.com/componentsproperties/

データは、コントロールをまとめて一つの意味をもつ部品を作る 際に有効です アプリ コンポーネント a a+b コントロール b a-b コントロール 38

データの例： 二次方程式の解を計算するコンポーネント 複数コントロールと それらへの入力の結果、 計算された値が欲しいときに 使用する 39

関数は、アプリから呼び出す非動作関数を作成することができま す アプリ コンポーネント f(a,b) f(a,b) a b コントロール.非動作プロパティ f(a, b) a+b a-b 40

関数の例： 二次方程式の解を計算する非動作関数 非動作プロパティで使用する App.Fomulasと同様の使い方 41

アクションは、アプリから呼び出す動作関数を作成することがで きます アプリ コンポーネント f(a,b) a b コントロール.動作プロパティ f(a, b) a+b a-b 42

アクションの例： 二次方程式の解を計算する動作関数 動作プロパティで使用する 複雑な処理を簡単にすることがで きる 43

イベントは、コンポーネントに対して作用する動作関数を作成す ることができます アプリ コンポーネント f(a,b) クリック コントロール.動作プロパティ f(a, b) 44

イベントの例： 二次方程式の解を計算する動作関数 コンポーネント内でのみ使用可能 なカスタム関数を作成できる 45

アクセスアプリスコープがオフの場合は、画面のコントロールや 変数にアクセスできず、コンポーネント内に変数が作成される 画面 コンポーネント コントロール コントロール 変数 変数 46

アクセスアプリスコープをオンにした場合のみ、画面のコント ロールや変数にアクセス可能です 画面 コンポーネント コントロール コントロール 変数 変数 47

グローバル変数とコレクションが利用でき、アクセスアプリス コープオフの場合はコレクションローカルの変数が作成されます。 使用可否 アクセスアプリ スコープオン アクセスアプリ スコープオフ Set 〇 画面に変数作成 コンポーネントに 変数作成 UpdateContext × - - 画面に変数作成 コンポーネントに 変数作成 (プレビュー不可)※ ClearCollect 〇 ※廃止済み機能をオンにすると画面の変数へアクセスできる 48

アクセスアプリスコープをオンにすると汎用性が下がる反面、ス キーマのエラーはなくなる オン オフ 汎用性高 つくりにくい 汎用性低 つくりやすい 組織へ展開する場合はオンにしましょう 49

単純なロジックは組織単位で、複雑なロジックはアプリ単位のコ ンポーネント化 複雑 アプリA 単純 複雑 アプリB アプリC 複雑 50

コンポーネントのインポート/エクスポートは廃止済み。 個別のアプリでの利用なら許容範囲 51

コンポーネントライブラリへのアクセス方法 52

ありがとうございました！

その他コンポーネントに関することはコルネさん、Hiroさんの資 料をご覧ください！ • コルネと学ぶコンポーネント by @korune • Component勉強会 • 今日から始めるPower Appsのコンポーネント開発 by @korune 54

• https://www.docswell.com/s/korune/ZYRXE5-2021-08-01-152933
• https://www.slideshare.net/NagaoHiroaki/component-249893944
• https://www.docswell.com/s/korune/5W3G45-M365VM22-Korune-Component

今回話した内容に関連する記事 • 【Power Apps】変数を使う上で知っておきたい3つのこと • 【Power Apps】ユーザー定義関数(App.Formulas)とコンポーネント • 【Power Apps】命名規則について • 【Power Apps】保守性の高いアプリを作るためのガイドライン • 【Power Apps】プロパティの型ごとのコンポーネントの使い方 • 【JPPGB #9】Power Appsで2048を作ってみた 55

• https://powerplatformnikki.com/variabletypes
• https://powerplatformnikki.com/udfcomponent/
• https://powerplatformnikki.com/powerappsnamingconvention/
• https://powerplatformnikki.com/maintainabilityguideline/
• https://powerplatformnikki.com/componentproperties/
• https://powerplatformnikki.com/powerapps2048/