JavaScriptのコールバック関数と非同期処理を丁寧に理解する

SHARE

JavaScriptで重要な概念とされるコールバック関数ですが、使い方がよくわからない人も多いようです。

特に、非同期処理との絡みでは理解が難しく、結局スニペットを探していませんでしょうか。

本記事では、まずコールバック関数が何なのかをシンプルに説明し、次にコールバック関数がなぜ非同期処理とともに使われるのか、コード例を通して丁寧に解説していきます。

目次

目次へ

JavaScriptでは、関数 = 値

コールバック関数とは何かを理解する前に、JavaScriptにおける関数の重要な性質を一つだけ押さえましょう。

JavaScriptでは、関数と値は同じ扱いで、正確には第一級オブジェクトというものに所属しています。

厳密な定義はともかく、関数も変数に代入したり、値として渡したりできる という点だけ理解しておきましょう。

// 関数を変数fに代入
const f = (a, b) => { return a + b }

console.log( f(2, 3) );
// 5
console.log( f(3, 5) );
// 8

関数を、普通の値のように別の関数に渡すこともできます。柔軟ですね。

function greeting(callback){
    console.log('Hello,');
    callback('World!'); // もらった関数を実行
}

function print_word(word){
    console.log(word);
}

// greetingに、関数print_wordを渡して実行している
greeting(print_word);

// Hello,
// World!

上の例でいう関数greeting()は、関数を引数として受け取って、自身の中で実行する関数になっていますね。このような関数を高階関数といいます。

コールバック関数とは

コールバック関数とは、高階関数に渡す関数です。

前章の例では、関数greeting()が高階関数であり、print_word()がコールバック関数です。

コールバック関数の書き方には何種類かありますが、やっていることは同じです。関数を値として高階関数に渡して、後で実行しているということに過ぎません。

ダテネコ
ダテネコ

コールバック関数の定義には、非同期処理は関係無いんだぜ。

// 書き方①

const circle = (r) => { return(r*r*3.14) }

function diff(S, a, b){
    return S(a) - S(b);
}

console.log(diff(circle, 5, 3));
// 50.239999999999995
// 書き方②

function diff(S, a, b){
    return S(a) - S(b);
}

// 高階関数呼び出し時に、コールバック関数を定義するよくある書き方
const res = diff( (r) => { return r*r*3.14; }, 5, 3);

console.log(res);
// 50.239999999999995

コールバック関数は渡しただけでは実行されず、高階関数中で()をつけて呼び出された時、はじめて関数として認識されて実行されます。

上記コード、diff()関数定義の中のreturn文のところですね。

つまり、関数を値として渡しただけで実行はしない、という宙ぶらりんな状態があるわけです。この概念、重要なので覚えておきましょう。

JavaScriptの非同期処理

さて、Javascriptの非同期処理とは何か、復習しておきましょう。非同期処理が何か分かっている方は、3章まで飛ばしてください。

記述の順序　≠　実行順序

以下のコードを実行すると、3秒後に”Hello, ” → “World!”の順に出力されそうですが、setTimeout()は非同期処理であるため、実際にはそうなりません。

setTimeout(() => {
    console.log('Hello,');
}, 3000);

console.log('World!');

実行直後に”World!”が出力され、約3秒後に遅れて”Hello”が出力されてしまいます。

// 実際の出力
World!
Hello,

setTimeout()が「3秒後に”Hello,”を出力する」というタスクを登録したら、”Hello,”の出力を待たずに次のタスクに進んでしまうからですね。

コマリブル
コマリブル

記述した順序で実行されないなんて、非同期処理は厄介だワン

しかし、JavaScriptにはデフォルトで非同期処理となるsetTimeout()のような関数が多くあります。

次節ではその理由を説明します。

JavaScriptはなぜ非同期処理を使うのか

JavaScriptが積極的に非同期処理を採用している理由は、言語の使用用途として非同期処理に明確な利点があるからです。

JavaScriptは原則的にシングルスレッドで動作し、かつUIの描画を行うメインスレッドで実行されます（※）。

ファイルの読み込みや、HTTPリクエストなど、時間がかかる（かも知れない）処理で他の処理をブロックすると、その間UIは描画されず、ページがフリーズしてしまうのです。

//ファイル読み込みの例

const fs = require('fs');

fs.readFile("foo.txt", (error, data) => {
    console.log(data);
}

//他のタスク
console.log("Hello, World");

WebサイトやWebアプリケーションでUIのフリーズが頻繁に起こると、ユーザー体験を著しく損ないますから、「非同期処理で良いものは非同期処理で書く」がJSの基本的な考え方になったわけですね。

非同期処理の実行順序を制御する

JSでは非同期処理に利点があることが分かっても、実行順序の制御が出来なければ困ってしまいますね。　

非同期処理の入れ子で解決

実行から3秒後に”Hello, World!”を出力し、さらに3秒後に遅れて”Hello, JavaScript!”と出力するつもりで以下のように書くと、どうなるでしょうか。

setTimeout(() => {
     console.log('Hello, World!');
 }, 3000);
 
setTimeout(() => {
    console.log('Hello, JavaScript!');
}, 3000);

// Hello, World!
// Hello, JavaScript!
// (ほぼ同時)

ここまで読み進めた読者は、ほぼ同時に”Hello, World!”と、”Hello, JavaScript!”が表示されてしまうと分かりますね。

結論を言うと、正しい書き方は、setTimeout()の中で2つめのsetTimeout()を実行して後処理する書き方です。

setTimeout(() => {
    console.log('Hello, World!');
    //ここに書く
    setTimeout(() => {
        console.log('Hello, JavaScript!');
    }, 3000);
 }, 3000);

// (3秒)
// Hello, World!
// (3秒)
// Hello, JavaScript!
プログラムの構造
  • ① “Hello, World!”を出力する
  • ② 3秒後に、”Hello, JavaScript!”を出力する
  • タスク①②を、今から３秒後に行う

非同期処理の中で、非同期処理を行う入れ子にするわけですね。

次の節で、コールバック関数の観点から、考え方を整理していきましょう。

コールバック関数と高階関数の組み合わせ

前節のコードを、コールバック関数を明示した形で書いてみます。

function delay_greeting(callback){
    setTimeout(() => {
        console.log('Hello, World!');
        callback(); // もらった関数を実行
    }, 3000);
}

const func = () => {
    setTimeout(() => { console.log('Hello, JavaScript!'); }, 3000);
}

delay_greeting(func);

// (3秒)
// Hello, World!
// (3秒)
// Hello, JavaScript!

1つめのsetTimeout()が高階関数、後で実行したい2つめのsetTimeout()がコールバック関数になっています。

非同期処理を高階関数として書き、コールバック関数として別の処理を渡して、高階関数の中で実行すればいいことがわかりましたね。

まとめ

JavaScriptにおいて、コールバック関数を使用して非同期処理の実行順序制御ができる仕組みをまとめます。

ポイント
  • Javascriptでは、関数も「値」として扱うことができ、関数に渡すこともできる
  • 関数呼び出しを表す()を付けなければ、ただ渡しただけでは実行されない
  • コールバック関数の形で処理を渡しておいて、高階関数化した非同期関数の中で()をつけて実行すれば、好きなタイミングで実行できる

コールバック型非同期関数たち

コールバック関数と高階関数の組み合わせで非同期処理の実行順を制御できることが分かりました。

そのためJSには、コールバック関数を引数に取り、後処理を行う仕様の非同期関数があります。

requestモジュール | HTTPリクエスト

HTTPリクエストを送るrequestモジュール（※）は非同期関数で、レスポンスが返ってくることを待たずに次のタスクに移ります。

const request = require('request');

const res = request('https://www.google.com');

console.log(res.statusCode);
// undefind

コールバック関数を使わずに書くと、レスポンスの完了前にconsole.log()が走ってしまうため、結果を出力できません。

正しい書き方は、コールバック関数をrequest()に渡して、その中に後処理を記述する書き方です。

const request = require('request');

request('https://www.google.com',function(error, response, body) {
    console.log(response.statusCode);
});

// 200
// （正常終了）

fs.readFile | ファイルの読み込み

2章で例示したnode.jsのjs.readFileは、ファイル読み込み中に他の処理をロックしない非同期関数です。

const fs = require('fs');

fs.readFile("foo.txt", (error, data) => {
    // エラーが起きたら出力
    If (error){
        throw error;
    }
    // 読み込んだファイル内容の表示
    console.log(data);
});

コールバック関数を引数に取る高階関数 という形は他と同じですね。

コールバック地獄

コールバック関数＋高階関数で非同期処理を自由自在に扱えるかに見えますが、3つ以上の非同期処理や、複雑な制御になってくると行き詰まります。

fs.readFile()を例に、3つのファイルを逐次的に読み込まなければいけない例を考えます。

const fs = require('fs');

fs.readFile('foo.json', (error1, data1) => {
    console.log(data1);
    fs.readFile('bar.json', (error2, data2) => {
        console.log(data2);
        fs.readFile('baz.json', (error3, data3) => {
           console.log(data3);
           console.log("3 json files loaded.");
        })
    })
})
ツカレパンダ
ツカレパンダ

コードが読みにくくて疲れる。寝たい

コールバック型だと処理の数だけネストが必要になります。この状況は俗にコールバック地獄と呼ばれます。

実行順序を制御するためだけにどんどんネストを深くするのは、コードスタイルとしても良くないですよね。

Promiseの登場

ES2015から、コールバック地獄を防ぐことができるPromiseオブジェクトが導入されました。

詳しい解説は別記事に書きますが、上記のコードはPromiseを使用すると以下のように書き直す事ができます。

const fs = require('fs');
function cat_file(filepath){
    return new Promise((resolve, reject) => {
        fs.readFile(filepath, (error, data) => {
            console.log(data);
            resolve();
        })
    });
}

cat_file('foo.json') // Promiseを返す関数
    .then(() => cat_file('bar.json'))
    .then(() => cat_file('baz.json'))
    .then(() => { console.log('3 json files loaded.') });

11行目から14行目まで、逐次処理している部分がコード上で明確ですね。

シバセンセー
シバセンセー

ES2015以降のモダンJSでは、非同期処理はコールバック型ではなくPromiseを使用した書き方が基本になるんだよ。

ただし、Promise型非同期処理を理解する上でも、コールバック型非同期処理を理解している必要がありますので、レガシーと思わず押さえておきましょう。

以上で本記事は終了です。お疲れ様でした。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

Chrome拡張のつくり方　超入門

次の記事

WordPress自作プラグイン　超入門
error: Content is protected !!