Zenn
👔

[JavaScript]コールバック関数/高階関数とは （備忘録）

に公開
JavaScript
初心者
メモ
tech

１．高階関数 とは

・関数を引数として受け取る、または、関数を戻り値として返す関数のことを高階関数といいます。

２．コールバック関数 とは

①．ある関数（例：関数A）に引数として渡される関数（例: 関数B）のことをコールバック関数と呼びます。
※関数A = 高階関数 です。
②．重要なのは、「関数Aの中で関数Bが呼び出される」という点です。
③．単に関数を引数として渡すだけではなく、関数Aの処理の中で関数Bを適切なタイミングで実行するのがコールバック関数の特徴です。

３．サンプルプログラム

〇例１：アロー関数を引数として受け取る高階関数

Sample_1.js
let nums = [1, 2, 3, 4, 5];

const calculation = value => value + 10;
let result_1 = nums.map(calculation);

let result_2 = nums.map(num => num * 2);

console.log(result_1);
console.log(result_2);
実行結果
[ 11, 12, 13, 14, 15 ]
[ 2, 4, 6, 8, 10 ]

〇例２：関数を戻り値として返す高階関数

Sample_2.js
// 高階関数
function calculation(value) {
    return function(num) {
        return value * num;
    };
}

const double = calculation(2);
const triple = calculation(3);

console.log(double(5));
console.log(triple(5));
実行結果
10
15

〇例３：高階関数とコールバック関数を分けて作成

Sample_3.js
// 高階関数
function hello(callback){
    console.log("こんにちは。");
    // コールバック関数messageを呼び出す
    callback();
}

// コールバック関数
function message(){
    console.log("JavaScriptを学習中。");
}

/*
   高階関数helloを呼び出す
   引数にコールバック関数messageを指定
*/
hello(message);
実行結果
こんにちは。
JavaScriptを学習中。

〇例４：引数に直接、コールバック関数を記述

Sample_4.js
//　高階関数
function hello(callback) {
    // コールバック関数を呼び出す
    callback();
    console.log("JavaScriptを学習中。");
}

/*
    高階関数helloを呼び出す
    引数に直接、コールバック関数を記述
*/
hello(function() {
    console.log("こんにちは。");
});
実行結果
こんにちは。
JavaScriptを学習中。

〇例５：

Sample_5.js
// 高階関数
function calc(callback, value_1, value_2){
    let result = value_1 + value_2;
    // 引数に計算結果を保存し、コールバック関数を呼び出す
    callback(result);
}

// コールバック関数
function display(result) {
    console.log(result);
}

/*
   高階関数calcを呼び出す
   引数にコールバック関数displayと計算で使用する数値を記述
*/
calc(display, 100, 900);
実行結果
1000

４．高階関数/高階関数を使用した簡単なWebアプリ

Sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <!--HTML5より前の文字コードの指定方法 -->
    <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script src="main.js"></script>
</head>
<body>
    <div class="content">
        <div id="lesson">計算結果を表示</div>
        <!--ボタンを押下し、高階関数を呼び出す -->
        <button type="button" class="btn" onclick="calc(displayPage, 100, 900)">計算</button>
    </div>
</body>
main.js
// 高階関数
function calc(callback, value_1, value_2){
    let result = value_1 + value_2;
    // 引数に計算結果を保存し、コールバック関数を呼び出す
    callback(result);
}

// コールバック関数
function displayPage(result) {
    document.getElementById("lesson").innerText = result;
}
stylesheet.css
.content { 
    text-align: center;
}

.btn {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background-color: lightblue;
}

〇操作画面

〇実行環境
・OS: Windows 11（バージョン 24H2）
・ブラウザ: Microsoft Edge（バージョン 136.0.3240.76）
・エディタ: Visual Studio Code（バージョン 1.100.2）

５．参考

・【JavaScriptの入門】コールバック関数
・JavaScriptの高階関数とは
・Learn JavaScript CALLBACKS in 7 minutes! 🤙
・#48 What are Higher Order Functions? | JavaScript Full Tutorial

６．その他

・実行環境

Discussion