読者です 読者をやめる 読者になる 読者になる

SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

Visual StudioでNode.jsを使ってみる

最近TypeScriptをちょこちょこ弄ってるので、流れでNode.jsも使ってみました。

準備

Node.jsのインストール

まずは、Node.jsをインストールします。
以下の公式ページから、インストーラをダウンロードしてきてインストールします。
Node.js
※一応、exe単体のバイナリも配布されてますが、Nodeを使うときには、npmなども含めて一緒に使うことが多いので、exe単体ではなくインストーラを使った方が良いかと思います。
f:id:minami_SC:20150308153928p:plain:w200

Nodeのバージョンマネージャ

Node.jsのバージョンを頻繁に入れ替えて動作させたい、とか、アップデートがあるたびに更新するのがメンドイ、、という方は、Nodeのバージョンマネージャを用いてインストールするとよいそうです。
nvmとかnodistあたりが有名どころっぽい。


勉強しはじめなので、そんな頻繁にバージョン入れ替えることもないだろう、、ということで、
自分は普通に公式のインストーラ版を使ってセットアップしました。

今後、バージョンマネージャの必要性を感じたときに、別途nodistあたりを試してみようかな、、と思ってます。
https://github.com/marcelklehr/nodist

Node.jsの動作確認

Node.jsをインストールしたら、とりあえず動作確認をしてみます。
インストーラでパスを通す設定にしておけば、コマンドラインでnodeコマンドが利用できるようになっています。
ここで一度、コマンドプロンプトで、nodeと入力して実行し、node.jsのREPL環境が動くかチェックしておくとよいと思います。
↓みたいな感じ
f:id:minami_SC:20150308153946p:plain

Ctrl+C, Ctrl+C、と入力すると、終了することができます。


VS用の拡張機能のインストール

https://nodejstools.codeplex.com/
Visual StudioでのNode.jsプロジェクト開発を助けてくれる、Node.js Tools for Visual Studio(NTVS)というものがあります。
Codeplexの以下のページからダウンロードしてきてインストールします。


NTVSをインストールすると、VSの新規プロジェクトのテンプレートに以下のような項目が追加されます。

JavaScript用プロジェクトのテンプレート

f:id:minami_SC:20150308153955p:plain:w400

TypeScript用プロジェクトのテンプレート

こちらは、なぜかExpressのバージョン4のテンプレートしかない。。。なぜ??
f:id:minami_SC:20150308154001p:plain:w400

使ってみる

さっそく、NTVSで追加されたプロジェクトテンプレートを利用してみます。

コンソールアプリでHello World!!

JavaScriptの「Blank Node.js Console Application」というテンプレートを選んでプロジェクトを作成してみます。

すると以下のようなプロジェクトが作られます。
f:id:minami_SC:20150308154103p:plain

app.jsは以下のような内容です。

app.js
console.log('Hello world');

よくあるシンプルなHelloWorldサンプルですね。

まずはCtrl+F5で実行してみましょう。
コイツを実行してみると、コンソールウィンドウが一瞬開いたあと、すぐに閉じられてしまいます。

スクリプト終了時にコンソールを閉じないように設定する

デフォルトの設定では、jsのスクリプトが正常に終了した場合はコンソールを閉じる、という動作になっています。
そこでVSのメニューから、ツール⇒オプションと辿り、オプションダイアログの、Node.js Toolsのタブを開きます。
で、「Wait for input when process exits normally」の項目にチェックを入れます。

f:id:minami_SC:20150308154115p:plain
こうすると、jsファイルの実行終了後も、コンソールウィンドウが開いたままになり、実行結果を確認できるようになります。
f:id:minami_SC:20150308154124p:plain


ブラウザなしでJavaScriptの実行ができるようになるので、JavaScript/TypeScriptの言語の学習用としても、とてもいい環境だと思います♪

シンプルなWebサーバーを作る

せっかくNode.jsを扱うので、単純なWebサーバーを作ってみます。
ここでは、localhostの1337ポートにアクセスしてきたら、Hello World!!という文字列をレスポンスとして返すだけのシンプルなWebサーバーです。

var http = require('http');

http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World!!\n');
}).listen(1337);

console.log('server running at http://localhost:1337/');

これを実行した後、ブラウザを立ち上げて、localhostの1337ポートにアクセスしてみます。
すると、以下のようにHello World!!という文字が表示されるのが確認できます。
f:id:minami_SC:20150308161649p:plain

その他のNTVSの備忘録

スタートアッププロジェクトの設定

Nodeでプログラムを実行するには、実行時のエントリポイントとなるスクリプトを設定する必要があります。
それには、以下の2通りの方法で設定できます。

jsファイルを右クリックして、メニューから選択

「Set as Node.js Startup File」を選ぶと、スタートアップ時に実行するスクリプトとして設定できます。
f:id:minami_SC:20150308154148p:plain:w400

プロジェクトのプロパティから設定

以下のように、プロジェクトファイルを選択した時のプロパティウィンドウからもStartup Fileの設定ができます。
f:id:minami_SC:20150308154157p:plain:w300

実行時にブラウザを起動する設定

プロジェクトのプロパティで、以下の2か所を設定しておくと、実行時に一緒にブラウザも起動するようになります。
Webサーバーのプログラムを書くときは、こうしておくとサーバーと一緒にブラウザも起動してくれて便利です。
f:id:minami_SC:20150308154202p:plain:w400