第1回 Visual Studio Codeでデバッグをするための基礎知識：特集：Visual Studio Codeデバッグ入門（1/4 ページ）

Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう。

[かわさきしんじ，Insider.NET編集部]

連載目次

　Visual Studio Code（以下、VS Code）はプログラマー向けのテキストエディタだ。エディタではあるのだが、さまざまな機能も包含した極めて高機能のエディタである。そうした高度な機能の1つとしてデバッグ機能がある。本特集では、VS Codeを使ってデバッグを行うための基礎知識、手法、ノウハウを紹介していこう。なお、本稿ではWindows版のVS Code 1.14.1で動作を確認している。

VS Codeが持つデバッグ機能

　VS Codeが組み込みでサポートしているのはJavaScriptアプリ（Node.jsランタイム）のデバッグ機能だ（TypeScriptなど最終的にJavaScriptコードにトランスパイルされる言語のデバッグも可能）。VS Code自体がElectron（JavaScript／HTML／CSSでデスクトップアプリを作成するためのフレームワーク）を用いて作られているのを考えると当然ともいえる。他の言語で記述したアプリのデバッグを行うには、そのための拡張機能が必要になる。

　例えば、マイクロソフトが提供しているC#用の拡張機能には.NET CoreをランタイムとするC#コードのデバッグサポート機能が含まれている。この他にも多くの言語用にVS Codeでのデバッグを行えるようにするための拡張機能が提供されている。これらはVisual StudioのMarketplaceページで閲覧することも、VS Codeの［拡張機能］サイドバーで閲覧することもできる。

［拡張機能］サイドバーにデバッグ用の拡張機能を表示したところ

　今回は取りあえず、VS Codeが組み込みでサポートしているJavaScriptコードのデバッグ機能を利用しながら、VS Codeのデバッグの基本を見ていこう。

［デバッグ］ビュー

　VS Codeでデバッグを行うにはウィンドウ左端のアクティビティーバーで［デバッグ］アイコンをクリックする。すると、サイドバーにデバッグに関連する情報が表示されるようになる（これを［デバッグ］ビューと呼ぶ）。ここからデバッグの構成、デバッグの開始などが行える。また、デバッグ中は変数の値や関数の呼び出し階層（コールスタック）を表示したり、ブレークポイントの有効化／無効化を切り替えたりできる。

［デバッグ］ビューと［デバッグ コンソール］パネル

　（1）の［デバッグ］アイコンをクリックすると、（2）の［デバッグ］ビューが表示される。（3）の［デバッグの開始］ボタンをクリックすると、（4）に示された構成でデバッグが開始される（上の画像はデバッグ用の構成が行われていない状態。このときに［デバッグの開始］ボタンをクリックすると、デフォルトの構成でデバッグが開始される）。（5）のボタンをクリックするとlaunch.jsonファイルが作成／表示され、デバッグの構成を行えるようになる。（6）の［デバッグ コンソール］ボタンをクリックすると、（7）のデバッグ用のパネルが表示される。［デバッグ］ビューにある［変数］［ウォッチ式］［コール スタック］［ブレークポイント］の各ペーンについては後で必要に応じて説明をしていこう。

　ここでは、「Dev Basics／Keyword Emotion API」で作成した、マイクロソフトのCognitive Servicesが提供しているFace APIとEmotion APIを利用するJavaScriptプログラムをデバッグ実行してみることにしよう。サンプルのコードなので、詳細については前掲のリンクを参照してほしい。簡単に説明しておくと、このプログラムはFace APIとEmotion APIを利用して、URLで指定した画像ファイル内の顔の表情を調べてコンソールに出力するものだ。なお、実際にコードを実行してみるにはAzureポータルからFace APIとEmotion APIのサブスクリプションを追加して、それらのAPIへのアクセスキーを取得し、定数f_key／e_keyにセットする必要がある。

　また、このコードではFace API呼び出しをラップしたPromiseオブジェクトを返すgetFaceRectangle関数と、Emotion API呼び出しをラップしたPromiseオブジェクトを返すgetEmotion関数を作成し、それらの呼び出しをthenメソッドでチェーンさせている。

const request = require("request");
const f_key = "Face APIのアクセスキー";
const f_url = "https://westus.api.cognitive.microsoft.com/face/v1.0/detect";
const e_key = "Emotion APIのアクセスキー";
const e_url = "https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize";

const body = {
  url: "https://insidernetpictures.blob.core.windows.net/pictures/sampleface.png"
};

var opt = {
  headers: {
    "Ocp-Apim-Subscription-Key": "",
    "Content-Type": "application/json"
  },
  body: JSON.stringify(body)
};

function getFaceRectangle() {
  return new Promise(function(resolve, reject) {
    opt.url = f_url;
    opt.headers["Ocp-Apim-Subscription-Key"] = f_key;
    request.post(opt, (err, res, body) => {
      const tmp = JSON.parse(body);
      resolve(tmp[0].faceRectangle);
    });
  });
}

function getEmotion(rect) {
  return new Promise(function(resolve, reject) {
    opt.url = e_url+
      `?faceRectangles=${rect.left},${rect.top},${rect.width},${rect.height}`;
    opt.headers["Ocp-Apim-Subscription-Key"] = e_key;
    request.post(opt, (err, res, body) => {
      resolve(JSON.parse(body));
    });
  });
}

getFaceRectangle()
.then(rect => getEmotion(rect))
.then(data => console.log(data));

Face APIとEmotion APIを利用するJavaScriptコード

　次ページでは、まずデバッグの構成を行わずにそのまま［デバッグの開始］ボタンをクリックして、デバッグしながら、VS Codeでのデバッグの基本を見てみよう。