TypeScript:4.コールバック関数

コールバック関数ってそもそも何？

「あとで呼ばれる関数」＝それがコールバック関数（callback function）
・他の関数や処理に引数として渡す関数
・必要なタイミングで「呼び出される」

例

exe.ts

class Food {
    constructor(
        private element: HTMLDivElement,
        private onClick: (el: HTMLDivElement) => void
    ) {
        this.element.addEventListener('click', () => {
            this.element.classList.add('food--active');
            this.onClick(this.element);
        });
    }
}

class Foods{
    foods: NodeListOf<HTMLDivElement>;
    activeFood: HTMLDivElement[] = [];

    constructor() {
        this.foods = document.querySelectorAll<HTMLDivElement>('.food');
        this.foods.forEach(element => {
            
            new Food(element, (clickedElement) => {
                if (!this.activeFood.includes(clickedElement)){
                    this.activeFood.push(clickedElement);
                }
                console.log(this.activeFood);
            });

        });
    }
}

コールバック関数流れを説明

1.FoodsクラスがFoodインスタンスを作るときに関数を渡す

exe.ts

new Food(element, (clickedElement) => {
    if (!this.activeFood.includes(clickedElement)){
        this.activeFood.push(clickedElement);
    }
    console.log(this.activeFood);
});

「コールバック関数」Foodに「クリックされたらこれやってね」と事前に渡している

2.Foodクラスがクリックされると

exe.ts

this.element.addEventListener('click',() => {
    this.element.classList.add('food--active');
    this.onClick(this.element);
});

このthis.onClick(...)が実際にコールバック関数を実行している場面

3.呼び出された結果、さっき渡していた(clickedElement) => {..}が実行される

exe.ts

(clickedElement) => {
    if (!this.activeFood.includes(clickedElement)){
        this.activeFood.push(clickedElement);
    }
    console.log(this.active);
}

まとめ

Foods：Foodに「クリックされたらこれやって」と関数を渡す
Food ：クリックされたら、渡された関数を呼び出す
コールバック関数：「後で呼ばれる関数」＝この連携のカギになる