Blog Article

JavaScript の関数とは？基本からコールバック関数まで解説

2025年03月15日

はじめに

JavaScript を学習していると、function、引数、戻り値、コールバック関数など、関数に関するさまざまな用語が登場します。特にコールバック関数は、setTimeout() や addEventListener() などでも頻繁に登場するため、JavaScript を理解するうえで重要な概念です。この記事では、まず関数の基本的な仕組みを確認し、引数や戻り値、コールバック関数へと順番に理解を深めていきます。

参考リンク

JavaScript の関数とは？

JavaScript の関数は、複数の処理をひとまとまりにして、必要なときに実行できるようにしたものです。関数には値を渡すことができ、その値を使って処理した結果を返すこともできます。

関数を使うことで、同じ処理を何度も書く必要がなくなり、コードの再利用性を高められます。また、処理ごとに関数へ分けることで、コードの役割が分かりやすくなり、可読性も向上します。

関数を定義する

関数を定義する方法の一つに、function キーワードを使用する関数宣言があります。

コード例

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

この sayHello 関数は、console.log() を使って「こんにちは！」と表示する処理をまとめたものです。

ただし、関数を定義しただけでは処理は実行されません。実際に処理を実行するには、関数を呼び出します。

コード例

sayHello();

このように関数名の後ろに () を付けることで、関数を呼び出せます。

関数に引数を渡す

関数には、外部から値を渡すことができます。この値を引数といいます。

引数を利用すると、同じ処理を異なる値に対して実行できるため、関数をより柔軟に利用できます。

引数を受け取る関数

例えば、名前を受け取って挨拶する関数を作ってみます。

コード例

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

greet("太郎");

この場合、name が引数を受け取るためのパラメータで、"太郎" が実際に渡している値です。

処理の流れは次のようになります。

greet("太郎") を実行します。
"太郎" が name に渡されます。
${name} の部分に "太郎" が埋め込まれます。
こんにちは、太郎さん! と表示されます。

このように引数を利用することで、同じ関数に異なる値を渡して処理できます。

関数から戻り値を返す

関数は、処理を実行するだけではなく、処理した結果を呼び出し元へ返すこともできます。この返された値を戻り値といいます。

戻り値を返すには、return を使用します。

return で処理結果を返す

例えば、2 つの数値を足した結果を返す関数を作ります。

コード例

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

const result = add(3, 5);

console.log(result); // 8

add(3, 5) を実行すると、関数内で 3 + 5 が計算され、その結果である 8 が return によって呼び出し元へ返されます。

そして、その戻り値を result に代入しています。

ここで重要なのは、関数の中で計算した結果を、関数の外でも利用できるという点です。

一方、単純に画面やコンソールへ表示するだけで、結果を呼び出し元へ渡す必要がない場合は、必ずしも return を使う必要はありません。

コード例

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

greet("太郎");

この関数はメッセージを表示することが目的なので、戻り値を利用していません。

コールバック関数とは？

ここまでの内容では、関数を直接呼び出していました。

sayHello();

JavaScript では、関数そのものを別の関数へ値として渡すこともできます。このように、別の関数に引数として渡され、その関数から呼び出される関数をコールバック関数といいます。

🔰一言で言うと「関数に渡す関数」です。

関数を引数として渡す

例えば、次のようなコードを考えてみます。

コード例

function greet(name, callback) {
  console.log(`こんにちは、${name}さん!`);
  callback();
}

function afterGreet() {
  console.log("挨拶が完了しました。");
}

greet("太郎", afterGreet);

この例では、greet() に "太郎" と afterGreet を渡しています。

"太郎" は通常の値ですが、afterGreet は関数です。

greet() の中では、まず挨拶を表示し、その後に callback() を実行しています。

つまり、次のような流れになります。

greet("太郎", afterGreet)
        ↓
「こんにちは、太郎さん!」を表示
        ↓
callback() を実行
        ↓
afterGreet() が実行される
        ↓
「挨拶が完了しました。」を表示

このように、関数を別の関数へ渡しておき、渡された側の関数から実行する仕組みがコールバックです。

コールバック関数はどこで使われる？

コールバック関数は、非同期処理やイベント処理など、さまざまな場面で利用されています。

ただし、コールバック関数そのものが非同期処理というわけではありません。先ほどの greet() の例のように、別の関数からすぐに呼び出すこともできます。

非同期処理で使う

JavaScript では、setTimeout() などでコールバック関数を利用できます。

コード例

setTimeout(function () {
  console.log("3秒後に実行されました。");
}, 3000);

ここでは、setTimeout() の第 1 引数に関数を渡しています。この関数がコールバック関数です。

setTimeout() は指定した時間が経過した後に、その関数を実行するようにスケジュールします。3000 は 3,000 ミリ秒、つまり 3 秒を表します。

また、setTimeout() 自体が 3 秒間処理を停止するわけではありません。タイマーを設定するとすぐに処理を返し、指定した時間が経過した後にコールバック関数が実行されます。

イベント処理で使う

コールバック関数は、ブラウザ上のイベント処理でもよく使用されます。

例えば、ボタンがクリックされたときに処理を実行する場合です。

コード例

document.getElementById("myButton").addEventListener("click", function () {
  console.log("ボタンがクリックされました！");
});

addEventListener() の第 1 引数には監視するイベントの種類である "click" を渡し、第 2 引数にはクリックされたときに実行する関数を渡しています。

この場合、addEventListener() を実行した瞬間に関数が呼び出されるわけではありません。ボタンがクリックされたときに、登録しておいた関数がブラウザによって呼び出されます。

このように、

addEventListener()
        ↓
「click」を監視
        ↓
ボタンがクリックされる
        ↓
登録した関数を実行

という流れになります。

関数を理解すると JavaScript のコードが読みやすくなる

JavaScript の関数を理解すると、単純な関数宣言だけでなく、setTimeout()、addEventListener()、配列の map() など、さまざまなコードの意味を理解しやすくなります。

特に重要なのは、関数は値として扱えるという考え方です。

関数を変数に代入したり、別の関数へ引数として渡したり、戻り値として返したりできます。その中でも、関数を別の関数へ渡して実行してもらう仕組みがコールバック関数です。

今後 JavaScript を学習していくと、アロー関数、Promise、async / await などにも関数が登場します。まずは「関数を定義する」「引数を渡す」「戻り値を受け取る」「関数を別の関数へ渡す」という 4 つの基本を理解しておくと、それらを学ぶときにもつながりやすくなります。

まとめ

JavaScript の関数は、処理をひとまとまりにして、必要なときに実行できるようにする仕組みです。関数には引数を渡すことができ、return を使えば処理した結果を戻り値として返せます。

また、JavaScript では関数そのものを値として扱えるため、別の関数へ引数として渡すこともできます。このように渡された関数がコールバック関数です。

コールバック関数は、setTimeout() のような非同期処理や、addEventListener() のようなイベント処理で頻繁に利用されます。

まずは「関数は処理をまとめるもの」だけでなく、「値を受け取り、値を返し、場合によっては別の関数へ渡すこともできるもの」と理解しておくと、JavaScript の関数に対する理解が一段深まります。

JavaScript