演習 - Node.js 組み込みデバッガーを使用する - Training

6 分

先ほど見たデバッグの概念を実践するために、短い Node.js アプリケーションを作成して、フィボナッチ数列の N番目の数を計算します。

フィボナッチ数列は、0 と 1 から始まる一連の数値であり、後続の他のすべての数値は前の 2 つの数値の合計になります。数列は次のように続きます。

0, 1, 1, 2, 3, 5, 8, 13, 21...

その概念を説明する新しい Node.js アプリケーションを作成してみましょう。

開発コンテナーでプロジェクトを開く

このトレーニングモジュールは、ブラウザーまたはローカルコンピューター用の開発コンテナーを提供します。このコンテナーには必要なすべての環境が用意されているため、IDE または Node.js をインストールしなくてもこのトレーニングモジュールを使用できます。このトレーニングモジュールを完了するために、コンテナーについては何も知る必要はありません。

リモート開発 (ブラウザー)
ローカル開発 (Docker)

MicrosoftDocs/node-essentials GitHub リポジトリの main ブランチに新しい GitHub Codespace を作成するプロセスを開始します。

GitHub Codespaces でこのプロジェクトを開く
[codespace の作成] ページで、codespace の構成設定を確認してから、[codespace の作成] を選択します
Codespace が起動するまで待ちます。この起動プロセスには数分かかることがあります。
codespace で新しいターミナルを開きます。

ヒント

メインメニューを使用して [ターミナル] メニューオプションに移動し、[新しいターミナル] オプションを選択できます。
Node.js が環境にインストールされていることを確認します。
```
node --version
```
開発コンテナーでは Node.js LTS バージョンが使用されます。正確なバージョンは異なっている場合があります。
このプロジェクトの残りの演習は、この開発コンテナーのコンテキストで行われます。

空のディレクトリのコンテキストで Visual Studio Code を開きます。
Visual Studio Code に Dev Containers 拡張機能がインストールされていることを確認します。
エディターで新しいターミナルを開きます。

ヒント

メインメニューを使用して [ターミナル] メニューオプションに移動し、[新しいターミナル] オプションを選択できます。
MicrosoftDocs/node-essentials GitHub リポジトリを現在のディレクトリにクローンします。
```
git clone https://github.com/MicrosoftDocs/node-essentials.git
```
ターミナルで次のコマンドを使用して、コードでリポジトリを開きます。
```
cd node-essentials
code .
```
[コマンドパレット] を開き、Dev Containers コマンドを検索し、[Dev Containers: コンテナーで再度開く (Reopen in Container)] を選択します。

ヒント

Visual Studio Code では自動的に、開発コンテナー内の既存のフォルダーを再度開くよう求められる場合があります。これは、コマンドパレットを使用してコンテナー内で現在のワークスペースを再度開くのと機能的には同じです。
.Node.js が環境にインストールされていることを確認します。
```
node --version
```
開発コンテナーでは、v20.5.1 などの Node.js LTS バージョンが使用されます。正確なバージョンは異なっている場合があります。
このプロジェクトの残りの演習は、この開発コンテナーのコンテキストで行われます。

環境を準備する

演習を始める前に、まずコードと環境を準備する必要があります。

./nodejs-debug サブフォルダーを開いてから、myfibonacci.js という名前の新しい JavaScript ファイルを作成します。フォルダーに既に存在するファイルは演習の解決策であるため、デバッグ中に見つかったバグに対する修正が必要です。

次のコードをファイルに貼り付けます。

function fibonacci(n) {
  let n1 = 0;
  let n2 = 1;
  let sum = 0;

  for (let i = 2; i < n; i++) {
    sum = n1 + n2;
    n1 = n2;
    n2 = sum;
  }

  return n === 0 ? n1 : n2;
}

const result = fibonacci(5);
console.log(result);

CTRL + S キーを押して、ファイルを保存します。
./nodejs-debug サブフォルダーを右クリックし、[Open in integrated terminal ] を選択して、次のコマンドを使用してプログラムを実行します。
```
node fibonacci.js
```

アプリケーションにより、コンソールに結果 3 (3 つ) が表示されるはずです。結果として 5 が表示されるはずでしたが、バグがあるようです。 Node.js の組み込みデバッガーを使用して、何が問題なのかを理解しましょう。

デバッガーコマンドチートシート

Node.js の組み込みデバッガーには、プログラムの実行を制御するために使用できる一連のコマンドが付属しています。最も一般的なコマンドのクイックチートシートを次に示します。

コマンド	説明
`c`	続行。次のブレークポイントまたはプログラムの最後まで実行を続行します。
`next`	ステップオーバー。このコマンドは `step` コマンドに似ていますが、次のコード行が関数呼び出しの場合は、ステップインせずに関数が実行されます。
`s`	ステップイン。このコマンドは `next` コマンドに似ていますが、次のコード行が関数呼び出しの場合は、この関数のコードの最初の行に移動します。
`sb()`	現在の行にブレークポイントを追加します。
`exec <EXPR>`	現在の実行コンテキスト内で式を評価します。このコマンドは、現在の状態に関する情報を取得するのに役立ちます。たとえば、`exec i` を使用することで、`i` という名前の変数の値を取得できます。
`Ctrl` + `D`	デバッガーを停止します。

組み込みデバッガーを起動する

今度は組み込みデバッガーを有効にして、プログラムをもう一度起動します。ターミナルで次のコマンドを入力します。

node inspect fibonacci.js

ターミナルで、デバッガープロンプトが表示されるのが確認できるはずです。今回は、実行ポイントが次のように fibonacci 関数の先頭に置かれるまで s + <Enter> を実行してコードにステップインします。

break in fibonacci.js:2
  1 function fibonacci(n) {
> 2   let n1 = 0;
  3   let n2 = 1;
  4   let sum = 0;
debug>

このポイントで、次のコマンドを実行して、関数に渡された n パラメーターの値を確認できます。

exec n

結果としてコンソールに 5 が表示されるはずです。実行ポイントがループの先頭に入るまで、s コマンドを実行してコードにステップインし続けます。このポイントに到達するには、s コマンドを使用して 5 つのステップを実行します。

break in fibonacci.js:7
  5
  6   for (let i = 2; i < n; i++) {
> 7     sum = n1 + n2;
  8     n1 = n2;
  9     n2 = sum;
debug>

注意

for(...) {} 行を移動するには、デバッグコマンドを使用した複数のステップが必要であることにお気付きかもしれません。このような状況になるのは、この行に複数の "ステートメント" があるためです。ステップ実行すると、コード内の次のステートメントに進みます。通常、1 行につき 1 つのステートメントがあります。そうでない場合、次の行に進むには複数のステップが必要です。

ブレークポイントを使用してバグを見つける

この行にブレークポイントを追加して、ループの反復をすばやく移動できるようにしましょう。ターミナルに次のコマンドを入力します。

sb()

コンソールに同じ行が再度表示されるはずです。これは、この行にブレークポイントが設定されていることを示しています。現在の実行ポイントを移動すると、ブレークポイントを設定した行にアスタリスク * が表示されます。

ターミナルで c コマンドを実行して、次のループ反復に進みます。

exec コマンドを使用して現在の反復状態を確認し、コマンドパラメーターとして配列を使用して複数の変数の値を確認できます。反復子 i と合計 sum の値を確認するには、構文 [i, sum] を使用します。ターミナルで次のコマンドを入力します。

exec [i, sum]

コンソールに結果 ([ 3, 1 ]) が表示されるはずです。

このコードでは、現在の反復の変数 sum の値 (3) はまだ更新されていません。変数 sum の値には、前の反復のフィボナッチ数が引き続き表示されます。現在の sum の値を取得するためにコードで使用している計算を次に示します。

fibonacci(2) = fibonacci(0) + fibonacci(1)
             = 0 + 1
             = 1

計算に基づくと、このポイントまでプログラムが正しく実行されているようです。

ターミナルで c コマンドを実行して次のループの反復に進み、状態をもう一度確認します。

c
exec [i, sum]

コンソールに結果 ([ 4, 2 ]) が表示されるはずです。

これで、目的の反復の回数 (5) の直前まで到達しました。 s コマンドを使用して、このイテレーションをステップバイステップで慎重に進めます。一度に 1 ステップずつ実行して、前のブレークポイントに到達するようにします。ブレークポイントを越えないでください。

どうなりましたか?

バグを修正する

ループ条件 i < n を確認した後、実行が突然 return コマンドがある行にジャンプしました。ターミナルに表示される内容は次のとおりです。

break in fibonacci.js:12
 10   }
 11
>12   return n === 0 ? n1 : n2;
 13 }
 14

そうです、バグが見つかりました。イテレーション 5 の合計が更新されることなく、コードがループから抜け出しました。最初の実行で前のイテレーション (3) の結果が取得されたのはそのためです。

fibonacci.js のコードでループ条件を修正する必要があります。コードエディターで、テストステートメントの値を小なり < から以下 <= に変更します。

for (let i = 2; i <= n; i++) {
  sum = n1 + n2;
  n1 = n2;
  n2 = sum;
}

コードエディターで変更を保存し、Ctrl + D キーを押してデバッガーを終了します。

次に、ターミナルでプログラムをもう一度実行します。

node fibonacci.js

期待した結果 (5) がコンソールに表示されます。

Node.js の組み込みデバッガーを使用して、基本的なデバッグの原則を学習し、簡単なデバッグセッションを実行できます。コマンドの入力が面倒だったり、複雑なプログラムでは制限が多すぎて使いにくかったりすることがあります。

次のセクションでは、代わりに Visual Studio Code デバッガーを使用する方法について説明します。

続行

演習 - Node.js 組み込みデバッガーを使用する