8_1：関数の基本 p5.js JavaScript

コンピュータはプログラムのコードを１行ずつ実行します。関数を実行するときには、関数が定義されている場所にジャンプしてそこに書かれているコードを実行し、終わったらジャンプした元の場所に戻ってそこから実行をつづけます。

function setup() {
    print('setup()1行目');
    // 自分で定義した関数
    someFunction();
    print('setup()3行目');
}

const someFunction = () => {
    print('関数内のコード');
}

サイコロを振る関数

次のサンプルを実行すると、プログラムはsetup()内のコードを実行して停止します。プログラムは迂回して、rollDice()関数内のコードを、rollDice()関数が現れるたびに、実行します。

function setup() {
    print('サイコロを振る準備ができた');
    rollDice(20);
    rollDice(20);
    rollDice(6);
    print('終わり');
}

const rollDice = (numSides) => {
    const d = 1 + int(random(numSides));
    print("出目は： " + d);
}

rollDice()関数の２行のコードは、1からサイコロの面数未満までのランダムな数値を選び、その数値をコンソールに出力します。数値はランダムなので、プログラムを実行するたびに結果は異なります。

rollDice()関数がsetup()内で実行されるたびに、rollDice()関数内のコードは上から下に実行され、それが終わると、プログラムは、setup()内の次の行の実行をつづけます。

random()関数は、0から指定された数値未満までの数値を返すので、random(6)は0から5.99999…までの数値を返します。この数値は小数点付きの数値なので、ここではp5.jsのint()関数を使って整数に変換しています。したがってint(random(6))は、0か1、2、3、4、5のどれかを返します。1を足しているのは、返す数値がサイコロのように1から6までにするためです。

int()

説明

ブール値、文字列、浮動小数をその整数表現に変換する。値の配列が渡されると、値の整数表現を含んだ同じ長さの配列が返される。

シンタックス

int(n, [radix])
int(ns)

関数を使わないでサイコロを振る

前と同じプログラムは、次のようにも記述できます。

function setup() {
    print('サイコロを振る準備ができた');
    const d1 = 1 + int(random(20));
    print("出目は： " + d1);
    const d2 = 1 + int(random(20));
    print("出目は： " + d2);
    const d3 = 1 + int(random(6));
    print("出目は： " + d3);
    print('終わり');
}

前述したrollDice()関数は、コードの可読性を高め管理しやすくします。関数名にその目的を明確にした名前をつけていると、プログラムはさらに分かりやすくなります。上記の例ではsetup()内にrandom()を使っていますが、その目的ははっきりしていません。

関数を使用すると、サイコロの面数も明確になります。たとえば rollDice(6)からは、６面あるサイコロを振る動作のシミュレーションであることがはっきり分かります。

また、関数を使ったプログラムでは情報が繰り返されていないので、管理が容易なのも明白です。上記の例では”出目は”が３回も繰り返されています。このテキストを書き変えたいときには、３箇所に手を入れる必要があります。しかし関数を使っていると１箇所で済みます。

さらに言うと、以降の例からも分かるように、関数の使用によってプログラム自体がかなり短くなる(したがって可読性が高まり管理しやすくなる)ので、バグが知らない間に入り込む可能性も低くなります。