プレゼンテーションシナリオ: スライド67、68、69、70

スライド67、68、69、70では、JavaScript関数について説明します。構造、関数の呼び出し方、パラメータ、戻り値について見ていきます。

一般的な構文（関数宣言）

function functionName(parameters1, parameters2, ...) {
    // 関数本体: 実行される命令
    return result;
}

関数はfunctionキーワードで定義され、その後に関数名、丸括弧 ( )、そして波括弧 { }が続きます。

関数の構成要素：

  • function → 関数を宣言するための必須キーワード。
  • functionName → 関数の名前（自分で命名します。意味が明確で、変数命名規則に従うことが推奨されます）。
  • parameters → （入力）括弧の中に渡されるパラメータのリスト。空にすることもできます。
  • { ... } → 関数内のコードブロックで、命令を含みます（関数本体）。
  • return → （出力）関数を呼び出した場所に値を返します。returnがない場合、関数はデフォルトでundefinedを返します。
  • result → 戻り値を受け取るための変数で、自分で命名でき、柔軟に変更できます。

関数の例

例1: パラメータなしの関数

function sayHello() {
    console.log("Hello!");
}
sayHello();
// パラメータなしの関数は「関数名」+ ()の構文で呼び出します

例2: パラメータありの関数

function greet(name) {
    console.log("Hello " + name + "!");
}
greet("Thu"); // → こんにちは Thu!
// パラメータありの関数を呼び出します。"Thu"は渡される引数です

例3: returnのある関数

function add(a, b) {
    return a + b;
}
let sum = add(3, 4); // 関数を呼び出してreturnを受け取る
console.log(sum); // → 7

一般的なルールのまとめ

基本構造:

function name(params) {
    // code
    return result;
}
  • 関数はname(arguments)で呼び出します。
  • parameters = 定義時のパラメータ。
  • arguments = 呼び出し時に渡される値。
  • returnは関数の外に結果を返すために使用します。
  • resultはreturnからの戻り値を受け取る変数名です。この変数名は柔軟に変更でき、必ずしもresultである必要はありません。

戻り値（Return Value）

関数はreturnキーワードを使用して、呼び出し元に結果を返すことができます。

returnがない場合、関数はデフォルトでundefinedを返します。

例：

function add(a, b) {
    return a + b;
}

let sum = add(5, 3);
console.log(sum); // 8

右側の図の例では：

  • a + bは戻り値を計算するための式です
  • returnは結果8を外部に送ります。
  • sumは変数名で、プログラマーが戻り値を受け取るために命名します。

なぜパラメータとreturnが必要か？

パラメータ: 関数を柔軟にし、さまざまな状況に対応できるようにします。

Return: 関数が結果を返すことで、他の場所で引き続き使用できるようにします。戻り値は変数に保存し、何度も再利用できます。

パラメータ（Parameters）

パラメータは、関数定義時に丸括弧 ()内で宣言される特別な変数です。

関数を呼び出すとき、値（引数）を渡すと、それらの値がパラメータに割り当てられます。

例：

function greet(name) {
    console.log("Hello " + name);
}

greet("Thu");   // Hello Thu
greet("Minh");  // Hello Minh

ここでは：

  • nameがパラメータ（parameter）です。
  • "Thu"、"Minh"が引数（arguments）です。

1つの関数に複数のパラメータを持つことができます。例：

function add(a, b) {
    console.log(a + b);
}

add(2, 3);   // 5
add(10, 20); // 30

以上で、JavaScriptにおける関数の構造、関数の呼び出し方、パラメータ、戻り値についての説明を終わります。