JavaエンジニアのためのJavaScript高階関数入門！map・filter・reduceを徹底解説
山崎講師
こんにちは。ゆうせいです。
前回は「アロー関数」を解説しましたが、今回はJavaScriptの高階関数（こうかいかんすう）について学んでいきましょう！
Javaを学んだばかりの新人エンジニアにとって、「高階関数」という言葉はちょっと取っつきにくく感じるかもしれません。
でも、大丈夫。この記事を読み終える頃にはきっと「これは便利だ！」と感じているはずです！
高階関数ってなに？Javaとの違いは？
まず、高階関数（higher-order function）とは、次のような関数のことです：
「関数を引数に取る、または関数を戻り値として返す関数」
Java 8 以降にも「関数型インターフェース（例：Function<T, R>）」などで似たような考え方がありますね。
たとえばJavaなら…
List<String> names = Arrays.asList("Alice", "Bob", "Charlie");
names.stream().map(s -> s.toUpperCase()).forEach(System.out::println);
これがJavaScriptではよりシンプルに書けます！
JavaScriptの高階関数の代表例
JavaScriptで特によく使う高階関数は次の3つです：
| 関数名 | 説明 |
|---|---|
map | 配列の各要素を変換する |
filter | 条件に合う要素だけを取り出す |
reduce | 要素を集約して一つの値にする |
それぞれの使い方を、例え話や図を交えながら見ていきましょう！
map：配列を「変換」する関数
イメージ図
「たくさんの材料を別の形に加工する工場」のようなイメージです。
[1, 2, 3] → map(x => x * 2) → [2, 4, 6]
実際のコード
const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6]
Javaとの比較
List<Integer> list = Arrays.asList(1, 2, 3);
List<Integer> doubled = list.stream().map(x -> x * 2).collect(Collectors.toList());
JavaScriptの方が圧倒的に簡潔ですね！
filter：条件に合うものだけ残す
イメージ図
「ふるいにかける作業」だと思ってください。不要なものは落として、必要なものだけ残します。
[1, 2, 3, 4] → filter(x => x % 2 === 0) → [2, 4]
コード例
const numbers = [1, 2, 3, 4];
const even = numbers.filter(x => x % 2 === 0);
console.log(even); // [2, 4]
reduce：すべてを「ひとつにまとめる」
イメージ図
「1枚ずつカードを重ねて、最後に1つの山にする作業」です。
[1, 2, 3, 4] → reduce((acc, x) => acc + x, 0) → 10
コード例
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, current) => acc + current, 0);
console.log(sum); // 10
用語の意味
acc：累積値（accumulator）current：現在処理中の値0：初期値
Javaにも .reduce() はありますが、JavaScriptの方がより直感的です。
図でまとめる：高階関数3兄弟
| 関数名 | 主な用途 | 返り値 | 使用例 |
|---|---|---|---|
map | 各要素を変換 | 新しい配列 | arr.map(x => x * 2) |
filter | 条件で絞り込む | 条件に合う要素の配列 | arr.filter(x => x > 0) |
reduce | 集計や合算 | 単一の値 | arr.reduce((a, b) => a + b, 0) |
よくある疑問：for文との違いは？
たとえば for 文を使えば似たような処理も書けますよね？
const numbers = [1, 2, 3];
let doubled = [];
for (let i = 0; i < numbers.length; i++) {
doubled.push(numbers[i] * 2);
}
このようなコードでも問題ありませんが、高階関数を使うと以下のメリットがあります：
- コードが簡潔で読みやすくなる
- 関数型プログラミングの考え方に慣れる
- バグが起きにくくなる（状態を変更しない）
次に学ぶべきステップ
高階関数はモダンJavaScriptの基礎です。ここからさらにレベルアップするには：
- ネストされたmap/filter/reduceの組み合わせに挑戦してみる
- 配列以外の構造（Set, Map）との使い方も学ぶ
- コールバック関数や非同期処理（async/await）との相性を調べる
最後にひとこと
Java経験があるからこそ、高階関数の発想はきっとスムーズに理解できます！
むしろJavaScriptの方が「書くのが気持ちいい」と感じる人も多いんです。
実際にいろんな配列で map・filter・reduce を試して、手になじませていきましょう！
わからないところがあれば、いつでも聞いてくださいね。
次は「非同期処理（Promise・async/await）」に進んでみるのもオススメですよ！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
