JavaScriptの関数入門｜定義・使い方・コールバック関数まで徹底解説

JavaScriptを学ぶ上で「関数」は欠かせない重要な概念です。関数を理解すれば、コードを効率的に書くことができ、再利用性も高まります。本記事では、関数の基本から応用までを初心者にも分かりやすく解説します。

1 JavaScriptの関数とは？
2 関数の基本的な定義方法
3 関数の引数と戻り値
- 3.1 1.引数のある関数
- 3.2 2.デフォルト引数
4 無名関数と即時関数（IIFE）
5 コールバック関数とは？
6 非同期処理とコールバック関数
7 高階関数（Higher-Order Function）
8 まとめ

JavaScriptの関数とは？

関数とは、一連の処理をまとめて名前をつけたものです。特定の動作を行うコードのかたまりであり、何度でも呼び出すことができます。

例えば、「ボタンをクリックしたときに画面にメッセージを表示する」という処理を関数にまとめれば、何度でもその動作を使い回すことができます。

関数の基本的な定義方法

JavaScriptでは、関数を定義する方法がいくつかあります。

1.`function` キーワードを使った定義

最も基本的な関数の定義方法は、function キーワードを使う方法です。

function sayHello() {
    console.log("こんにちは、JavaScript！");
}

この関数を呼び出すには、以下のように記述します。

sayHello();
// こんにちは、JavaScript！

2.関数式を使った定義

関数を変数に代入して定義することもできます。

const greet = function() {
    console.log("こんにちは、関数式！");
};

この場合、greet(); と記述すれば関数が実行されます。

3.アロー関数を使った定義

ES6（ECMAScript 2015）から導入されたアロー関数を使うと、より短い記述が可能です。

const greet = () => {
    console.log("こんにちは、アロー関数！");
};

アロー関数は、特にコールバック関数でよく使用されます。

関数の引数と戻り値

関数は、引数（ひきすう）を受け取り、処理を行い、結果を戻すことができます。

1.引数のある関数

function add(a, b) {
    return a + b;
}
console.log(add(3, 5)); // 8

この関数は、a と b という2つの引数を受け取り、その合計を返します。

2.デフォルト引数

引数が渡されなかった場合に備えて、デフォルト値を設定できます。

function greet(name = "ゲスト") {
    console.log("こんにちは、" + name + "さん！");
}

この関数を greet(); のように引数なしで呼び出すと、name の値が “ゲスト” になります。

無名関数と即時関数（IIFE）

無名関数とは、名前のない関数のことです。変数に代入して使うことが多いですが、一度だけ実行したい場合は、即時関数（IIFE: Immediately Invoked Function Expression）を使うと便利です。

(function() {
    console.log("これは即時実行される関数です！");
})();

コールバック関数とは？

コールバック関数とは、関数の引数として渡される関数のことです。

function executeCallback(callback) {
    console.log("関数を実行します。");
    callback();
}

executeCallback(function() {
    console.log("これはコールバック関数です！");
});

コールバック関数は、非同期処理（後述）やイベント処理で頻繁に使用されます。

非同期処理とコールバック関数

JavaScriptでは、時間がかかる処理（例: API呼び出し）を待たずに次の処理を実行できます。これを非同期処理といいます。

setTimeout(() => {
    console.log("3秒後に実行される処理");
}, 3000);

この例では、setTimeout によって3秒後に関数が実行されます。

高階関数（Higher-Order Function）

高階関数とは、関数を引数に取るか、関数を返す関数のことです。

function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
console.log(double(5)); // 10