VS CodeのNode.jsチュートリアル

Hello World

最も簡単なNode.jsアプリケーション（「Hello World」）を作成することで、使い始めましょう。

"hello" という名前の空のフォルダを作成します。VS Codeを移動して、開きます。：

mkdir hello
cd hello
code .

ヒント：あなたは、コマンド・ラインから、直接、ファイルやフォルダを開くことができます。ピリオド '.' は、カレント・フォルダを参照します。その結果、VS Codeが開始され、Helloフォルダが開きます。

File Explorerツールバーから、New Fileボタンを押します：

そして、ファイルに、app.jsという名前をつけます：

.jsファイル拡張を使用して、VS Codeは、このファイルをJavaScriptと判断して、JavaScript言語サービスでコンテンツを評価します。JavaScriptサポートの詳細については、「VS Code JavaScript言語」のトピックを参照してください。

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

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

あなたが、consoleを入力したとき、コンソール・オブジェクトのIntelliSenseが、あなたに自動的に示されることに注意してください。

また、VS Codeが、そのmsgが、'hello world'に初期化上の文字列に基づいていることを知っていることに注意します。あなたが、msg.を入力する場合、あなたは、msg上で利用できる、全ての文字列関数を示しているIntelliSenseを見るでしょう。

IntelliSenseで実験した後に、上記のソース・コードの例から、どんな追加の変更でも戻り、そして、ファイル（Ctrl+S）を保存します。

Hello Worldを実行する

node app.js

統合ターミナル

Hello Worldをデバッグする

An Express application

Expressは、Node.jsアプリケーションを構築し、実行することのための、極めて評判がよいアプリケーション・フレームワークです。あなたは、Expressジェネレーター・ツールを使用して、新しいExpressアプリケーションに足場を組む（作成する）ことができます。Expressジェネレーターは、NPMモジュールとして発送され、NPMコマンドライン・ツールnpmを使用して、インストールされます。

ヒント：あなたが、適切にnpmを、お使いのコンピュータにインストールできたかを検証するには、ターミナルからnpm --helpを入力し、そして、あなたは、使用マニュアルを見る必要があります。

ターミナルから次のことを実行することによって、Expressジェネレーターをインストールします：

npm install -g express-generator

-gスイッチは、あなたのマシンに、Expressジェネレーターを、グローバルにインストールします。それで、あなたは、どこからでも、それを実行することができます。

私たちは、次に、実行することで、myExpressAppと呼び出される、新しいExpressアプリケーションに足場を組むことができます。：

express myExpressApp

これは、あなたのアプリケーションの内容で、myExpressAppを呼び出される、新しいフォルダを作成します。アプリケーションの依存関係の全てをインストールするには、（もう一度、NPMモジュールとして送り出される）、新しいフォルダに移動し、npmインストールを実行します。：

cd myExpressApp
npm install

ここで重要な点は、私たちは、私たちのアプリケーションが実行するテストする必要があります。作成されたExpressアプリケーションは、package.jsonファイルがあります。それは、ノード./bin/wwwを実行するための起動スクリプトが含まれています。これは、Node.jsアプリケーションの実行を開始します。

（実行される）Expressアプリケーション・フォルダ内のターミナルから、：

npm start

Node.jsウェブサーバは、開始するでしょう。そして、あなたは、動作中のアプリケーションを確かめるために、http://localhost:3000をブラウズすることができます。

Great code editing

myExpressAppフォルダ内のターミナルから、ブラウザを閉じて、CTRL+Cを押すことで、Node.jsサーバを停止します。

次に、VS Codeを起動します：

code .

備考:あなたが、Expressジェネレーターをインストールする、そして、アプリケーションに足場を組むために、VS Codeの統合ターミナルを使用している場合、あなたは、File > Open Folder...コマンドで、あなたの実行しているVS Codeのインスタンスから、myExpressAppフォルダを開くことができます。

Node.jsとExpressのドキュメンテーションは、基盤とフレームワークを使用して、高機能なアプリケーションをどのように大きな作業を構築するかを説明します。Visual Studio Codeは、編集とナビゲーションの経験が、大きなコードを提供することによって、この種のアプリケーションを、より生産的に開発することができるでしょう。

ファイルapp.jsを開き、Node.jsグローバルオブジェクト__dirname上にカーソルを重ねます。__dirnameが、文字列であることを、VS Codeが、どのように認識しているかに注目してください。 さらに興味深いことに、あなたは、Node.jsフレームワークに対する、全てのIntelliSenseを取得することができます。例えば、あなたは、Visual Studio Codeで入力する際に、httpクラスに対して、httpと完全なインテリセンスを要求することができます。

VS Codeは、あなたが、アプリケーションで利用しているJavaScriptに基づくフレームワークについて、VS Codeにメタデータを提供するために、TypeScript型宣言（型）ファイル（node.d.tsなど）を使用します。型宣言ファイルは、TypeScriptで記述されています。それで、それらは、VS Codeが、高機能なIntelliSenseの操作を提供できる、パラメータと関数の型を表現することができます。自動の型取得と呼ばれる機能のおかげで、あなたは、これらの型宣言ファイルのダウンロードについて心配する必要はありません。VS Codeは、あなたのために、それらを自動的にインストールします。

また、あなたは、他のファイルで、モジュールを参照するコードを記述することができます。例えば、 app.jsでは、私たちは./routes/indexモジュールを必要としています。それは、Express.Routerクラスをエクスポートします。あなたが、インデックス上でIntelliSenseを表示する場合、あなたは、Routerクラスの形状を確かめることができます。

Debug your Express app

あなたは、Expressアプリケーションのためのデバッガ設定ファイル、launch.jsonを作成する必要があるでしょう。Activity Barで、Debugアイコン、そして、その次に、既定のlaunch.jsonファイルを作成するために、Debugビューの一番上に設定の歯車アイコンをクリックします。確実に、設定の種類プロパティは、"node"に設定されているNode.js環境を選択してください。ファイルが、最初に作成されるとき、VS Codeは、package.json内の開始スクリプトを探し、使用します。Launch Program設定のための、プログラムとしてのその値（この場合、"${workspaceFolder}\\bin\\wwwです）

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\bin\\www"
        }
    ]
}

新しいファイルを保存し、Debugビューの一番上の設定ドロップダウンで、Launch Programが、選択されていることを確認します。app.jsを開いて、そして、Expressアプリ・オブジェクトが作成されるファイルの上側の近くに、左側のガターの行番号をクリックすることで、ブレークポイントを設定します。アプリケーションをデバッグを開始するために、F5を押します。VS Codeは、新しいターミナルで、サーバを開始し、そして、私たちが設定したブレークポイントに衝突するでしょう。そこから、あなたは、あなたのコードを通じて、watchesをstepを作成することで、変数を調べることができます。

Deploy your application

あなたが、Webアプリケーションを配布する方法を学びたい場合、私たちが、AzureでWebサイトを実行する方法を示す「Node.jsアプリケーションをAzureにデプロイする」チュートリアルを確認してください。

Next Steps

Visual Studio Codeで検索する多くの事があります。次のトピックを挑戦してみてください。：

• 設定－あなたが、どのように作業したいか、どのように、VS Codeをカスタマイズするかを学びます。
• デバッギング－これは、VS Codeが本当に輝くところです
• タスク－エラーと警告を表示するGulp、GruntとJakeと一緒にタスクを実行します。
• Node.jsのデバッグ－VS Codeに組み込まれているNode.jsデバッグの詳細については、こちらをご覧ください。
• デバッグのレシピ－クライアント側とコンテナのデバッギングのような脚本の例。