はじめに
普段はReactNativeでスマホアプリを作ったりしています。
今回、いまさらながらMicrosoft PowerAppsを触ってみて『あ、殺られる！』と感じたのでまとめます。
簡単なアプリケーションは非プログラマでもすぐに作れることは知っているつもりでしたが、ここまで簡単だとは思っていませんでした。
今後のプログラマ・エンジニアに必要なのはNoCodeで（まだ）再現できない部分や、手の届かないスキルです。
それを知るためにもNoCodeで現状どこまでできるのか体験することは有意義であると思っています。
以下ではPowerAppsを使用したNoCode開発を、軽いチュートリアルのような形で紹介します。
TL;DR
- １分でCRUD一通り揃えたアプリが自動で作れます
- UIはシンプルながら業務用としては十分なものが出来上がります
PowerAppにサインアップ
まずは公式ページからサインアップを行います。
ビジネス アプリ | Microsoft Power Appshttps://powerapps.microsoft.com
データの準備と接続
PowerAppで使用するデータを準備します。
様々なサービスと連携することが可能です。MS製品に限られているのかと思いきや、
- GoogleSpreadSheet
- MySQLやPstgress
- DropBox
など想像よりも色々と使用できるサービスに幅がありました。
テーブルの作成
今回はOneDriveのエクセルをデータソースにします。
簡単な在庫管理表を作成しました。
この表をテーブルとして扱えるよう、設定します。挿入 -> テーブルを設定します。
テーブルを接続
作成したテーブルと、PowerAppを接続します。
PowerAppに戻り、先ほど作成したテーブルをデータソースとして選択します。
接続されたテーブルに基づいてアプリケーションが自動で生成されます。
驚くべきことにすでに画面遷移や基本的なCRUD操作は実装されている状態です。もちろんアプリケーション上で行った変更は即座にOneDriveのエクセルテーブルに反映されます。
PowerAppsでの開発
簡単な編集ならワード、エクセル、パワポができればほとんど難なくこなせる印象です。
見慣れたUI
- MS製品おなじみのリボンUIで、フォントやフィールドの並び替え、テーブル内のどのデータを参照するか、など細かく設定することが可能です。
- UIコンポーネントはパワポのような感覚で追加・削除・位置調整ができます。
- 表示するデータはエクセルのように、変数、関数、参照ができます。
イベント設定
各UIコンポーネントは設定可能なプロパティが定められており、イベント（トリガー）や状態に合わせた設定を行うことができます。
以下の画像では、
- 備品のリストコンポーネントに
onSelectという設定項目がある onSelectのイベント（トリガー）に合わせてNavigation関数が発火する- つまりタップしたら画面遷移する
ということが確認できます。
充実のドキュメント
使用可能な関数やコードサンプルなど、ドキュメントもしっかり揃っていて学習しやすいです。
日本語化も多方されています。
Power Apps 向けの数式のリファレンス – Power Appshttps://docs.microsoft.com
入力補完
VSCodeやその他のモダンエディタのように、関数や設定項目の自動補完がかなり嬉しいです。
変数の参照や、関数で使用できるメソッドなどドキュメントを参照しなくてもどんどん記述できます。
アプリケーションの編集
作成したアプリケーションを編集します。
静的な値
ヘッダーに表示されるタイトルを編集します。
コンポーネントを選択し、値を変更するだけです。
動的な値
次に、動的な値の表示ができるようにしてみます。
- 備品詳細ページで、表示されている備品の名称をヘッダーに表示させたい
名称を表示させたいので、素直に『名称』と入力するだけで自動入力補完が効きます。
次にDefaultの値を選択（これも自動補完が効く）するだけで完了です。
開いた備品の名称に対応してヘッダー名が表示されます。
あと、地味に日本語も問題なく変数として扱えていて、もちろん変数定義はテーブルから自動で行ってくれるのもすごい。(あんまり良くないとは思いますが、既存のエクセルファイルを無加工でデータソースとして渡してもちゃんと動く）
変数の使用
変数定義はほとんどの場合必要ありません。
PowerAppsにおいては、エクセルと同じくセルやUIコンポーネントが値を保持します。React開発者には馴染みがあるリアクティブなプログラミング手法です。
もちろん変数も使用できます。
- 画面に紐ずくコンテクスト変数
- アプリケーション全体を通して使用できるグローバル変数
をそれぞれ定義して使用できます。
しかしながら、ここにある意味制約を感じる場合があるかもしれません。基本的にUIコンポーネントを中心にデータや関数が展開されるため、UIに絡まないビジネスロジックだけを書こうとすると少し難しさがあるからです。
Common Data Service
ExcelテーブルやMySQLデータベースなど、複数のデータソースが存在する場合はCommon Data Service（CDS）というレイヤーを用意し、そこにデータを集約してからアプリケーションに接続するのが良いようです。
CDSを利用することで、データの利用性やセキュリティの側面でも様々な恩恵を受けることができます。
統合されたデータに対し、エンティティやリレーションを定義・設定することも可能です。
Model Driven App
モデル駆動型アプリではレイアウトの多くが自動的に決まり、アプリに追加するコンポーネントによって大部分が指定されます。
簡単に言えば、デザインにこだわりがない管理画面や複雑なダッシュボードをモデルから簡単に作成することができます。
デザインの細かい指定ができない代わりに、用意されているUIを使用することになります。見た目は割とリッチな印象です。
データの参照、編集、フィルタ、グラフ化など、基本的な操作を網羅した管理画面や、フォームの作成などに向いています。
まとめ
- 見慣れたMS製品の操作感
- 自動補完も効いている
- データソースはエクセル、スプレッドシートなど馴染みやすい
- 必要であればMySQLなどDBも使える
小さいアプリ開発は、エンジニア必要なくなる、というかもう要らないところまで来ているように思いました。
でもちょっと待ってほしい
ただし、まだまだいまひとつだなと思うところもあって、それは以下の記事にすごく丁寧にまとめられていました。
ぜひご覧ください。
Power Appsを開発者目線で評価する
https://qiita.com/simari/items/89b1be3606d6ec99b24c