JavaScript入門 コールバックとは

JavaScriptでつまづくであろうコールバックについてご紹介します。

コールバックが何か分からない、なんのために使うか分からないという方に、少しでも役に立てればいいなと思います。

コールバックは関数の引数に渡す関数

この時点でよく分からないですね。

まず、普通の関数をみてみます。

const greet = (name) => {
	return "Hello " + name;
}

console.log(greet('tamibouz'));

hello関数はnameを引数に受け取り、「Hello + <名前>」という文字列を返します。

コールバックの場合は、以下のようになります。

const hello = () => {
	console.log('Hello');
}

const greet = (callback) => {
	callback();
}

greet(hello);

greet という関数は、引数を一つ(callback)受け取っています。

このcallbackという引数は関数であることを想定しています。

そのため、callback() で実行することができます。

このコードでは、greet(hello); としているので、hello関数を実行しています。

もう一度確認

以下のコードだけに注目します。

const greet = (callback) => {
	callback();
}

引数のcallbackは関数です。

そして、callback(); はその関数を実行する、という意味です。

()をつけると実行する、という処理になります。

つまり、以下のようなコードの場合

greet(hello);

greet関数の引数のcallbackは、hello関数になるので、callback(); の部分は hello(); となり、hello関数が実行されます。

コールバックを使うと何が嬉しいのか

関数を使う目的は再利用を可能にすることです。

はじめのgreet関数は、引数でnameという文字列を受け取って、Helloを頭に付与した文字列を返しています。

Helloを付与した文字列を返す、というのが再利用したい部分で、nameが変更したい部分です。

コールバックの場合も同じで、引数で渡す関数が変更したい部分です。

動的に変えたい部分を引数で渡すのです。

前述のgreet関数では、中でcallbackしか実行していませんが、以下のようなケースの場合はどうでしょう。

const greet = (callback) => {
  // 共通化したい処理
  // 例えば、何かの計算をする、文字列を加工する など
	callback(); // ここが変更したい部分
}

greet の中では、共通の処理をまず行い、最後に引数で渡された関数を実行します。

例えば、共通の処理では何かしらの文字列を作成し、callback()でどこに出力するかを変えられる、ということができるようになります。

このように考えると、関数では引数で渡した部分が振る舞いを変えたい部分になります。

文字列を渡した場合は、その文字列の値を動的に変えられます。

関数を渡した場合は、その関数の振る舞いを動的に変えられます。

このように考えると、コールバックはかなり柔軟性を持たせることができると思いませんか！？

コールバックに慣れるとかなりのメリットがあるので、トライしてはいかがでしょうか。

JavaScript

Posted by たみぼうず