JavaScriptの関数とは？初心者にも分かりやすく解説！

JavaScriptを学び始めると、「関数」という言葉をよく耳にします。 関数はプログラムをスッキリまとめ、繰り返し使える便利な機能です。 この記事では、初心者にもわかりやすく関数の基本を解説します。

1. 関数とは？

関数とは、特定の処理をひとまとめにして、必要なときに呼び出せる機能 です。

例えば、料理のレシピを考えてみてください。 「カレーを作る」という一連の手順をレシピとしてまとめると、 次からはそのレシピ通りに作るだけで、簡単にカレーを作ることができます。

プログラムでも、同じ処理を何度も書かずに済む ように関数を使います。

2. JavaScriptの関数の基本構文

関数を作る（定義する）ときは、以下のように書きます。

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

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

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

この関数は、a と b という 引数（ひきすう） を受け取り、 その合計を return で返します。

関数を使う（呼び出す）方法

let result = add(3, 5);
console.log(result); // 8 が表示される

add(3, 5) を実行すると、3 + 5 の計算結果 8 が result に代入されます。

3. 関数の種類

JavaScriptにはいくつかの関数の書き方があります。

① 通常の関数（function 文）

function greet(name) {
    return "こんにちは、" + name + "さん！";
}

console.log(greet("太郎")); // こんにちは、太郎さん！

② 関数式（無名関数）

関数を 変数に代入 する書き方です。

const greet = function(name) {
    return "こんにちは、" + name + "さん！";
};

console.log(greet("花子"));

③ アロー関数（ES6以降）

const greet = (name) => {
    return "こんにちは、" + name + "さん！";
};

アロー関数は短く書けるので、最近のJavaScriptではよく使われます。

さらに短縮形も可能です（処理が1行なら {} と return を省略できる）。

const greet = name => "こんにちは、" + name + "さん！";
console.log(greet("次郎"));

4. return の役割

return は、関数の結果を返す ために使います。

function multiply(x, y) {
    return x * y;
}

let answer = multiply(4, 5);
console.log(answer); // 20

return がないと、関数の結果を受け取ることができません。

function multiply(x, y) {
    console.log(x * y);
}

let result = multiply(4, 5);
console.log(result); // undefined（何も返さないため）

5. 引数なしの関数

引数がなくても、関数を作ることができます。

function sayHello() {
    return "こんにちは！";
}

console.log(sayHello()); // こんにちは！

6. まとめ

✅ 関数は処理をまとめて、何度でも使えるようにする機能
✅ function 関数名(引数) { 処理 } で定義する
✅ return で計算結果を返す（省略すると undefined）
✅ アロー関数（=>）を使うと短く書ける

関数を使いこなすことで、コードがシンプルで分かりやすくなります。 ぜひ、色々な関数を作って試してみてください！