関数とは、簡単に言うと複数の処理を1箇所にまとめたものです。

関数を使うことで以下のようなメリットがあります。

• 一連の処理を1つにまとめることで、コードが読みやすくなる
• 同じ処理を何度も行う場合に、同じコードを何度も書く必要がなくなる

以下ではログを出力しながら解説していきます。
ログ出力について詳しく知りたい方は、以下の入門コースの解説をご覧ください。

ログを出力しよう - 入門コース

関数の基本

関数の基本的な使い方を解説します。
オンラインエディタ を開き、次のコードを記述してください。

function setup() {
  createCanvas(400, 400);
  hello();
}

function hello() {
  console.log("こんにちは");
  console.log("これが関数");
  console.log("です。");
}

function draw() {
  background(220);
}

これが関数の基本的な使い方の例です。
コードを解説していきます。

function hello()

この部分で、関数 hello を定義しています。
hello という文字は好きな文字列を使って構いません。
そして {} の内部で、関数 hello の処理を記述しています。

function hello() {
  console.log("こんにちは");
  console.log("これが関数");
  console.log("です。");
}

ここではログを3つ出力しています。

そして setup の中で関数 hello を呼び出して、実行しています。
関数は呼び出されることで初めて実行されます。

function setup() {
  createCanvas(400, 400);
  hello();
}

プログラムを起動してみると、コンソール欄に次のようにログが出力されることが確認できると思います。

関数の基本2

関数は何回でも呼び出すことができます。
以下のコードを実行すると、コンソールに

こんにちは
これが関数
です。
こんにちは
これが関数
です。

と出力されることが確認できると思います。

function setup() {
  createCanvas(400, 400);
  hello();
  hello();
}

function hello() {
  console.log("こんにちは");
  console.log("これが関数");
  console.log("です。");
}

function draw() {
  background(220);
}

同じ処理を何度も行いたいときに、関数としてまとめておけば、同じコードを何度も書く必要がなくなります。

引数の使い方

関数は引数というものを受け取ることができるので、それを解説します。
引数とは、関数に入力するパラメータのことです。

オンラインエディタ を開き、次のコードを記述してください。

function setup() {
  createCanvas(400, 400);
  hello("太郎");
}

function hello(name) {
  console.log("こんにちは");
  console.log(name);
  console.log("さん。");
}

function draw() {
  background(220);
}

今回は関数が引数を受け取るようにしました。
コードを解説していきます。

function hello(name)

この部分で、関数 hello が引数 name を受け取ることを示しています。
name の文字は好きな文字列を使って構いません。
そして {} の内部で、引数 name を使っています。

function hello(name) {
  console.log("こんにちは");
  console.log(name);
  console.log("さん。");
}

関数 hello を呼び出すときに、引数 name に "太郎" を指定しています。
こうすることで、関数 hello の内部で引数 name は "太郎" になります。

function setup() {
  createCanvas(400, 400);
  hello("太郎");
}

プログラムを起動してみると、コンソール欄に次のようにログが出力されることが確認できると思います。

同じような処理だけど一部の値だけ異なるような処理を何度も実行したいとき、関数の引数は活躍します。

引数の使い方2

引数は複数指定することができます。
以下のコードを実行すると、コンソールに

太郎 
15
歳

と出力されることが確認できると思います。

function setup() {
  createCanvas(400, 400);
  hello("太郎", 15);
}

function hello(name, age) {
  console.log(name);
  console.log(age);
  console.log("歳");
}

function draw() {
  background(220);
}

戻り値の使い方

関数は戻り値というものを返すことができるので、それを解説します。
戻り値とは、関数が出力するデータ のことです。

オンラインエディタ を開き、次のコードを記述してください。

function setup() {
  createCanvas(400, 400);
  let x = calcDouble(15);
  console.log(x);
}

function calcDouble(value) {
  let result = value * 2;
  return result;
}

function draw() {
  background(220);
}

コードを解説していきます。

function calcDouble(value) {
  let result = value * 2;
  return result;
}

この部分で、関数 calcDouble を定義しています。
引数 value を受け取り、値を2倍して変数 result に代入しています。
そして最後の文で、変数 result を戻り値として出力しています。

return result;

return と記述することで、戻り値を出力することができます。

そして関数を呼び出す側では、変数 x に戻り値を代入しています。

function setup() {
  createCanvas(400, 400);
  let x = calcDouble(15);
  console.log(x);
}

このコードを実行すると、コンソールに

30

と出力されることが確認できると思います。
引数に15を入力し、関数内部で2倍された値をログに出力しているので、30が出力されるというわけです。