お問い合わせ
お問い合わせ
ホーム > JavaScript > JavaScriptの高階関数とは？基本から実務での使い方まで徹底解説

JavaScriptの高階関数とは？基本から実務での使い方まで徹底解説

JavaScript
抽象的なネットワーク構造の中で、複数のノードが線でつながり、関数同士が連携して処理を構成しているイメージ
関数を組み合わせて柔軟な処理を実現する高階関数の概念を表現したビジュアル

JavaScriptにおける「高階関数」は、関数をより柔軟に扱うための重要な概念です。配列操作や非同期処理など、実務でも頻繁に登場するため、基礎から理解しておくことが重要です。

本記事では、高階関数の基本から具体的な使い方までを、初心者にもわかりやすく解説します。

高階関数とは

高階関数とは、以下のいずれかを満たす関数のことです。

  • 関数を引数として受け取る
  • 関数を戻り値として返す

JavaScriptでは関数も「値」として扱えるため、このような柔軟な処理が可能になります。

関数を引数に取る高階関数

関数を引数として受け取ることで、処理の中身を外部から差し替えることができます。

基本例

// higher-order-function-argument.js

function execute(callback) {
  callback();
}

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

execute(greet); // こんにちは

この例では、execute関数が高階関数です。
greet関数を引数として受け取り、内部で実行しています。

実務でよく使う例（配列のforEach）

// for-each-example.js

const numbers = [1, 2, 3];

numbers.forEach(function (num) {
  console.log(num * 2);
});

// 出力
// 2
// 4
// 6

forEachは配列の各要素に対して処理を実行する高階関数です。

※配列の繰り返し処理については、以下の記事で詳しく解説しています。
→ JavaScriptのforEachとは？配列ループの基本

関数を返す高階関数

高階関数は、関数を返すこともできます。

基本例

// higher-order-function-return.js

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

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

このように、関数を返すことで「関数を生成する関数」を作ることができます。

クロージャとの関係

上記の例は「クロージャ」と密接に関係しています。
外側の関数の変数（multiplier）を、内側の関数が保持し続ける仕組みです。

※クロージャについては、以下の記事で理解を深めると効果的です。
→ JavaScriptの関数とは？基本と使い方

高階関数を使うメリット

高階関数を使うことで、コードの柔軟性と再利用性が大きく向上します。

処理の共通化ができる

// reusable-logic.js

function calculate(a, b, operation) {
  return operation(a, b);
}

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

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

console.log(calculate(2, 3, add));      // 5
console.log(calculate(2, 3, multiply)); // 6

同じ関数で異なる処理を実現できます。

コードの見通しが良くなる

処理の内容を関数として切り出すことで、コードが読みやすくなります。

関数型プログラミングの基礎になる

高階関数は、関数型プログラミングの重要な要素です。
mapやfilterなどの配列メソッドもすべて高階関数です。

よく使う高階関数一覧

実務でよく使われる代表的な高階関数を紹介します。

map（配列を変換する）

// map-example.js

const numbers = [1, 2, 3];

const doubled = numbers.map(function (num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6]

filter（条件に一致する要素を抽出する）

// filter-example.js

const numbers = [1, 2, 3, 4];

const evenNumbers = numbers.filter(function (num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

reduce（配列を1つの値にまとめる）

// reduce-example.js

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce(function (acc, num) {
  return acc + num;
}, 0);

console.log(sum); // 10

高階関数とアロー関数

高階関数はアロー関数と組み合わせることで、より簡潔に書くことができます。

// arrow-function-example.js

const numbers = [1, 2, 3];

const doubled = numbers.map((num) => num * 2);

console.log(doubled); // [2, 4, 6]

※アロー関数については、以下の記事で詳しく解説しています。
→ JavaScriptのアロー関数とは？基本から使い方まで解説

高階関数を理解するためのポイント

高階関数を理解するうえで重要なポイントは次の3つです。

  • 関数は「値」として扱える
  • 関数を引数・戻り値にできる
  • 処理を外から渡せることで柔軟性が生まれる

この3点を押さえることで、多くのコードが理解しやすくなります。

まとめ

JavaScriptの高階関数は、柔軟で再利用性の高いコードを書くための基礎となる概念です。

  • 関数を引数に取る・返す関数を高階関数という
  • 配列メソッド（map・filterなど）はすべて高階関数
  • コードの共通化・簡潔化に役立つ

特に配列操作や非同期処理では必須の知識となるため、確実に理解しておくことが重要です。

関連記事