Lesson6ではエラーハンドリングを、Lesson7ではログの実装を学びました。いずれもプログラムの不具合を防ぐために大切な観点です。

とはいえ、アプリケーション開発からバグが無くなることはことはありません。人の手が介在する以上、どこかで必ずミスが発生するでしょう。

そこで今回のLessonでは、デバッグの手法について取り上げます。Node.jsのデバッグ方法はいくつかありますが、高機能で扱いやすいものとしてVisual Studio Code（VSCode）がおすすめです。

まだVSCodeを使ったことがない方も、ぜひこの機会に触れてみてください。

デバッグ（デバッガー）とは

そもそも「デバッグ」とは、プログラムが仕様や開発者の意図と異なる動作をする際、その原因を特定し、期待通り動作するよう修正することです。

今までのLessonでもconsole.logを利用し、プログラム中の変数の値や処理の結果を確認してきました。実際のデバッグでも、こうした地道な確認作業を積み重ね、正しい挙動のプログラムへと修正していきます。

とはいえ、バグが見つかる度にconsole.logを記述するのは大変です。そこで一般的には「デバッガー」と呼ばれるデバッグ用ソフトウェアが使用されます。

VSCodeに搭載されているデバッガーはNode.jsに対応しており、GUI上で直感的な操作が可能です。以下の項目で、実際の使い方を見ていきましょう。

VSCodeを用いたデバッグ

以下のプログラムを例に、VSCodeを利用したデバッグの方法を見ていきましょう。エラーハンドリングの学習（Lesson6）で扱ったExpressによるプログラムです。

app.js

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

VSCodeを利用したデバッグの手順は、大きく次の3ステップに分かれます。

1. launch.jsonの設定
2. package.jsonの設定
3. VSCodeからプログラムをデバッグ起動

まずは、1つ目のlaunch.jsonの設定をしていきましょう。

1. launch.jsonの設定

VSCodeでは、デバッグの設定情報をlaunch.jsonというファイルに保存できます。次の画像に従って、launch.jsonを設定していきましょう。

まずは、app.jsのあるディレクトリをVSCodeで開き、画像内の赤枠で囲んである三角形と虫のアイコンをクリックします。

launch.jsonの設定手順1

次に、画像の赤枠内create a launch.json fileという部分をクリックします。

launch.jsonの設定手順2

create a launch.json fileをクリックすると、添付画像のような画面に変わります。ここでは、画像内の赤枠で囲んであるNode.jsをクリックしてください。

launch.jsonの設定手順3

Node.jsをクリックすると、画像のようにlaunch.jsonが開きます。

launch.jsonの設定手順4

開いたlaunch.jsonについて、次のように編集し保存してください。

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script", "debug"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal"
    }
  ]
}

それぞれの設定項目は、以下の意味を持っています。

項目	説明
type	デバッガーの種別
request	デバッガーの起動モード
name	デバッグの構成名
skipFiles	デバッグの対象外とするファイル
runtimeExecutable	実行プログラム
runtimeArgs	実行プログラムの引数
cwd	現在の作業ディレクトリ
console	デバッグ結果を出力するコンソール

以上でlaunch.jsonの設定は終了です。次はpackage.jsonを設定していきましょう。

前回のChapterでは、VSCodeのデバッガーを設定するために「setting.json」を編集しました。続いて、実行環境であるNode.js側の設定を行います。

2. package.jsonの設定

Node.jsの起動設定を見直すために、プロジェクト直下にある「package.json」を編集します。以下の通り、scriptsフィールドに"debug": "node app.js"を追記してください。

package.json

{
  "name": "nodejs-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified\" && exit 1",
    "debug": "node app.js" // この１行を追記
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1"
  }
}

package.jsonにあるscriptsフィールドは、プロジェクトに必要なスクリプトを独自コマンドとして設定する場所です。

既定の記述であるtestを例にとると、コマンドラインにnpm run testと入力することで、echo \"Error: no test specified\" && exit 1のスクリプトが実行されます。

今回は、VSC odeを利用してデバッグするためにdebugスクリプト"node app.js"を追記しました。このように、spriptsフィールドを編集することで開発環境でのコマンド実行が簡単になります。

以上で、VSCodeを利用してデバッグするための準備は整いました。次は実際にデバッグを起動してみましょう。

ここまで「setting.json」と「package.json」のファイルを編集しました。それでは、VSCodeの画面上でデバッガーを起動してみましょう。

3. VSCodeからプログラムをデバッグ起動

最後のデバッグ起動は、VSCodeからデバッグできるようプログラムを実行することと考えてください。画像の赤枠内のようにLaunch Programを選択し、Launch Program左の緑の三角ボタンをクリックするとapp.jsがデバッグ起動されます。

デバッグ起動の手順1

Launch Program左の緑の三角ボタンをクリックするとコンソールが立ち上がり、その最終行に以下の画像のような出力がされます。

デバッグ起動の手順2

以上でデバッガーが起動しました。念のため、ブラウザから「http://localhost:3000」 にアクセスし、「Hello World!」と出力されることを確認してください。

以上が、VSCodeからapp.jsをデバッグ起動するための手順です。今までは、node app.jsと記述して実行してきましたが、「setting.json」と「package.json」を設定したことにより、VSCodeのみでプログラムを起動できるようになりました。

次は、VSCodeのデバッグ機能の１つである「ブレークポイント」を見ていきましょう。

ここまでの解説を通して、VSCodeに搭載されているデバッガーが無事に起動されました。Chapter4では、VSCodeのデバッグ機能の1つである「ブレークポイント」の設定を見ていきます。

適切な場所にブレークポイントを設定することで、バグの発生原因を速やかに調査し、処理のトレースを行うことが可能です。

ブレークポイントとは

ブレークポイントは、デバッグ作業で実行中のプログラムを停止させる際、ソースコード上に指定された場所を指します。VSCodeの場合、画像の赤丸が表示されている場所がブレークポイントです。

ブレークポイントの例

ブレークポイントは行単位で指定することができるほか、複数指定も可能です。実際にブレークポイントを設定してプログラムを実行すると、該当する行のコードは実行されず、一時停止の状態になります。

ブレークポイントを設定する

次に、ブレークポイントの設定手順を見ていきましょう。

VSCodeからapp.jsをデバッグ起動した状態で、画像の赤枠内のあたりにマウスカーソルを持っていくと薄い赤丸が表示されます。

ブレークポイントの設定手順1

表示された薄い赤丸をクリックして、画像のような赤丸にすることで、ブレークポイントが設定されます。

ブレークポイントの設定手順2

ブレークポイントを設定した状態で、ブラウザから「http://localhost:3000」にアクセスしてみましょう。画像のようにブレークポイントを設定した行がハイライトされるはずです。

ブレークポイントが機能している様子1

この状態は、ブレークポイントを設定した行のコードが実行されず、一時停止している状態です。一時停止している状態で、変数にマウスカーソルを合わせると、画像のように変数の中身を確認することができます。

ブレークポイントを利用して変数の中身を確認する様子1

また、一時停止している状態で、画像のように左側の変数名をクリックして、変数の中身を確認することもできます。

ブレークポイントを利用して変数の中身を確認する様子2

中断したプログラムの実行を続けるためには、画像内の赤枠で囲われた三角ボタンをクリックします。

プログラムの実行を進める手順

三角ボタンをクリックした後は、プログラムの実行が進みます。他のブレークポイントが設定されていれば、次のブレークポイントで一時停止、他のブレークポイントが設定されていなければ、最後までプログラムが実行されます。

以上が、VSCodeの代表的なデバッグ機能であるブレークポイントの使い方です。

ブレークポイントを複数設定する

ここで一度デバッグ起動を終了させましょう。デバッグ起動を終了するには、画像内の赤枠で囲われた四角のボタンをクリックします。

デバッグ起動を終了する手順

今度はapp.jsを次のように変更して、デバッグすることを考えてみましょう。

app.js

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  const result = 5 * 2;
  res.send("Hello World!" + result);
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

デバッグ起動のため、画像の赤枠内のようにLaunch Programを選択し、Launch Program左の緑の三角ボタンをクリックしてください。

デバッグ起動の手順

デバッグ起動後は、画像のようにブレークポイントを2箇所設定します。

ブレークポイントの設定手順

ブラウザから「http://localhost:3000」にアクセスします。画像の通り、最初のブレークポイントでプログラムが一時停止することを確認してください。

ブレークポイントが機能している様子

中断したプログラムの実行を続けるため、画像内の赤枠で囲われた三角ボタンをクリックしてください。

プログラムを進める手順

画像の赤枠で囲われた三角ボタンをクリックして、中断したプログラムの実行を続けると、次のブレークポイントで一時停止します。画像の赤枠で囲われたresultにマウスカーソルを合わせてみると、変数の中身が確認できます。

ブレークポイントを利用して変数の中身を確認する様子

以前までは、consoel.logを記述して変数の中身を確認していました。VSCodeのデバッグ機能を使うことで、このようにGUI上で変数の中身が確認できるようになります。

中断したプログラムを再開するため、画像内の赤枠で囲われた三角ボタンをクリックしてください。

プログラムを進める手順

他のブレークポイントが設定されていないため、最後までプログラムが実行されました。

画像の赤枠で囲われた四角のボタンをクリックして、デバッグ起動を終了してください。

デバッグ起動を終了する手順

以上がVSCodeを利用したデバッグの流れです。以前までは、変数の中身や処理の経過はconsoel.logを記述して確認していました。VSCodeのデバッガーを利用することで、より効率的なデバッグが可能です。

次のChapterでは、APIのデバッグに便利なVSCodeの拡張機能を紹介します。

ここまでVSCodeのデバッグ機能を解説しました。Node.jsでバックエンド開発を進める場合、APIのデバッグが必要になることが多々あります。

そこで本章の後半では、Web APIの開発・テストに便利な「Thunder Client」というツールを紹介します。Thunder Clientは、VSCode上で利用できる無料のAPIクライアントツールです。

Thnder Clientの詳しい機能や設定・実行方法について学びましょう。

Thunder Clientとは

Thunder Clientは、VSCodeの拡張機能として無償提供されているAPIクライアントツールです。

たとえば、HTTPメソッドのうちPUTリクエストを受け取るAPIを作成したとしましょう。このAPIをテストするためには、実際にPUTリクエストを送るプログラムを記述しなければなりません。

APIクライアントツールを使うと、GUIを操作するだけでPUTメソッドを使ったリクエストを送ることができます。また、その場でクエリパラメーターの値を変更したり、レスポンスの内容を確認したりすることも可能です。

もちろん、PUT以外のリクエストも送信できます。今まではGETリクエストを送るため、ブラウザの「http://localhost:3000」にアクセスをしていました。Thunder Clientを使えば、同様の処理がVSCode上で行えます。

Thuner Clientのインストール方法

それでは、VSCodeにThunder Clientをインストールしましょう。VSCodeを起動し、画像の赤枠で囲われた四角形が4つ並んだアイコンをクリックしてください。

Thunder Clientをインストールする手順1

次は、画像の赤枠で囲われた検索窓の中にthunder clientと入力してください。

Thunder Clientをインストールする手順2

表示される候補の中からThunder Clientをクリックし、Installをクリックしてください。

Thunder Clientをインストールする手順3

以上で、Thunder Clientのインストールは完了です。次は、Thunder Clientの操作方法を見ていきましょう。

前回でThunder Clientのインストールが完了しました。続けて基本設定を学びましょう。

Thunder Clientの基本的な使い方

まずはVSCodeを開き、画像の赤枠で囲まれた稲妻のアイコンをクリックしてください。

Thunder Clientの操作手順1

次に、画像の赤枠で囲んであるNew Requestをクリックしてください。

Thunder Clientの操作手順2

New Requestをクリックすると、新規のタブが開き、以下の画像のような表示に変わります。ここで、赤枠で囲んだSendをクリックしてみてください。

Thunder Clientを利用してHTTPリクエストを送る方法

画像の通り、右側の領域の表示内容が変わったことを確認してください。

Thunder Clientを利用してHTTPレスポンスを受け取った画面

Thunder Clientの仕組み

何が起きたか説明していきましょう。

Sendをクリックしたことにより、GETメソッドでHTTPリクエストが送られました。ここで左側のメニューをクリックすれば、GETに限らず様々なリクエストを送信できます。

Thunder Clientから送られたHTTPリクエスト

送信後、受け取ったHTTPレスポンスが右側に表示されます。上のタブを選択することで、レスポンスボディだけでなくステータスやヘッダーなどの情報も見ることができます。

Thunder Clientが受け取ったHTTPレスポンス

今まで記述したプログラムは、Webブラウザで確認しやすいようにHTML形式のデータを返却していました。今回のように、HTTPレスポンスと一緒にJSON形式のデータを返却することも可能です。

このように、Thunder Clientを使用することで手軽にHTTPリクエスト・レスポンスを確認できます。VSCode上で機能するため、ソースコードを記述しながらAPIの挙動を確認できるのもメリットのひとつです。

次のChapter7では、VSCodeでのデバッグ起動とThunder Clientを組み合わせて使う方法を解説します。

Lesson7の前半ではVSCode標準のデバッガー、後半ではVSCodeの拡張機能であるThunder Clientの解説を行いました。

最後に、これら二つのツールを組み合わせたデバッグの手法を学びましょう。

デバッガーとThunder Clientを組み合わせて使う

Chapter4のブレークポイントの説明で利用した「app.js」を、次のように編集してください。

app.js

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  const myMessage = "Hello world";
  const myResult = 5 * 2;

  res.json({ message: myMessage, result: myResult });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

それでは、この編集した「app.js」をVSCcodeからデバッグ起動しましょう。「launch.json」と「package.json」の設定は、本章で設定したものを流用してください。

「app.js」を用意したディレクトリをVSCodeで開き、画像内の赤枠で囲んである三角形と虫のアイコンをクリックします。

デバッグ起動の手順1

画像の赤枠内のようにLaunch Programを選択し、Launch Program左の緑の三角ボタンをクリックして、「app.js」をデバッグ起動してください。

デバッグ起動の手順2

画像のように、ブレークポイントを設定してください。

ブレークポイントの設定

次にThunder Clientを起動します。画像内の赤枠で囲んである稲妻のアイコンをクリックしてください。

Thunder Clientを起動する手順1

次にNew Requestをクリックしてください。

Thunder Clientを起動する手順2

新しく開いたタブで、画像の赤枠で囲んだようにhttp://localhost:3000と入力し、Sendをクリックしてください。

Thunder ClientからHTTPリクエストを送る

Sendをクリックすると、下の画像のようにブレークポイントで一時停止することを確認してください。また、この状態では変数の中身を確認できます。

ブレークポイントが機能している様子

画像の赤枠で囲んだ三角形をクリックして、中断したプログラムの実行を続けてください。

プログラムを進める手順

三角ボタンをクリックしてからThunder Clientのタブに移動すると、次の画像のようにHTTPレスポンスが返却されていることを確認してください。

Thunder Clientを利用してHTTPレスポンスを受け取った画面

今回は、Expressのres.json()メソッドを利用したため、JSON形式のデータが返却されています。

Thunder Clientが受け取ったHTTPレスポンス

ここまで、VSCodeのデバッグ起動とThunder Clientを組み合わせて使う方法を見てきました。プログラムの記述量が増えても、デバッグする際の一連の手順は変わりません。

今後もぜひ、VSCodeを利用したデバッグ方法を活用してみてください。