「変数」とは

このセクションでは、「変数」について学びます。変数はデータを保存するための箱のようなもので、箱に保存したデータは、参照や計算ができます。変数を使うと、何度も同じ値を書く手間を省き、値を一括で更新できます。また、プログラムの可読性（読みやすさ）が向上し、メンテナンスも容易になります。

１箇所の変更でコードの修正ができる
変数名でコードが読みやすくなる（可読性が向上する）

Practice 3.1.1

それでは、以下のサンプルコードを、変数を使ってより良いコードにしていきます。

function setup() {
    createCanvas(400, 240);
    background('#D6E3ED');

    circle(80, 120, 120);
    circle(200, 120, 120);
    circle(320, 120, 120);
}

現在のコードでは、円の直径が固定されているため、変更時にすべての値を個別に修正する必要があります。これを避けるために、変数で円の直径を管理しましょう。

function setup() {
    createCanvas(400, 240);
    background('#D6E3ED');

    let radius = 120; // 円の直径を変数で管理

    circle(80, 120, radius);
    circle(200, 120, radius);
    circle(320, 120, radius);
}

次に、変数radiusの値を150に変更して、すべての円の直径が一度に更新されることを確認しましょう。

変数の宣言

変数を使うには、まず変数を宣言する必要があります。宣言は、letに続けて変数名を指定する形で行います。変数名は自由に決められますが、ここではわかりやすくradius（直径）と名付けましょう。その後、その変数に値を代入します。

let radius; // 変数の宣言
radius = 120; // 値を代入

// 利用できない変数名
let 0number = 120; // エラー! 変数名は数字から始めることはできない。
let ✞BlackWing✞ = 120; // エラー! 変数名に記号を使うことはできない。

変数の宣言と値の代入を同時に行うこともできます。一行で書くと以下のようになります。

let radius = 120; // 変数の宣言と値の代入

変数の宣言は１度だけ行えば良いです。その後は、変数名を使って値を参照したり、更新したりすることもできます。

let x = 120; // 変数の宣言と値の代入
x = 100; // radius変数の値を　120 → 100　に更新

let x = 140; // エラー発生!!! 変数の再宣言はできない!

Practice 3.1.2

先ほど修正で、円の直径をradius変数で管理し、値の一括変更ができるようになりました。

function setup() {
    createCanvas(400, 240);
    background('#D6E3ED');

    let radius = 120; // 円の直径を`radius`変数に格納

    circle(80, 120, radius);
    circle(200, 120, radius);
    circle(320, 120, radius);
}

今度は、円の y 座標を変数で管理してみましょう。

function setup() {
    createCanvas(400, 240);
    background('#D6E3ED');

    let radius = 120; // 円の直径を`radius`変数に格納
    let y = 120; // 円の y 座標を`y`変数に格納

    circle(80, y, radius);
    circle(200, y, radius);
    circle(320, y, radius);
}

y 座標を変数で管理しているため、たとえば、すべての円を画面の中央に配置したい場合、y の値を変更するだけで対応できます。また、circle 関数では、第 2 引数に変数 y、第 3 引数に変数 radius を使うことで、コードがより読みやすくなりました。

組み込み変数

p5.js には、プログラムの中で使える「組み込み変数」がいくつか用意されています。組み込み変数は、p5.js によってあらかじめ宣言&代入された変数のことです。例えば、width と height は、キャンバスの幅と高さを取得するための組み込み変数です。

function setup() {
    createCanvas(400, 240);
    print(width); // `400`が出力される
    print(height); // `240`が出力される
}

上記のコードでは、変数の宣言は行っていませんが、width には 400、height には 240 が自動的に宣言&代入されます。

他にも、p5.js にはさまざまな組み込み変数があります。

変数名	説明
`windowWidth`	ウィンドウの幅
`windowHeight`	ウィンドウの高さ
`width`	キャンバスの幅
`height`	キャンバスの高さ
`mouseX`	マウスの X 座標
`mouseY`	マウスの Y 座標

もっと詳しくは知りたい場合は、p5.js のリファレンスを参照してください。

Practice 3.1.3

次は、画面の縦幅が変わっても円が常に中央に表示されるようにコードを改良します。先ほどのコードをもう一度確認しましょう。

function setup() {
    createCanvas(400, 240);
    background('#D6E3ED');

    let radius = 120; // 円の直径を`radius`変数に格納
    let y = 120; // 円の y 座標を`y`変数に格納

    circle(80, y, radius);
    circle(200, y, radius);
    circle(320, y, radius);
}

このままだと、例えば画面の縦幅が、240 から 400 に変更された場合、円の位置がキャンバスの中央からずれてしまいます。そこで、円の Y 座標を画面の中央に配置するために、height 変数を使って計算します。

function setup() {
    createCanvas(400, 400);
    background('#D6E3ED');

    let radius = 120; // 円の直径を`radius`変数に格納
    let y = height / 2; // 画面の中央の Y 座標を計算し、`y`変数に格納

    circle(80, y, radius);
    circle(200, y, radius);
    circle(320, y, radius);
}

このコードでは、height / 2 を使ってキャンバスの中央の Y 座標を計算し、その値を y 変数に格納しています。/は次の章で説明しますが、割り算を行う演算子で、÷ と同じ意味です。これにより、画面の縦幅が変更されても、円は常に中央に配置されるようになります。