PowerAppsの壁ってさ、という話

:::note info
この記事は、Microsoft [Power Apps Advent Calendar 2022](https://qiita.com/advent-calendar/2022/powerapps) 22日目（2022/12/22担当分）の記事です。
:::
<font color="Orangered">「Appsって初見殺しだよね」</font>
どうも、勢いだけで生きてるアカウント、チレットです。アドベントカレンダー、今日はPowerApps編にやってまいりました。
今日は冒頭で書いた「[初見殺し](https://www.weblio.jp/content/%E5%88%9D%E8%A6%8B%E6%AE%BA%E3%81%97)」<font color="gray">(ゲーム用語ですが個人的に一番しっくりくる言葉だった。気になる人はリンクからWeblio辞書見てください)　</font>がどういう点なのかお話していきたいと思います。

## Appsを学び始めた理由
そもそも私はPower Automateばかり使っててPower Appsは全然使ってなかったんです。
でも、「自分でほしい機能が自分の手で作れる」という謳い文句に大変興味が沸いたんですよね。これ、使ったらいろんなフォームを貯めていったり、一覧画面で見やすくしたり、なんか可能性高いぞこれは、って。
それに図形パーツのメニューがあったので画面に置いていったら出来るのかなー、と甘い期待を抱いてたわけです。本当に甘い期待だった。

## PowerPointみたいに作れる、って嘘じゃんよ（泣）

<font color="Darkorchid"><b> 「PowerPointのような操作感」</b></font>
いろんな紹介記事とかで、どこかで見た謳い文句じゃないでしょうか？
で、この気持ちで行くと、本当に折られます。
だってテキストボックスや図形パーツを置いていくだけで出来るわけじゃないんですよ？Appsなんだから「操作」という概念が入るんですもの。
<font color="red">静止画のような1枚絵を作るだけで終わるのではなく、動くものを作ろうとしているわけですから単純なことだけで完結するわけない。</font>
この「操作」という概念が、紹介記事などのタイトルできちんと乗っていないのはよろしくないのだ！(ﾌﾟﾝｽｶ)

## 最初の壁の"似て非なる三大要素"
さて、PowerPointみたいにはいかない、ってわかったところで次にいきましょう。
今年、[Akira先生(Twitter: @akira_365)](https://twitter.com/akira_365)の授業を3ヶ月に渡って受講しました。Akira先生の解説は[YouTube動画](https://t.co/1wfUAQSA56)などでもわかるとおり、大変丁寧。
そんな丁寧な授業を受けつつも、「あぁこれって罠じゃん…」となったものを3つほど、三大要素として書き出してみましょう。

### ①メニューvsオーサリングメニュー
Power Appsはメニューって言葉に違いがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349768/65e07059-8767-d331-8862-1242c583bd70.png)

通常の感覚で行くと、メニューって単語はMicrosoft製品に限らず、画面上部に並ぶ各種ツール名などの並びを思いますよね。で、似たような感じで左側にアイコンが並んでる。
この左側のアイコン群を「オーサリングメニュー」って呼び、上側のコマンドリストの並びは「Power Apps Studio モダンコマンドバー」って呼ばれてます。（ずっと上側のリストを「普通のメニュー」って呼んでたのは内緒です…）
<font color="deeporange">PowerAppsは何かを作る、Authoringするためのツールですから、ほとんどはこの左側のオーサリングメニューで行う</font>んですよね。でも、初心者ほど慣れないから上側の見慣れたコマンドリストから全てを操作しようとしちゃう。
たまに「オーサリングメニューから〜〜」とか言われると、「？！」ってなりやすくなる第一の罠。
さらにいえば、<b>変数は上の「モダンコマンドバー」からしか確認できない</b>のも罠だと思います！！オーサリングメニューにも一緒に入れてください（泣）

### ②ピリオド？カンマ？？
Appsは動くものを作る以上、数式バーで様々なものを指定していきます。
たとえばitemsで配列を作っておいて、それをギャラリーで呼び出す場合にはこんな画面になりますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349768/55a4e688-a975-4876-0232-723137f4fc06.png)
ThisItem.Value.icon ここで使われている区切り文字は"ピリオド"です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349768/35968929-f82f-2aa7-a5fa-36d815d43f1c.png)
では、こちら。
OnSelectプロパティで画面遷移を指定する時。このとき、指定したスクリーンの後の区切り文字は"カンマ"。
さらに紛らわしい例だと、配列の中のアイテムを使った関数の場合。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349768/744d80e5-d258-254c-b864-9a0bc9ea332f.png)
Distinct( 'PJ Test' ,Owner)
これ、ドロップダウンリストを使うためにDistinct（重複を消す）関数を使っているところです。
アイテムが入っているリスト内の項目を指定しているので、一番最初のThisItem.Value.iconに形がとっても似ているのに、”カンマ”で区切っています。
ThisItem.Value.〜で<font color="forestgreen">「なるほど、配列の中の項目指定ではピリオドなんだなー」</font>と理解したばかりのところに、<font color="darkviolet">「関数を使うときには違うんやで」</font>と言われたら、そりゃ第二の罠かよ！！

### ③関数の大文字小文字
そして私が授業中によーくやらかして、そのたびに先生に苦笑いされたやつ。（出来の悪い生徒ですいませんでした。。。）
関数の大文字小文字の問題。
ここで先ほどの例を持ってきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349768/55a4e688-a975-4876-0232-723137f4fc06.png)
Valueの先頭の文字は大文字ですね。これを小文字にしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349768/b9132248-9818-5a62-c2e3-bf48c4d093b5.png)
<b><font color="red">アイコン消えたがな。</font></b>
そうなのです。関数の中で大文字・小文字、ちゃんと認識されていて、文字列の並びが合っていたとしても大文字ではなく入っていたら関数として認識されなくなるのです。。。
慣れてきたぞ、と文字打ちで数式バーを編集していると、突然動かなくなる恐怖。
そして、<font color="forestgreen">HTMLのタグでは大文字だろうが小文字だろうがタグはタグじゃい！</font>と覚えてきた私にとっては第三の罠でありました。厳格なしきたりなんですね、PpwerAppsって。。。

## やっぱり初見殺し
さらにいろいろとやりたいことが増えると、関数も使えるようにならなくちゃいけません。
見た目的にExcel関数みたいだな、って思っているとぜんぜん違う。さらに変数という概念が発生する。
<b>いや、どう考えても初心者で感覚だけでいこうとする人（＝無謀な私）には無理ゲーすぎません？？</b>

## でも出来た時の喜びはとても大きい
上記の罠の洗礼を受けつつも、いろいろと試行錯誤しながら動くものが作れた時。
その喜びは本当に大きいです。
「うおー！ボタンクリックしたら、ちゃんとデータテーブルにデータ送信されて、また入力画面がクリアな初期状態に戻った！」とか。

普段、インターネットを使っていて当たり前に動作しているようなものが自分の手で作れた時。
私なんかだとHTML/CSSを書いてFTPで送信し、ちゃんとWebページとして公開できたときの喜びと同じようなものを感じました。
そして、それをひとつひとつ重ねていったり、先人たちのありがたいYouTube動画とかを見ながら学んでいくと、少しずつ謎が解けていくのだと思います。
同じように罠にかかった方、諦めずに壁にぶつかっていきましょうね！私も頑張ります（泣）

では、みなさま、ここまで初心者のお話に付き合っていただきありがとうございました。アドベントカレンダー、残りも楽しみにしてくださいね。またどこかの記事でお会いしましょう！
本日の担当、チレットでした。（終）

## ※おまけの懺悔
本当はAkira先生の授業で習った内容をベースに記事を作るつもりだったんですが、アレンジは間に合わなかったし、なんとなく書き始めてみてちょっと違うな、と別の切り口で書いちゃいました。でも、今日の記事のスクショで使った画面など思いついてから２0分足らずで作れた自分は褒めたい…！！前よりも進歩したのです、これでも。

先生の授業で習った内容はどこかでちゃんとアウトプットしようと思います。先生、ごめんなさい（平謝り）