JavaScriptコールバック

「後でまた電話します！」

コールバックは、別の関数に引数として渡される関数です。

この手法により、関数は別の関数を呼び出すことができます。

コールバック関数は、別の関数が終了した後に実行できます。

関数シーケンス

JavaScript関数は、定義された順序ではなく、呼び出された順序で実行されます。

この例では、最終的に「Goodbye」が表示されます。

例

function myFirst() {
  myDisplayer("Hello");
}
    
function   mySecond() {
    myDisplayer("Goodbye");
}
    
myFirst();
mySecond();

自分で試してみる»

この例では、最終的に「Hello」が表示されます。

例

function myFirst() {
  myDisplayer("Hello");
}
    
function   mySecond() {
    myDisplayer("Goodbye");
}
    
mySecond();
myFirst();

自分で試してみる»

シーケンス制御

関数をいつ実行するかをより適切に制御したい場合があります。

計算を行い、結果を表示するとします。

電卓関数 (myCalculator)を呼び出して結果を保存し、別の関数 (myDisplayer) を呼び出して結果を表示することができます。

例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
    
function myCalculator(num1, num2) {
  let sum = num1 + num2;
  return sum;
}
    
let result = myCalculator(5, 5);
myDisplayer(result);

自分で試してみる»

または、電卓関数 (myCalculator)を呼び出し、その電卓関数に表示関数 (myDisplayer)を呼び出すこともできます。

例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML   = some;
}
    
function myCalculator(num1, num2) {
    let sum = num1 + num2;
    myDisplayer(sum);
}
    
myCalculator(5, 5);

自分で試してみる»

上記の最初の例の問題は、結果を表示するために 2 つの関数を呼び出す必要があることです。

2 番目の例の問題は、電卓関数による結果の表示を防ぐことができないことです。

ここでコールバックを導入します。

JavaScriptコールバック

コールバックは、別の関数に引数として渡される関数です。

myCalculatorコールバックを使用すると、コールバック( ) で計算機関数(myCallback)を呼び出し、計算の終了後に計算機関数にコールバックを実行させることができます。

例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML   = some;
}
    
function myCalculator(num1, num2, myCallback) {
    let sum = num1 + num2;
    myCallback(sum);
}
    
myCalculator(5, 5, myDisplayer);

自分で試してみる»

上記の例では、コールバック関数myDisplayerと呼ばれます。

これは引数myCalculator()として渡されます。

ノート

関数を引数として渡すときは、括弧を使用しないでください。
右: myCalculator(5, 5, myDisplayer);
間違い: myCalculator(5, 5, myDisplayer());

例

// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
    
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
    
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
    
// Keep only positive numbers
function removeNeg(numbers, callback) {
  const myArray = [];
  for (const x of numbers) {
    if (callback(x)) {
      myArray.push(x);
    }
  }
  return myArray;
}

自分で試してみる»

上記の例では、コールバック関数(x) => x >= 0です。

これは引数removeNeg()として渡されます。

コールバックを使用する場合

上記の例は、あまり面白いものではありません。

これらはコールバック構文を説明するために簡略化されています。

コールバックが本当に威力を発揮するのは、ある関数が別の関数を待つ必要がある (ファイルのロードを待つなど) 非同期関数です。

非同期関数については、次の章で説明します。

人気オンラインプログラミングスクールランキング

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

HTML and CSS

Javascript

Backend

プロンプトエンジニアリング

JavaScriptコールバック

関数シーケンス

例

例

シーケンス制御

例

例

JavaScriptコールバック

例

ノート

例

コールバックを使用する場合

プログラミング学習を加速させる

チュートリアル