今回は、関数(Function)ブロックについて解説します。
この記事では、UIFlowプログラミングでよく使う、
と
について解説していきます。
Funtionブロック
Functionブロック
はUIFlowプログラミングにおいて、特定の処理を行うコードのブロックです。
UIFlowで少し長いプログラムを作ると、画面上にブロックが溢れかえって見にくくなり、プログラムの可読性が悪くなります。
は、を使うと、特定のまとまった処理毎に、ブロック化できるためコードがすっきりして見やすくなるメリットがあります。
Functionブロックの基本的な使い方

①関数(Function)に名前をつける
『dosomething』をクリックして、すきな名前に編集します。
②関数(Function)の中身をプログラムする。
Functionブロックの中に、実際に実行させたい処理をプログラムしていきます。
③Function実行ブロックを、実行したい場所に配置する
関数に名前をつけると、実行ブロック
が生成されています。
このブロックを実行したい場所に配置すると、関数内で定義した処理を実行することができます。
基本的な関数(引数と戻り値を持たない)

事例

関数greetを実行すると"Hello Yoshida"と表示されます。
関数を実行する部分に
を配置すると関数で定義した内容が実行されます。
実行結果は下記となります。
Hello Yoshida引数を持つ関数

ブロック左上の
をクリックすると、次のダイアログが開きます。

input name に好きな名前を入力して、入力変数を追加します。
事例

変数nameを引数として受け取ります。
関数内部では、"Hello " + name を出力する処理が実行されます。
関数を実行する部分に下記を配置します。

実行結果は次の通り。
Hello Yoshida
Hello Yamada引数と戻り値を持つ関数

ブロック左上の
をクリックすると、次のダイアログが開きます。

input name に好きな名前を入力して、入力変数を追加します。
事例

変数nameを引数として受け取ります。
関数内部では、変数greetingに "Hello " + name を格納して、
変数greetingを戻り値として返します。
関数を実行する部分に
を配置すると関数内部のコードが実行されます。
下記のコード実行した時の結果を示します。

Hello Yoshida実際の使用例
実際に実務で使うためのM5Stackをプログラムする時に、よく使う事例を紹介します。
関数を使う目的のひとつに、『プログラムを見やすくする』という点があげられます。
事例としてWiFi接続のコードで関数を使う場合と使わない場合について比較してみます。
WiFi接続で関数を使わない例
SetupにWiFi接続のコードを記述してみます。

これで正しいのですが、ブロックがごちゃごちゃして見にくいですね。。。
WiFi接続で関数を使う例
次にSetupブロック内で関数を使ってWiFi接続のコードを記述すると次のようになります。

変数の定義をSetVariables
WiFi接続の定義をConnectWiFI
という関数を使うと、コードがシンプルになって見通しがよくなりますね。
まとめ
UIFlowの関数(Function)ブロックについて解説しました。
UIFlowは初心者にとって扱い安い反面、少し複雑なプログラムになると見通しが悪くなるというデメリットがあります。
関数を使うと、特定の処理を見やすく記述できます。
関数をうまく使って見通しのよいプログラムにするよう心がけましょう。

