見出し画像

ProtoPieの変数

ProtoPieである程度動的なプロトタイプを作る時、変数の理解が必要になってきます。 ProtoPieの変数は難しいものではないので、使えるようにしておきましょう。

変数とは?

変数とは名前を付けて値を保存しておけるものです。
変数に保存した値は、時間経過や画面タップなどのトリガーに応じてインタラクティブに書き換えることが可能です。
ProtoPieの変数は初心者でも扱い易くなっていますので、複雑に考えなくて大丈夫です。

変数の種類

スクリーンショット 2021-05-29 4.07.18


ProtoPie の変数では、以下 3 種類の型が用意されています。

数字型
テキスト(文字列)型
カラー(カラーコード)型

型とは?
変数が扱うことのできる値の種類を指します。
変数に保存された値が同じに見えても、変数の型が違えば動作時の挙動が変わることがあります。
用途にあった型を選ぶことが重要になります。

注意点
金額等の合計値を表示したいとき、変数の型を「テキスト」にしてしまうと文字列として扱われてしまい、正しい合計値を得られなくなります。数値計算の結果を利用する場合は必ず「数字」の変数を使いましょう。

e.g.
変数の型を「数字」にした場合、演算が行われる
1 + 1 → 2
変数の型を「テキスト」にした場合、文字が連結される
1 + 1 → 11

変数の初期値

スクリーンショット 2021-05-29 4.38.51

各変数の項目(タブ)の下に変数の初期値を設定する入力欄があります。
変数を上書きしなければ、ここで入力した値がずっと保持されることになります。

変数のスコープ

スクリーンショット 2021-05-29 4.20.07

ProtoPieの変数のスコープ(有効範囲)は2種類あります。

全てのシーンで使用
このシーンのみ使用

全てのシーンで使用」はグローバル変数です。ここで定義した変数は ProtoPie の全ての画面(シーン)で利用することができます。
このシーンのみ使用」はローカル変数で、定義した画面(シーン)でのみ利用することができます。

スコープは、定義した変数を他の画面でも使いたいかどうかで使い分けると良いと思います。プロトタイプが複雑になってくると、変数の数も増えてきて自分でもどれが何のための変数か分かり難くなります。他の画面で使わない変数はローカル変数にして、スコープを狭く持ちましょう

まとめ

今回は ProtoPie における変数とは何か、について説明しました。
変数を利用すると、変数の型に応じた動的な変化をプロトタイプに取り入れることができます。

簡単な例を挙げると、

・操作によって文字を出し分ける
・受け取った入力を使って計算結果を表示する
・色やシェイプ、ポジションなどをユーザーの操作によって変更する

などがあります。

変数の利用で様々なインタラクションが実現できるので、是非身につけてみてください。
変数について少しでも理解できたら、次は変数の中身を表示してみましょう。