このサイトはアフィリエイト広告(Amazonアソシエイト含む)を掲載しています。 M5Stack

UIFlow2:関数(Function)ブロックの使い方

今回は、関数(Function)ブロックについて解説します。
この記事では、UIFlowプログラミングでよく使う、について解説していきます。

Funtionブロック

FunctionブロックはUIFlowプログラミングにおいて、特定の処理を行うコードのブロックです。
UIFlowで少し長いプログラムを作ると、画面上にブロックが溢れかえって見にくくなり、プログラムの可読性が悪くなります。

は、を使うと、特定のまとまった処理毎に、ブロック化できるためコードがすっきりして見やすくなるメリットがあります

ポイント

UIFlowプログラミングでは、変数はすべてglobal変数となっています。
これは初心者にわかりやすくするための仕様だと考えられます。

通常のプログラミングでは、関数内で宣言した変数はlocal変数となります。
UIFlowでは全ての変数はglobal変数となることに注意してください。

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
という関数を使うと、コードがシンプルになって見通しがよくなりますね

関数の中身

変数の定義を関数SetVariableでまとめる。

WiFI接続をConnectWiFiという関数で定義する

まとめ

UIFlowの関数(Function)ブロックについて解説しました。

UIFlowは初心者にとって扱い安い反面、少し複雑なプログラムになると見通しが悪くなるというデメリットがあります。
関数を使うと、特定の処理を見やすく記述できます。

関数をうまく使って見通しのよいプログラムにするよう心がけましょう。

-M5Stack