高階関数（Higher-Order Function）とは何か？―JavaScript初心者のための完全ガイド
山崎講師
こんにちは。ゆうせいです。
JavaScriptの学習を進めていると、ある日こんな言葉に出会います。
「高階関数（Higher-Order Function）」
「名前が難しそう…」「なんか上級者っぽい」「覚える必要あるの？」と思ったあなた、大丈夫です！
実はこの考え方、JavaScriptの“自由さ”と“強力さ”を支える超重要キーワードなんです。
今回は、高階関数とは何か・なぜ使うのか・どう使うのかをやさしく、例えや図を使って解説します。
結論から言うと：高階関数とは？
「関数を引数にとる、または関数を戻り値として返す関数」のことです。
つまり、関数を“値”として扱う関数が「高階関数」なんですね。
高階関数の定義を2つのポイントで整理！
| 条件 | 説明 | 例 |
|---|---|---|
| 1. 関数を引数として受け取る | コールバック関数を渡す | Array.prototype.map()など |
| 2. 関数を戻り値として返す | 新しい関数を返す関数 | クロージャ、カリー化など |
例で理解しよう！
1. 関数を引数にとる関数（例：コールバック）
function process(fn) {
fn(); // 引数の関数を呼び出す
}
process(function () {
console.log("呼ばれました！");
});
この process 関数は、「関数を引数にとって」「あとでそれを呼び出す」…つまり高階関数です！
2. 関数を返す関数（例：クロージャ）
function multiply(x) {
return function (y) {
return x * y;
};
}
const double = multiply(2);
console.log(double(5)); // → 10
この multiply 関数は、新しい関数を作って返すので、やはり高階関数です。
なぜ高階関数が重要なのか？
✅ 理由1：コードの再利用がしやすくなる
function repeat(n, action) {
for (let i = 0; i < n; i++) {
action(i);
}
}
repeat(3, console.log);
// 0
// 1
// 2
どんな処理を繰り返すかを後から決められる柔軟さ！
✅ 理由2：配列操作が強力になる（map, filter, reduceなど）
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]
map はまさに高階関数！
配列に対して「どう変換するか」という関数を渡すことで、ループよりも読みやすくて強力な処理ができます。
✅ 理由3：非同期処理やイベント処理の中心にある
setTimeout(() => {
console.log("1秒後に表示");
}, 1000);
setTimeout は 関数を引数に受け取る＝高階関数です！
数学的にも「関数の中に関数を入れる」ことは自然！
数式イメージ
関数fが関数gを受け取る：
f(g) ⇒ g(引数)
または、
f(x) = y を返すような g を返す → f(x) = g(x)
という構造。高階関数は“関数で関数を操作する”概念なんですね。
図でイメージ：高階関数の働き
┌─────┐ ┌────────────┐
引数: │関数A│ ───▶──▶ │ 高階関数F │ ───▶──▶ 処理結果や新しい関数
└─────┘ └────────────┘
または、
┌────────────┐
│ 高階関数F │ ───▶──▶ 戻り値: 新しい関数
└────────────┘
よく使われる高階関数一覧
| 関数名 | 役割 | 使用例 |
|---|---|---|
map() | 要素を変換する | [1,2,3].map(x => x*2) |
filter() | 条件に合う要素を抽出 | [1,2,3].filter(x => x > 1) |
reduce() | 配列を1つの値に集約 | [1,2,3].reduce((a,b) => a+b) |
forEach() | 各要素に対して関数を実行 | [1,2,3].forEach(console.log) |
setTimeout() | 遅延処理 | setTimeout(() => {}, 1000) |
まとめ：高階関数とは「関数を操作する関数」！
- 関数を引数にとる or 戻り値に返す関数
- JavaScriptの自由な関数の使い方の中心
- mapやfilterなどは全部高階関数！
- 非同期処理やクロージャの基礎にもなる概念
今後の学習のヒント
さらに理解を深めたい方は、以下のテーマも学んでみてください！
- クロージャ（Closure）とは何か
- カリー化（Currying）の考え方
- Promiseと高階関数の連携（非同期処理）
- 関数型プログラミング（Functional Programming）入門
高階関数は、JavaScriptだけでなく多くのモダン言語で使われる重要な考え方。
少しずつ「関数を扱う関数」に慣れていけば、あなたのコードはより柔軟に、より洗練されたものになりますよ！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール