動くスケッチ・ソースコード

変数とは、数値・文字などを保存・記録できる紙切れや引き出しのようなものです。

例えば自分の身長をプログラムで使いたいとすると、このようにできます。

let shincho = 165;
rect (50, 50, 100, shincho);

こうすると shincho とは165に変換され、 rect が描く四角の縦長さが165になります。

こう見るとあまり効率的に見えないかもしれませんが、値に名前を付けるだけでプログラムが人間に読みやすくなります。また、同じ値を何箇所かに使う時は特に便利です。

let の意味

上記の例に shincho が2回出ていますが、最初だけ let が付いています。変数を命名する時は、このように先に let と書く必要があります。変数一つずつ let が1回です。それも1回目です。

変数の中身を変更

let shincho = 165;
rect (50, 50, 100, shincho);
shincho = 190;
rect (250, 50, 100, shincho);

shincho が165の時に書いた、左の方に書かれる上記の長方形は、縦長さが165です。

その後 shincho の値(中身)を190に更新して、右にずらした二つ目の四角を描きます。この段階の shincho が190なので、二つ目の長方形の縦長さは190になります。

let は最初だけつけているのに注目してください。

変数の値を1つずつ増やす

let shincho = 165;
shincho++;

変数名++を使うと、変数の値(中身)をその場で増やすことができます。

似たような表現がいろいろあります。全ては覚えなくても良いですが、どこかでみた時は意味がわからないと困りますので、ここに説明を残します。

let shincho = 165;
shincho++; // 1つ増やす
shincho--; // 1つ減らす
shincho += 10; // 10つ増やす
shincho = shincho + 10; // 10つ増やす(省略なし)
shincho = shincho + 1; // `shincho++`や`shincho += 1`と同じ効果

定数と変数の違い

先ほどは値が変わる変数を紹介しましたが、値が変わらない予定なのでしたら、変数としてではなくて定数として定義するとコードがわかりやすくなります。

const shincho = 165;

constで定義した定数の値はあとから++=で変更することができません。ずっとそのままです。

定数の代わりに変数と使って、値を変えないようにすると同じ結果が得られますが、コードを読むときはconstを見ると「これが変わらない」とホッとしますので、可能なときは積極的に使いましょう。

color 関数を使った変数定義

let c = color(255, 0, 0);
fill(c);

スケッチにこうあるのですが、3つの数値を使った色を変数に保存したい時には color という関数を使うことができます。

この場合は color に三つの数値を渡して、色というものに変換してもらって、それを c 変数に保存しています。そうすると c の中身は fill などにそのまま使うことができます。

注意:色を保存する変数をsetupの前に定義するとsetupdrawなどで共通として使えますが、color関数は生のJavaScriptではなくてp5.jsが提供するので、setupdrawの中で使いましょう。

let c;
function setup() {
  c = color(255, 0, 0);
  fill(c);
}

ブーリアン型(真理値)

オン/オフやはい/いいえも変数や定数にほどんできます。可能な値は下記の通りです。

定義の例:

let start = false;

if文(条件実行)

ブーリアンの使い道は主にif文になります。特定の変数がtruefalseになっているかによってプログラムの動きを変えることができます。

if (start == true) {
  x++;
}

xは、starttrueになっている場合にだけ増えます。