function

名前付きの文のグループ。

関数 はコードの整理と再利用に役立ちます。例えば、関数を使えば「花を描く」というアイデアを簡単に表現できます:

function drawFlower() {
  // テキストのスタイルを設定する。
  textAlign(CENTER, CENTER);
  textSize(20);

  // 花の絵文字を描く。
  text('🌸', 50, 50);
}

関数のヘッダーは function キーワードで始まります。関数名 drawFlower の後に括弧 () と波括弧 {} が続きます。 波括弧の間のコードを関数の本体と呼びます。関数の本体は、次のように関数が呼び出されたときに実行されます:

drawFlower();

関数はヘッダーにパラメータを追加することで入力を受け取ることができます。 パラメータは、関数が呼び出されるときに提供される値のプレースホルダーです。例えば、drawFlower() 関数に 花のサイズのパラメータを含めることができます:

function drawFlower(size) {
  // テキストのスタイルを設定する。
  textAlign(CENTER, CENTER);

  // sizeパラメータを使用する。
  textSize(size);

  // 花の絵文字を描く。
  text('🌸', 50, 50);
}

パラメータは関数の宣言の一部です。引数は関数を呼び出すコードによって提供されます。関数が呼び出されると、引数が パラメータに割り当てられます:

// 引数20がパラメータsizeに割り当てられる。
drawFlower(20);

関数は複数のパラメータをカンマで区切って持つことができます。パラメータは どのような型でも構いません。例えば、drawFlower() 関数は花のx座標とy座標、そしてサイズに対して Number 型のパラメータを受け取ることができます:

function drawFlower(x, y, size) {
  // テキストのスタイルを設定する。
  textAlign(CENTER, CENTER);

  // sizeパラメータを使用する。
  textSize(size);

  // 花の絵文字を描く。
  // xとyパラメータを使用する。
  text('🌸', x, y);
}

関数は return 文を追加することで出力を生成することもできます:

function double(x) {
  let answer = 2 * x;
  return answer;
}

return の後に続く式は、他の場所で使用される出力を生成できます。例えば、double() 関数の出力を 変数に割り当てることができます:

let six = double(3);
text(`3 x 2 = ${six}`, 50, 50);

実例

Notice any errors or typos? Please let us know. Please feel free to edit src/core/reference.js and open a pull request!

関連するリファレンス