名前付きの文のグループ。
関数 はコードの整理と再利用に役立ちます。例えば、関数を使えば「花を描く」というアイデアを簡単に表現できます:
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!