これまでは、JavaScriptの基本的な書き方、変数、データ型、演算子、条件分岐、繰り返し処理などを学んできました。この章では、関数について学びましょう。関数を使えば、一連の処理をひとまとめにして、名前を付けることができます。

1. 関数って何？

関数とは、一連の処理に名前を付けて、いつでも呼び出せるようにしたものです。例えるなら、自動販売機のようなものです。自動販売機にお金を入れてボタンを押すと、ジュースが出てきますよね。関数も同じように、入力を与えると、それに応じた出力を返してくれます。

関数を使うメリットは、主に以下の3つです。

1. コードの再利用: 同じ処理を何度も書く必要がなくなる。
2. コードの見通しが良くなる: 処理のまとまりに名前を付けることで、コードが読みやすくなる。
3. コードの修正が簡単になる: 処理の内容を変更したいとき、関数の中身を修正するだけで済む。

例えば、先ほど学んだ「1から10までの数字を表示する」処理を、毎回for文で書くのは大変ですよね。しかし、この処理を関数にしてしまえば、いつでも簡単に呼び出すことができます。

2. 関数の作り方

JavaScriptで関数を作るには、functionキーワードを使います。関数の基本的な構文は、以下のとおりです。

function 関数名(引数1, 引数2, ...) {
  // 実行する処理
  return 戻り値;
}

• 関数名: 関数の名前です。好きな名前を付けることができますが、分かりやすい名前を付けるようにしましょう。
• 引数（ひきすう）: 関数に渡す入力データです。複数指定することもできますし、何も指定しないこともできます。
• 実行する処理: 関数が呼び出されたときに実行される処理です。
• return: 関数の出力（戻り値）を返します。returnは省略することもできます。

例：2つの数を足し算する関数

実際に、簡単な関数を作ってみましょう。ここでは、2つの数を受け取って、それらを足し算した結果を返すaddという関数を作ります。

function add(x, y) {
  let result = x + y;
  return result;
}

この関数は、xとyという2つの引数を受け取ります。そして、xとyを足し算した結果を、resultという変数に格納し、returnで返しています。

例：引数がない関数

引数がない関数を作ることもできます。例えば、コンソールに「Hello!」と表示するだけのgreetという関数は、以下のように書けます。

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

この関数は、引数を受け取らず、ただコンソールに「Hello!」と表示するだけです。

例：戻り値がない関数

戻り値がない関数を作ることもできます。例えば、引数として受け取った名前を使って、挨拶メッセージをコンソールに表示するgreetWithNameという関数は、以下のように書けます。

function greetWithName(name) {
  console.log(`こんにちは、${name}さん！`);
}

この関数は、nameという引数を受け取り、それを使って挨拶メッセージを表示しますが、値を返しません。このような場合は、returnを省略することができます。