Check! Visual Studio Code で Node.js Express をデバッグ！

こんばんは、[cloudpack][] の @dz_ こと[大平かづみ][]です。

Prologue - はじめに
====
[Bluemix](https://console.ng.bluemix.net/ "IBM Bluemix") で Node.js のウェブアプリを作りたくて、まずはローカルマシンに環境を作ってみました。

さらに、Node.jsのデバッグもできる [Visual Studio Code][] のデバッグを試してみます♪

[Visual Studio Code]:https://code.visualstudio.com/ "Visual Studio Code"

開発環境
----
- Node.js
- npm
- Express
- Visual Studio Code
- Windows 10

各種インストール
====

Node.js のインストール
----
[Node.js](https://nodejs.org/ "Node.js") でインストーラーをダウンロードし、インストーラーを実行します。
![20150820_nodejs-install.png](https://qiita-image-store.s3.amazonaws.com/0/3812/acb6df50-b233-06d8-861c-8e00108d997e.png)

Node.js のインストーラーを指示に従いながらインストールします。
![20150820_nodejs-install_002.png](https://qiita-image-store.s3.amazonaws.com/0/3812/2dfa7eb0-b44b-e25b-fd8a-fbad80326484.png)

Visual Studio Code のインストール
----
[Visual Studio Code][] でインストーラーをダウンロード・実行し、インストールします。
![20150820_vscode_001.png](https://qiita-image-store.s3.amazonaws.com/0/3812/8417af02-1ff8-4ade-eb5d-370b1406bf7c.png)

Express のプロジェクトを作成する
====
それではさっそく、Express のプロジェクトを作っていきます。
[Visual Studio Code の Node.js 開発ガイド][vs-code-dev-nodejs] を参考に、Express のひな形を作成してくれる `express-generator` を利用します。

[vs-code-dev-nodejs]:https://code.visualstudio.com/docs/runtimes/nodejs#VSCode "Node.js and Visual Studio Code End to End"

それでは、PowerShell を起動して、コマンドを実行してみましょう。

```ps1
# Expressジェネレーターをインストールする
PS> npm install -g express-generator

# 開発用のディレクトリを作成・ディレクトリへ移動する
PS> mkdir nodejsprojects
PS> cd nodejs\projects
```

```ps1
# Express のひな形を作成する
PS> express myExpres

   create : myExpressApp
   create : myExpressApp/package.json
   create : myExpressApp/app.js
   create : myExpressApp/public
   create : myExpressApp/public/images
   create : myExpressApp/public/javascripts
   create : myExpressApp/routes
   create : myExpressApp/routes/index.js
   create : myExpressApp/routes/users.js
   create : myExpressApp/public/stylesheets
   create : myExpressApp/public/stylesheets/styl
   create : myExpressApp/views
   create : myExpressApp/views/index.jade
   create : myExpressApp/views/layout.jade
   create : myExpressApp/views/error.jade
   create : myExpressApp/bin
   create : myExpressApp/bin/www

   install dependencies:
     > cd myExpressApp && npm install

   run the app:
     > SET DEBUG=myExpressApp:* & npm start
```

```ps1
# プロジェクトディレクトリに移動し、npm インストールを実行する
PS> cd myExpressApp
PS> npm install
debug@2.2.0 node_modules\debug
└── ms@0.7.1

serve-favicon@2.3.0 node_modules\serve-favicon
├── fresh@0.3.0
├── ms@0.7.1
├── etag@1.7.0
└── parseurl@1.3.0

cookie-parser@1.3.5 node_modules\cookie-parser
├── cookie@0.1.3
└── cookie-signature@1.0.6

morgan@1.6.1 node_modules\morgan
├── basic-auth@1.0.3
├── on-headers@1.0.0
├── depd@1.0.1
└── on-finished@2.3.0 (ee-first@1.1.1)

body-parser@1.13.3 node_modules\body-parser
├── bytes@2.1.0
├── content-type@1.0.1
├── depd@1.0.1
├── on-finished@2.3.0 (ee-first@1.1.1)
├── qs@4.0.0
├── raw-body@2.1.2 (unpipe@1.0.0)
├── http-errors@1.3.1 (inherits@2.0.1, statuses@1.2.1)
├── iconv-lite@0.4.11
└── type-is@1.6.6 (media-typer@0.3.0, mime-types@2.1.4)

express@4.13.3 node_modules\express
├── cookie-signature@1.0.6
├── fresh@0.3.0
├── escape-html@1.0.2
├── merge-descriptors@1.0.0
├── array-flatten@1.1.1
├── etag@1.7.0
├── content-type@1.0.1
├── cookie@0.1.3
├── utils-merge@1.0.0
├── parseurl@1.3.0
├── methods@1.1.1
├── range-parser@1.0.2
├── vary@1.0.1
├── path-to-regexp@0.1.7
├── content-disposition@0.5.0
├── serve-static@1.10.0
├── depd@1.0.1
├── on-finished@2.3.0 (ee-first@1.1.1)
├── finalhandler@0.4.0 (unpipe@1.0.0)
├── qs@4.0.0
├── proxy-addr@1.0.8 (forwarded@0.1.0, ipaddr.js@1.0.1)
├── type-is@1.6.6 (media-typer@0.3.0, mime-types@2.1.4)
├── accepts@1.2.12 (negotiator@0.5.3, mime-types@2.1.4)
└── send@0.13.0 (destroy@1.0.3, statuses@1.2.1, ms@0.7.1, mime@1.3.4, http-errors@1.3.1)

jade@1.11.0 node_modules\jade
├── character-parser@1.2.1
├── void-elements@2.0.1
├── commander@2.6.0
├── mkdirp@0.5.1 (minimist@0.0.8)
├── jstransformer@0.0.2 (is-promise@2.0.0, promise@6.1.0)
├── constantinople@3.0.2 (acorn@2.3.0)
├── with@4.0.3 (acorn@1.2.2, acorn-globals@1.0.5)
├── clean-css@3.3.9 (commander@2.8.1, source-map@0.4.4)
├── transformers@2.1.0 (css@1.0.8, promise@2.0.0, uglify-js@2.2.5)
└── uglify-js@2.4.24 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, yargs@3.5.4)
```

```ps1
# ウェブアプリケーションを開始する
PS> npm start
```

すると以下のダイアログが表示されるので、通信を許可する対象を選択し、「アクセスを許可する」を押してください。
![20150820_express_001.png](https://qiita-image-store.s3.amazonaws.com/0/3812/20fc7a9e-7020-2134-0bea-bdfe144ff83b.png)

ブラウザで `http://localhost:3000/` にアクセスすると、難なく Express のデフォルトページが表示され、PowerShellではアクセスログが出力されることが確認できました。

![20150820_express_002.png](https://qiita-image-store.s3.amazonaws.com/0/3812/8f633777-01fb-de92-aeb7-a3b3d55b7af3.png)

```ps1
> myExpressApp@0.0.0 start C:\Users\dz\nodejs\projects\myExpressApp
> node ./bin/www

GET / 200 355.828 ms - 170
GET /stylesheets/style.css 200 3.206 ms - 111
```

ウェブアプリケーション(サーバー)を止めるには、 `Ctrl + C` で終了して下さい。

Visual Studio Code でデバッグしてみる
====
それではお楽しみの Visual Studio Code でデバッグをば！

そのまま PowerShell から VS Code を立ち上げることができます。

```ps1
PS> code .
```
Express プロジェクトディレクトリが開かれた状態で、 VS Code が起動します。
![20150820_vscode_002.png](https://qiita-image-store.s3.amazonaws.com/0/3812/e7bc22e9-5d4a-7887-4fb7-19819e7d5443.png)

開発ガイドに従って、 `app.js` にサンプルコードを記述してみます。

```js:app.js
....
var app = express();

// ↓↓ ここから ↓↓
var msg = 'hello world';
console.log(msg);
// ↑↑ ここまで ↑↑
....
```
コード補完もばっちり効いていますね！
![20150820_vscode_003.png](https://qiita-image-store.s3.amazonaws.com/0/3812/a4bee3f5-d0d4-62ad-229f-1a1056ee9637.png)

 デバッグする
----
左のメニューバーのデバッグアイコン（虫っぽいアイコン）をクリックするとデバッグビューが表示されます。
![20150820_vscode_004.png](https://qiita-image-store.s3.amazonaws.com/0/3812/7a03ba14-de1e-0eda-770f-0c73fb472291.png)

それでは早速！ブレークポイントをつけて、左上のデバッグ開始ボタンを押しましょう。
![20150820_vscode_005.png](https://qiita-image-store.s3.amazonaws.com/0/3812/3cec8821-eee2-7cb7-211e-2a15bcef5d99.png)

おっしゃぁ、止まったぁ！
![20150820_vscode_006.png](https://qiita-image-store.s3.amazonaws.com/0/3812/514084fb-f334-b4a5-64ba-f5e9b7138e65.png)

変数やコールスタックなどもしっかり表示されています。

ということで、あっさりデバッグできてしまいました。

ちなみに、もしデバッグ開始したときに `not found 'node' on PATH` (環境変数PATHに node がみつかりません。(うろ覚え)) というエラーが出た場合は、PATHに node が設定されてないので、マシンを再起動するなどして解消してみてください。

Epilogue - おわりに
====
Visual Studio Code を使い始めたのは、仕事の Mac で IDE を選ぼうとして特にこだわりなく迷ってしまい、リリースされたばかり VS Code に手を出したのがきっかけでした。

今の案件は PHP なのでデバッグはできませんけど、Git の差分表示が結構見やすく、重宝しています。

さらに、0.7 からPHPのコード補完ができるようになったので、 Sublime Text と併用して便利に使っています。

また、余談ですが、[VS Code Node.js 開発ガイド][vs-code-dev-nodejs]には、*TypeScript* の利用についても書かれていますね。初期のころに少し触って使いやすいと感じたので、また書きたいです。

近況
====

最近
----
- [Check! Azure オートメーション ランブックで OMS Search API を利用する (和訳)](http://qiita.com/dz_/items/7de3c282adef71aae7c6/ "Check! Azure オートメーション ランブックで OMS Search API を利用する (和訳)")
- [Check! Node.js Express でウェブ開発 with Visual Studio Code](http://qiita.com/dz_/items/f24b66f9f464b054dd1b/ "Check! Node.js Express でウェブ開発 with Visual Studio Code") ← :new: :sparkles:

Phalcon関連
----

- [爆速フレームワーク!! Phalcon PHP Framework](
http://qiita.com/dz_/items/55ae18f7fe3a873bace1 "爆速フレームワーク!! Phalcon PHP Framework")
- [Meet Volt ! Phalcon 謹製テンプレートエンジン Volt - from 第71回 PHP勉強会](http://qiita.com/dz_/items/974a90b32ba6a6e38182 "Meet Volt ! Phalcon 謹製テンプレートエンジン Volt - from 第71回 PHP勉強会")
- [Meet Phalcon! - Phalcon PHPフレームワークを Nginx on Amazon EC2 にインストール！](http://qiita.com/dz_/items/e70d61487224b854b971 "Meet Phalcon! - Phalcon PHPフレームワークを Nginx on Amazon EC2 にインストール！")

Webフレームワーク関連
----
- [[初メモ] はじめての Tomcat 〜 つまづいたところまとめ (Java のバージョン指定、起動パラメータ など)](http://qiita.com/dz_/items/879ca03b5b594007ceab "[初メモ] はじめての Tomcat 〜 つまづいたところまとめ (Java のバージョン指定、起動パラメータ など)")
- [Check! はじめての CakePHP2 ポイントまとめ 〜 Blog Tutorial を動かそう](http://qiita.com/dz_/items/2dd4c68f43484f0f78da "Check! はじめての CakePHP2 ポイントまとめ 〜 Blog Tutorial を動かそう")
- [Check! はじめての CakePHP2 〜 bake でプロジェクトスケルトンを利用する](http://qiita.com/dz_/items/3fa2a7a184de645f71d4/ "Check! はじめての CakePHP2 〜 bake でプロジェクトスケルトンを利用する")

クラウド・インフラ関連
----
- [Check! はじめての fluentd を Amazon Linux で動かしてみる (ログを PHP から送る)](http://qiita.com/dz_/items/960319ffffa0d7355f8c "Check! はじめての fluentd を Amazon Linux で動かしてみる (ログを PHP から送る)")
- [Check! はじめての Fluentd 〜 IAMロールで Amazon EC2 と S3 間をセキュアに](http://qiita.com/dz_/items/224607c84112ccafa2d6 "Check! はじめての Fluentd 〜 IAMロールで Amazon EC2 と S3 間をセキュアに")
- [Check! はじめての Zabbix インストール on Debian x Amazon RDS](http://qiita.com/dz_/items/3e85dd369c8053ceffe8 "Check! はじめての Zabbix インストール on Debian x Amazon RDS")


技術ブログ寄稿
----

[cloudpack技術ブログ][cloudpack-blog]でも、AWS Lambda や 運用ツール Serf に関して記事を書いています。ご興味あれば読んでいただけると嬉しいです！

- <a href="http://blog.cloudpack.jp/author/oohira/" title="大平 かづみ の記事一覧 | cloudpack技術情報サイト"　target="_blank" rel="nofollow">大平 かづみ の記事一覧</a>

[cloudpack]:https://cloudpack.jp/ "cloudpack（クラウドパック） 400社を超える導入実績! EC2などAWSクラウドの導入設計、構築、運用保守サービス"
[cloudpack-blog]:http://blog.cloudpack.jp/ "cloudpack技術情報サイト"
[大平かづみ]:http://blog.cloudpack.jp/author/oohira/ "大平かづみの記事一覧"