変数 - p5-js

変数

変数は、値をメモリに保存し、プログラムの中で再利用するために必要です。メモリに値を保存できなければ何もできません。また、たとえ保存できたとしても、煩雑な手続きが必要では大変です。変数は、初心者が最初にぶつかる壁ですが、ここを通過すると次のステップは楽に行けると思います。

変数名（関数名）は、英文字で始まり、英数字と '_' が使えます。慣習的に、関数名、変数名は英小文字で始めます。また、定数はすべて大文字表記で、単語の間は '_' を使います。（例 HALF_PI, TWO_PI）

複数の単語を使って変数や関数名の表記するには、キャメル記法と '_’ でつなぐ手法が一般的ですが、ここではキャメル記法を使いましょう。

キャメル記法：mouseX, strokeWeight(5), isOdd(3) のように２番目以降の単語の開始を大文字で表記する。

スネークケース：単語を '_' でつなぐ。例 stroke_widthなど。

変数を使う理由の一つは、不要な繰り返しを避けることです。同じ値が２回以上使っているときは変数にすることを検討しましょう。また、値を変更するときに、関連するグループで統一的に変更したい場合や互いの位置関係を保持したいときなども、変数の利用を検討しましょう。

code:var01.js

'use strict';

let a = 50;

function setup(){

createCanvas(400,600)

circle(width/2,height/2,a*2);

circle(width/2,height/2,a);

同じ円が２つ描ける

createCanvas(400,600)

circle(200,300,100);

circle(200,300,50);

}

上の例では、キャンバスの真ん中に２つ同心円を描いています。

コメントの中の表記でも全く同じ円を描けます。しかし、後でキャンバスの大きさを変えたくなったときや円の直径の値を変えたくなったらどのように変更しなければ行けなくなるでしょうか。

例えば、キャンバスの大きさを(200x200)に変更するとcreateCanvas(200,200);、変数 width、height (この２つの変数は、createCanvas()関数が値を変更してくれるので、円の中心の座標の表記は変更する必要がありません。円の直径を変更するには、 let a=50; を let a=100; のように一箇所変更するだけで、２つの同心円を２倍にできます。

それに対して、コメントの中にあからさまに座標や直径を描いた場合は、何箇所変更する必要があるでしょうか。どちらが扱いやすいかは明らかです。

この他にも、今後アニメーションをする上で変数は必須です。変数がなければプログラムを書けないといっても過言ではありません。まず、変数の扱いになれましょう。

変数は、基本的に、使う前に宣言してください。JavaScriptの宣言は３つあります。

let

var

const

ここでは、letとconstを使ってください。 var は使わないでください。（宣言しなくても動きますが、エラーの原因となります。）

このレッスンでは、'use strict' （１行目　Strictモード）を必ず書いてください。その結果、宣言なしに変数を使うとエラーになります。初心者は、なるべく潜在的にエラーが入ってくる要因を減らすことが重要です。

変数には、スコープ（見える範囲）がありますが、煩雑ですので後ほど説明します。

変数の作成

code:var02.js

'use strict'

let message;

let myName="Masahiro";

const GRAVITY = 9.8;

function setup(){

createCanvas(400,400);

message="How is going ? ";

let newMessage = " Who are you ? "

console.log(newMessage);

console.log(message + myName);

// ...

}

function draw(){

console.log(message + myName);

// console.log(newMessage);

// ReferenceError: newMessage is not defined ()

}

変数は宣言し、後ほど使うことができます。また、宣言するするときに、値を代入することもできます。

宣言は、使う前であればどこでも宣言できます。しかし、スコープによって、見える範囲が限定されます。

この例では、message, myName はsetup(), draw()関数の中で使えますが、newMessageはsetup()関数のブロック内で宣言されたので、その外側では使えません。draw のコメントをはずすと参照エラー ( ReferenceError )が出ます。

setup(), draw()関数の中の両方で使いたい場合は、外側（最上位）のレベルで宣言しましょう。