はじめに

自分は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はピタゴラスの三つ組です。

2: 上記のプログラムをデバッガーを使用して追跡する

※ HTMLをブラウザで表示しておいてください。

(1): 開発者ツールを開く

開発者ツールについては MDN web Docs__ を参照下さい

このような画面になりますので、Sourceをクリックしてください。

すると、先ほど作成したapp.jsを開発者ツールから確認できます。

(2): ブレークポイントを貼る
行数のところをクリックするとブレークポイントを貼ることができます。これはデバッガーといって、JavaScriptが実行される時に動きを止めてくれます。

(3): 再読み込みをかける

再読み込みをかけた後、ブレークポイントを張ったところで実行を止めることができます。
行数の横をクリックすると、図のように青いものが出てきて、ブレークポイントを貼ることができます。
JavaScriptが実行する際に、そのポイントで止めることができます。

コードを書いたが思ったように動いてくれない時、指定した場所でコードが止まるようにして調べたい場所の状況を調べることができます。

分かりやすいように、isRightTriangle(3, 4, 5);の前後に、consoleで表示されるようにしておきます。

では再び読み込みます。
13行目の関数呼び出し演算子をブレークポイントに指定したので、以下のように13行目で止まっています。

Step into next function callを実行して1行ずつ処理を行なっていきます。
(画面でいうと左端の下の　↓　をクリックしてください)

そうすると、8行目に進みます。
図のように呼び出された関数に移動するのがわかると思います。引数で受け取った値も表示されてますね。

次にStep into next function callを実行すると、さらに呼び出された関数に移動しているのが分かります。(図 5行目)
この例だと、8行目のsquare(a)を呼び出した後に、5行目に移動して、multiply(x, x) を呼び出してますね。

そして、呼び出された3行目で計算されて、、、

計算された値が5行目に返され、7行目のsquare(a)にcall backされるということになります。

square(b), square(c)も同じ感じで処理を行なっていきます。

右下の図のScopeで受け取った引数の数値とreturnされた結果が分かります。

こんな感じでコールバックのデバックを行うことで、実際にコールバックがどういった処理を行なっているかが分かります。