§2.4 - 計算

bykarutt

2024-10-07

変数と計算

前のセクションでは、変数を使って値を管理し、プログラムを制御する方法を学びました。今回は、変数に保存した値を計算して更新する方法を学びます。まだイメージしにくいかもしれませんが、値の更新時に少し工夫して計算を加えることで、非常に柔軟なプログラムを作成できるようになります。

Practice 3.2.1 : キャンバス中央に円を描画する

以下のコードは、キャンバス中央に２つの円を描画するコードです。変数も計算も行わずに、固定の値を使って円を描画しています。

function setup() {
    createCanvas(520, 320);
    background('#D6E3ED');
    circle(200, 160, 100);
    circle(320, 160, 100);
}

このまま、キャンバスのサイズを変更すると、円の位置が中央からずれてしまいます。そこで、円の中心座標を計算して、円をキャンバスの中央に描画するように修正しましょう。

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

    let cy = height / 2; // 「/」は割り算を意味する
    let cx = width / 2; // 「/」は割り算を意味する
    circle(cx + 60, cy, 100); // 「+」は足し算を意味する
    circle(cx - 60, cy, 100); // 「-」は引き算を意味する
}

描画内容は変わりませんが、キャンバスの横幅、縦幅を変更しても、常に円が画面中央に描画されるようになりました。試しにキャンバスの横幅と縦幅を400に変更してみましょう。すると、円は画面中央に描画され続けます。

四則演算

先ほどのコードの中で、/、+、-などの「演算子」が使われていました。これらは四則演算子、つまり、足し算、引き算、掛け算、割り算を行うために使われます。以下は、Javascript で利用できる演算子です。

演算子	説明	例	計算結果
:----:	------	--------	:------:
`+`	足し算	`1 + 2`	`3`
`-`	引き算	`3 - 1`	`2`
`*`	掛け算	`2 * 3`	`6`
`/`	割り算	`6 / 2`	`3`
`**`	べき乗	`2 ** 3`	`8`
`%`	余り	`5 % 2`	`1`

計算の順序は概ね数学と同じです。括弧()を使って計算の優先順位を指定することもできます。

let x = 10 + 4; // 14
let y = 10 - 4; // 6
let z = 6 * 5; // 30
let w = 12 / 3; // 4
let v = 3 ** 2; // 9
let m = 10 % 3; // 1
let u = (10 + 4) * 2; // 28

Practice 3.2.2 : 階段を描画する

今度は横長の長方形を描画して、階段を作ってみましょう。まずは、変数の値を計算・更新しない方法でプログラムを書いてみます。

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

    let h = 50;
    let x = 0;

    rect(x, 80, 200, h);
    rect(x, 130, 300, h);
    rect(x, 180, 400, h);
}

このコードの問題点は、階段の y 座標は80, 130, 180, ...と、横幅 w は200, 300, 400, ...と、値の更新を自分で計算しなければならない点です。このサンプルコードは小規模で、数の増え方も50や100といった、シンプルな値ですが、例えば段数が 100 段で、更新する値が173などだった場合、計算ミスを犯す可能性が高くなります。

階段の y 座標、横幅 w の値の増加には規則性があるため、変数の値を機械的に更新することで、計算ミスのないコードを作成することができます。

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

    let h = 50;
    let x = 0;
    let w = 200;
    let y = 80;
    let step = 100;

    rect(x, y, w, h);
    w = w + step;
    y = y + h;
    rect(x, y, w, h);
    w = w + step;
    y = y + h;
    rect(x, y, w, h);
}

修正箇所は、w と y の値の更新に、新しく定義したstepとh変数を使っている点です。たとえば、w = w + step は、w に w + step を代入するという意味です。値の更新式に焦点を当てて、計算がどのように行われているかみてみましょう。

let w = 200; // 最初は200
let step = 100; // 100ずつ増やす

w = w + step; // 200 + 100 = 300を`w`に代入
w = w + step; // 300 + 100 = 400を`w`に代入
...

let y = 80; // 最初は80
let h = 50; // 50ずつ増やす

y = y + h; // 80 + 50 = 130を`y`に代入
y = y + h; // 130 + 50 = 180を`y`に代入
...

このように数の増え方を一般化し、プログラムの本質を捉えることは非常に重要です。この考え方を基礎に、次のチャプターでは、「繰り返し処理」を使って、同じコードをより短く効率的に書く方法を学びます。お楽しみに！

変数の値を更新する

一度宣言した変数を更新するには、次のように書きます。

let x = 120;
x = x + 20; // x は 140

注意したいのは、=は数学の等号とは異なり、「代入」を意味します。上の例で、x = x + 20 と書くと、現在の x の値に 20 を加えた結果を再び x に代入しています。具体的には、120 + 20 の結果である 140 が x に代入されます。

こうすると、変数の値に対して加算、減算、乗算、除算といったさまざまな操作を行うことができます。

let x = 120;
x = x + 20; // x は 140 になります
x = x - 40; // x は 100 になります
x = x * 2; // x は 200 になります
x = x / 4; // x は 50 になります

より単純な更新方法（代入演算子）

プログラマーは面倒くさがり屋なので、変数の更新をより簡単に書く方法を考えました。それが「代入演算子」です。代入演算子を使うと、先ほどと同じ計算を、より簡潔に書くことができます。

=：代入
+=：加算代入
-=：減算代入
*=：乗算代入
/=：除算代入

例えば、x += 20は、xに20を加えるという意味です。これはx = x + 20と同義です。

let x = 120;
x += 20; // x = 140
x -= 40; // x = 100
x *= 2; // x = 200
x /= 4; // x = 50

特殊な演算子`++`と`--`

JavaScript には、変数の値を 1 つ増やす「++」と 1 つ減らす「--」という特殊な演算子があります。これらの演算子は、変数の値をシンプルに増減させるときに便利です。次のセクションで紹介する「for ループ」でよく使われるので、ぜひ覚えておきましょう。

let x = 10;
x++; // x は 11 になります
x--; // x は 10 に戻ります

Practice 3.2.3

では、先ほどの演算子を使って、Practice 3.2.1 のコードをより簡潔に書き直してみましょう。

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

    let w = 200;
    let h = 50;
    let x = 0;
    let y = 80;
    let step = 100;

    rect(x, y, w, h);
    w += step;
    y += h;
    rect(x, y, w, h);
    w += step;
    y += h;
    rect(x, y, w, h);
}