VS CodeによるNode.jsアプリケーション

このチュートリアルを始めるためには Node.js が必要です。
ご使用の前に、Node.js をインストールしておいてください。

Hello World

最も簡単なNode.jsアプリケーションの “Hello World” を作成しましょう。
“hello”という空のフォルダを作成し、そこに移動して VS Code を開きます：

mkdir hello
cd hello
code .

ファイル・エクスプローラのツールバーで、[新規ファイル]ボタンを押します。

ファイル名をapp.jsにします：

.jsファイル拡張子を使用することにより、VS Code はこのファイルをJavaScriptとして解釈し、JavaScript言語サービスでコンテンツを評価します。

app.jsに単純な文字列変数を作成し、その文字列の内容をコンソールに送信します。

var msg = 'Hello World';
console.log(msg);

consoleをタイプしたときに注意してください。 console オブジェクトのインテリセンスが自動的に表示されます。、VS Code は、JavaScriptコードを編集するときには自動的にDOMのインテリセンスを表示します。

また、VS Codeは、msg が ‘Hello World’ で初期化された文字列であることも認識しています。
msg. と入力すると、インテリセンスは msg に利用できるすべての文字列関数を表示します。

インテリセンスを確認したら、ソースコードから余分な変更を元に戻してファイルを保存してください（Ctrl+S）。

Hello World の実行

Node.jsからapp.jsを実行するのは簡単で、ターミナルから、次のコマンドを入力するだけです。

node app.js

“Hello World” が端末に出力され、Node.js に戻るのが確認できます。

統合端末(Integrated Terminal)

VS Codeには、シェル・コマンド実行用の統合端末(Integrated Terminal)があります。そこから Node.js を直接実行できますので、VS Code の実行にコマンドラインツールへ切換える必要がなくなります。
View > Integrated Terminal (Ctrl+` ）で統合端末を開き、そこで node app.js を実行することができます：

このチュートリアルでは、コマンドラインツールの実行には、外部端末/VS Code 統合端末のいずれも使用できます。

Hello Worldのデバッグ

冒頭で述べたように、VS CodeにはNode.jsアプリケーション用のデバッガが付属しています。簡単なHello Worldアプリケーションのデバッグをしてみましょう。
app.jsにブレークポイントを設定するには、最初の行にエディタのカーソルを置き、F9キーを押すか、行番号の横にあるエディタの左のガターをクリックすると、ガターに赤い円が表示されます。

先ずこの簡単なワークスペース用にデバッガを設定する必要がありますので、サイドバーからデバッグビューを選択します。

デバッグビューの上部にある歯車の設定アイコンをクリックして、デフォルトのlaunch.json設定ファイルを作成し、デバッグ環境にはNode.jsを選択します。この設定ファイルでは、アプリケーションの起動方法や、どのような引数を渡すのか、作業ディレクトリなどを指定できます。
新しいlaunch.jsonファイルは、ワークスペースのルートにあるVS Code 固有の.vscodeフォルダに作成されます。

デフォルトのNode.js起動プログラム構成を作成したら、”Hello World” を起動してデバッグをするために、デバッグツールバーの緑色の矢印をクリックするか、F5キーを押します。ブレークポイントにヒットすると、簡単なアプリケーションを表示したり、ステップ実行したりすることができます。VS Code がデバッグモードになっていることを示すために、ステータスバーがオレンジ色になると共に、DEBUG CONSOLE が表示されていることに注意してください。

「Hello World」でVS Code を見たところで、次のセクションでは、VS Code をフルスタックNode.js Web Appで使用する方法を示します。