Frontend Academy · レッスン

コールバックとコールバック地獄

コールバックベースの非同期処理を理解し、コールバック地獄と呼ばれるネストの問題を見極め、解決のために Promise が導入された理由を学びます。

「コールバックとコールバック地獄」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

コールバックとは

コールバックとは、別の関数に引数として渡され、何らかの処理が完了したときに後から呼び出される関数です。コールバックは JavaScript における元来の非同期処理パターンであり、Promise よりも前から存在します。

// Synchronous callback:
[1, 2, 3].forEach(function(n) {
  console.log(n);
});

// Async callback:
setTimeout(function() {
  console.log('1 second later');
}, 1000);

Node.js のエラーファーストコールバック

Node.js では、コールバックの最初の引数にエラー、2 番目の引数に結果を渡す規約が標準化されています。err が null または undefined なら、処理は成功しています。

fs.readFile('data.json', 'utf8', function(err, data) {
  if (err) {
    console.error('Failed to read file:', err);
    return;
  }
  console.log('File contents:', data);
});

コールバックによる非同期処理の連鎖

ある非同期処理が別の処理の結果に依存する場合は、コールバックを入れ子にします。3 つの処理を順番に実行するだけでも、コードはすぐに読みにくくなります。

getUser(userId, function(err, user) {
  if (err) return handleError(err);
  getOrders(user.id, function(err, orders) {
    if (err) return handleError(err);
    getInvoice(orders[0].id, function(err, invoice) {
      if (err) return handleError(err);
      // Finally use invoice
      renderInvoice(invoice);
    });
  });
});

コールバック地獄 — 破滅のピラミッド

深い入れ子構造は、コールバック地獄または破滅のピラミッドと呼ばれます。問題点は、レベルが増えるたびにコードが右へずれていくこと、エラー処理が繰り返しになること、処理の流れを追いにくいこと、そしてリファクタリングが困難になることです。

コールバック地獄の問題点

1) 各レベルで明示的な if(err) によるエラー処理が必要です。2) デバッグが困難です。スタックトレースに論理的な処理の連鎖が表示されないためです。3) コードが横方向の階層に分かれ、読みにくくなります。4) 誤ってエラーを見落としやすくなります。

対策：名前付き関数

入れ子になったコールバックを、トップレベルの名前付き関数として切り出します。これにより入れ子構造が平坦になり、各ステップを単独でテストできるようになります。ただし、根本的な処理の調整に関する問題は解決しません。

function onInvoice(err, invoice) {
  if (err) return handleError(err);
  renderInvoice(invoice);
}
function onOrders(err, orders) {
  if (err) return handleError(err);
  getInvoice(orders[0].id, onInvoice);
}
function onUser(err, user) {
  if (err) return handleError(err);
  getOrders(user.id, onOrders);
}
getUser(userId, onUser);

制御フローライブラリ（歴史）

async.js のようなライブラリは、コールバックベースの処理の流れを管理するヘルパー（async.waterfall、async.parallel）を提供していました。これらは ES2015 で Promise が登場する前の最先端の手法でした。

コールバックがなくならない理由

コールバックは今でもあらゆる場所で使われています。イベントリスナー、配列メソッド、setTimeout、ストリーム API はすべてコールバックを使用します。重要なのは、非同期処理の連鎖には Promise と async/await のほうが適しているということです。単純な一度きりのイベントには、コールバックを使っても問題ありません。

コールバックから Promise へ：Promisify

Node.js の util.promisify() は、エラーファーストコールバック関数を Promise を返す関数でラップします。これにより、古い API と最新の async/await コードを橋渡しできます。

const { promisify } = require('util');
const readFile = promisify(require('fs').readFile);

async function readConfig() {
  const data = await readFile('config.json', 'utf8');
  return JSON.parse(data);
}

コールバックが今でも適切な場面

イベントリスナー（addEventListener）はコールバックを受け取りますが、それで問題ありません。イベントリスナーは複数回実行されるためです。ストリームのデータハンドラーもコールバックを受け取ります。Promise は一度だけ結果を返す非同期処理であり、コールバックは複数のイベントを購読するための仕組みです。

今後の方向性：Promise と async/await

ES2015 で導入された Promise と、ES2017 で導入された async/await によって、コールバック地獄は解決されました。最新の JavaScript コードでは、順番に実行する非同期処理にほぼ必ず async/await を使用します。古いコードやライブラリの内部実装を読むためにも、コールバックの理解は重要です。

確認問題

「コールバック地獄」とは、主にどのような問題を指しますか？

まとめ：コールバック

コールバックは、後から呼び出すために別の関数へ渡す関数です。これは元来の非同期処理パターンです。エラーファーストコールバック（err、result）は Node.js の規約です。深い入れ子構造はコールバック地獄を生みます。名前付き関数として切り出すと、構造を平坦にできます。順番に実行する非同期処理には Promise と async/await を使用してください。イベントリスナーやストリームには、今でもコールバックが適しています。

よくある質問

「コールバックとコールバック地獄」レッスンは無料ですか？

はい。「コールバックとコールバック地獄」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「コールバックとコールバック地獄」で何を学びますか？

コールバックベースの非同期処理を理解し、コールバック地獄と呼ばれるネストの問題を見極め、解決のために Promise が導入された理由を学びます。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「コールバックとコールバック地獄」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る