JS 関数を引数として渡す

JPKODA 編集部 May 7, 2026

関数を 引数 (Arguments) として渡すことは JavaScript のコアコンセプトであり、強力かつ柔軟なコード作成を可能にします。

これは 高階関数 (Higher-Order Functions) の基礎となります。高階関数とは、関数を引数として受け取る、あるいは関数を戻り値として返す関数のことです。この能力により、より抽象的で再利用性の高いコードを記述でき、効率的でメンテナンスしやすいアプリケーションを構築できます。

関数を引数として渡す方法を理解することで、モダンな JavaScript 開発に不可欠な高度なプログラミングテクニックを習得できます。

1. 「第一級オブジェクト」としての関数の理解

JavaScript において、関数は「第一級オブジェクト」として扱われます。これは、関数を他の 変数 (Variables) と全く同じように扱えることを意味します。関数を バリアブル に代入したり、引数として他の関数に渡したり、別の関数から返したりすることが可能です。この柔軟性こそが、高階関数を作成できる理由です。

1.1 変数としての関数

関数を引数として渡す詳細に入る前に、関数がバリアブルに代入できることを理解しておくのが重要です。

function greet(name) {
  return "こんにちは, " + name + "!";
}

// 関数 'greet' をバリアブル 'sayHello' に代入
let sayHello = greet;

// バリアブル 'sayHello' を使用して関数を呼び出す
console.log(sayHello("アリス")); // 出力: こんにちは, アリス!

この例では、greet という関数をバリアブル sayHello に代入しました。バリアブル sayHello は greet 関数への リファレンス (Reference) を保持しているため、この新しいバリアブル経由で関数を呼び出すことができます。

1.2 丸括弧 () の重要性

greet と greet() の違いを区別することは非常に重要です。

greet: 関数自体を指します。
greet(): 関数をコール (Call) または実行し、その戻り値を返します。

関数を引数として渡すときは、関数を呼び出した結果（greet()）ではなく、関数自体（greet）を渡します。

2. 関数を引数として渡す：基礎知識

核となる考え方は、ある関数を別の関数に引数として渡せるということです。別の関数を引数として受け取る関数は、高階関数と呼ばれます。

渡される関数は、通常「コールバック関数 (Callback Function)」と呼ばれます。これは、高階関数がその実行プロセスのどこかのタイミングで、渡された関数を「呼び戻す (Call back)」ためです。

function operate(num1, num2, operation) {
  return operation(num1, num2);
}

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

function subtract(a, b) {
  return a - b;
}

// 'add' 関数を引数として 'operate' に渡す
let sum = operate(5, 3, add); // sum は 8
console.log(sum);

// 'subtract' 関数を引数として 'operate' に渡す
let difference = operate(5, 3, subtract); // difference は 2
console.log(difference);

この例では：

operate は高階関数です。2つの数値と別の関数（operation）をパラメータ (Parameters) として受け取ります。
add と subtract は、それぞれ加算と減算を行う通常の関数です。
add や subtract を引数として operate に渡すことで、operate が動的に異なるオペレーションを実行できるようにしています。

2.1 アノニマス関数 (Anonymous Functions) を引数として渡す

名前のない関数である アノニマス関数 を直接引数として渡すこともできます。これは、その関数を特定の場所で一度だけ使用する場合に非常に一般的です。

function applyOperation(arr, operation) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(operation(arr[i]));
  }
  return result;
}

let numbers = [1, 2, 3, 4, 5];

// アノニマス関数を渡して配列の各数値を2乗する
let squaredNumbers = applyOperation(numbers, function(x) {
  return x * x;
});

console.log(squaredNumbers); // 出力: [1, 4, 9, 16, 25]

ここでは、function(x) { return x * x; } というアノニマス関数を applyOperation 関数に渡しています。この関数が配列の各 エレメント に対して平方演算を行います。

2.2 アロー関数 (Arrow Functions) を引数として渡す

ES6 以降、アロー関数 を使用することでアノニマス関数をより簡潔に記述でき、コードの可読性が向上します。

function transformArray(arr, transform) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(transform(arr[i]));
  }
  return result;
}

let numbers = [1, 2, 3, 4, 5];

// アロー関数を渡して配列の各数値を2倍にする
let doubledNumbers = transformArray(numbers, (x) => x * 2);

console.log(doubledNumbers); // 出力: [2, 4, 6, 8, 10]

この例は前述のものと似ていますが、簡潔にするためにアロー関数 (x) => x * 2 を使用しています。アロー関数は短くシンプルな操作に特に有効です。

2.3 関数を引数として渡すメリット

抽象化 (Abstraction): 高階関数は、具体的に何を実行するかという詳細を抽象化します。上記の operate や transformArray は「どのような操作か」を気にせず、単に「どう適用するか」に集中します。
再利用性 (Reusability): 異なるコールバック関数を渡すことで、同じ高階関数を再利用して異なる結果を得ることができます。
柔軟性 (Flexibility): 実行時に異なる関数を渡すことで、関数の振る舞いを動的に変更できます。
可読性 (Readability): アノニマス関数やアロー関数を引数として使用すると、シンプルな操作においてコードが簡潔になり、理解しやすくなります。

3. 高度な例とユースケース

3.1 カスタム比較関数を使用したソート

配列の sort メソッド (Method) は、ソート順をカスタマイズするために比較関数を引数として受け取ることができます。

let people = [
  { name: "チャーリー", age: 30 },
  { name: "ボブ", age: 25 },
  { name: "アリス", age: 35 }
];

// 年齢に基づいて人員配列をソート
people.sort(function(a, b) {
  return a.age - b.age;
});

console.log(people);
// 出力:
// [
//   { name: "ボブ", age: 25 },
//   { name: "チャーリー", age: 30 },
//   { name: "アリス", age: 35 }
// ]

この例では、sort メソッドが提供された比較関数を使用して要素の順序を決定しています。

3.2 DOM操作におけるイベントリスナー

Web開発において、イベントリスナー は特定のイベント（ボタンクリックなど）が発生した際に実行される関数です。これらのリスナーは addEventListener などのメソッドに引数として渡されます。

<!DOCTYPE html>
<html>
<head>
  <title>イベントリスナーの例</title>
</head>
<body>
  <button id="myButton">クリックしてね</button>
  <script>
    let button = document.getElementById("myButton");
    
    // ボタンにイベントリスナーを追加
    button.addEventListener("click", function() {
      alert("ボタンがクリックされました！");
    });
  </script>
</body>
</html>

ここでは、function() { alert(...); } というアノニマス関数が addEventListener に引数として渡されています。ボタンがクリックされた時に、この関数が実行されます。

3.3 タイマーと非同期操作

setTimeout や setInterval のような関数は、指定された遅延後や一定の間隔で実行されるコールバック関数を引数として受け取ります。

// 2秒後に関数を実行
setTimeout(function() {
  console.log("このメッセージは2秒後に表示されます。");
}, 2000);

// 1秒ごとに関数を実行
let intervalId = setInterval(function() {
  console.log("このメッセージは1秒ごとに表示されます。");
}, 1000);

// 5秒後にインターバルを停止
setTimeout(function() {
  clearInterval(intervalId);
  console.log("インターバルが停止しました。");
}, 5000);