More than 5 years have passed since last update.

コールバック関数が何回やっても覚えられなかった自分用に記事を書きたかった

Last updated at 2019-03-24Posted at 2019-03-24

JavaScriptを学んでいる途中でコールバック関数にドハマりしたので自分用に記事を書きました。

そもそもコールバック関数とは

コールバック関数とは、「関数の引数として関数を渡すこと」です。
・
・
・
そもそもこの文章の意味が分からない。

そう、JavaScript初心者には、この文章ですら意味不明。

とりあえず分かったのは、例えば関数Bを、関数Aのあとで、しかも確実に実行したい場合などに使われる方法であるということです。
様々な理由により、関数Bの方が先に実行されてしまい、不具合を起こしてしまうケースというのが存在する、ということでした。

どういうときに使うのかは分かった、しかしどう動いているのかは未だに分からない。
こういう時に頼りになるのは先人の知恵。

という訳で早速「コールバック関数」で検索をしたものの、これも全く分からない。

**「ねっ？簡単でしょ？」と言わんばかりにどの記事もコードが書いてはあるものの、「そうじゃない！もっと簡単なところから教えてください！（泣）」**という私の個人的なニーズに応えられる記事は見つからず。

最終的には何となく分かったけど、もっと簡単に書いてある記事があっても良いのでは…
自分みたいにJavaScriptを勉強し始めた人の中にも、コールバック関数で躓いている人がいるはず…~~いや、いてほしい~~

そんな中で自分なりに考えて辿り着いた、理解の方法がこの記事になります。
多分、これが一番簡単だと思います。

自分がそうだったので書いておきますが、コールバック関数が理解できない人は「引数」がちゃんとは分かっていないのかも知れません。
例えばこんな簡単な関数を考えてみましょう。

function show(x) {
  console.log(x);
}

この関数ではxが「引数」なので、この"x"の部分に任意の値を入れて実行すれば、その値がconsole.logに表示されます。
例えば下記の様な形です。

function show(x) {
  console.log(x);
}

show(y); //console.log(y);
show(z); //console.log(z);

show()という関数を実行する際に、「引数」に渡されたxがconsole.logで返される。
同じくyならy、zならz...と、渡された引数の値がconsole.logで返されます。

それでは、このコードの2行目を下記の様に書き換えてみるとどうでしょうか？

function show(x) {
  x();
}

console.logが消えて、これまで「引数」だったxが前に出て、「x()という関数を実行せよ」というプログラムに変わりました。
つまり、関数show()に渡された「引数」に従って、その「引数」の名前の関数が呼び出されることになります。
挙動としては下記です。

function show(x) {
  x();
}

show(y); //y();　...y()という関数が実行される
show(z); //z();　...z()という関数が実行される

ここまで理解できれば次のプログラムがどう構成されているかも分かると思います。

//3.
function y() {
  console.log("call back!");
}

//2.
function show(x) {
  console.log("call back soon...")　
  x();
}

//1.
show(y);

なお、関数を変数に代入する形で、下記の様に記述して紹介している場合もあります。
↑に書いたコードと同じ意味なんですが、コールバック関数が理解出来なくて混乱している時に読むとますます意味が分からなくなると思うので、注意しましょう。

var y = function() {
  console.log("call back!");
}

var show = function(x) {
  console.log("call back soon...")　
  x();
}

show(y);

細かいところをすっ飛ばしての説明となりましたが、多分こう考えればコールバック関数も理解しやすくなると思います。
コールバック関数でドハマりしている人が抜け出すために、少しでもお力になれれば幸いです。