デバッガを使ってJavaScriptのコールバックを理解する #JavaScript

はじめに

自分は2023年4月に京都のWeb系ベンチャ企業にフロントエンジニアとして入社。現在エンジニア歴1ヶ月になります。

実務ではWordpress, JavaScript, PHPを使用した開発をしています。
今後のキャリアパスのためにReact, TypeScriptを学習中。

今回は、デバッガを使ってJavaScriptのコールバックとコールスタックを理解する方法について書いてみました。

この記事の対象者

JavaScriptの基礎学習を終えている方
コールバックがいまいち理解できない方
JavaScriptのデバック方法がよくわからない方

尚、詳しい解説は今回は省略しています。

開発環境

mac OS: Ventura 13.3.1
Visual Studio Code
Chrome version 113

コールスタックとは何か

JavaScriptの実行環境では、コールスタックというメカニズムが機能しています。コールスタックは、実行中の関数の情報を一時的に保存する場所です。関数が呼び出されると、その関数はスタックの一番上にプッシュされます。

そして関数の処理が終わったら、スタックからポップされます。この一連の流れによって、関数がどの順番で実行されるべきかが決まります。これが最後に入れたものが最初に取り出される（Last In, First Out：LIFO）という原則を実現しています。

コールバックとは何か

コールバックは、ある関数が完了した後に呼び出される関数のことを指します。特にJavaScriptでは、非同期処理を行う際にコールバック関数をよく使用します。たとえば、setTimeout関数は指定した時間が経過した後にコールバック関数を実行します。また、サーバーからデータを取得する際にも、データの取得が完了した時点でコールバック関数が実行されます。

分かりにくいので、図を使ってデバックの流れを説明していきます。

デバックにてコールスタックを学ぶ

1: まずHTMLとJavaScriptのファイルを準備します。

HTML

index.html

JavaScript

app.js

このコードの説明
このJavaScriptコードはピタゴラスの定理をチェックするための簡単なプログラムです。

'use strict';
この行はstrictモードを有効にします。strictモードでは、JavaScriptの一部の機能が制限され、より厳密なエラーチェックが行われます。これにより、開発者は予期しないエラーやバグを早期に発見することができます。(省略可)
const multiply = (x, y) => x * y;
この行は2つの数値を乗算する矢印関数（アロー関数）multiplyを定義しています。
const square = (x) => multiply(x, x);
この行は与えられた数値の二乗を求める矢印関数squareを定義しています。これはmultiply関数を使用して与えられた数値を自分自身と乗算しています。
const isRightTriangle = (a, b, c) => {...}
この行は3つの数値が直角三角形の3辺の長さを表しているかどうかをチェックする矢印関数isRightTriangleを定義しています。これはピタゴラスの定理を使用しています（直角三角形において、直角をはさむ2辺の長さの2乗の和は斜辺の長さの2乗と等しい）。
isRightTriangle(3, 4, 5)
この行はisRightTriangle関数を実行しています。ここでは3、4、5という値を関数に渡しています。これらの数値は直角三角形の辺の長さを表しており、そのため関数はtrueを返します。つまり、3、4、5はピタゴラスの三つ組です。