Visual Studio CodeでのNode.jsチュートリアル

Node.jsは、JavaScriptを使用して高速でスケーラブルなサーバーアプリケーションを構築するためのプラットフォームです。Node.jsはランタイムであり、npmはNode.jsモジュール用のパッケージマネージャーです。

Visual Studio Codeは、JavaScriptおよびTypeScript言語のサポート、そしてNode.jsのデバッグ機能を標準で備えています。ただし、Node.jsアプリケーションを実行するには、マシンにNode.jsランタイムをインストールする必要があります。

このウォークスルーを開始するには、お使いのプラットフォーム用のNode.jsをインストールしてください。NodeパッケージマネージャーはNode.jsの配布物に含まれています。nodeおよびnpmコマンドラインツールがPATHに通るようにするために、新しいターミナル（コマンドプロンプト）を開く必要があります。

コンピューターにNode.jsが正しくインストールされているかテストするには、新しいターミナルを開き、node --versionと入力します。インストールされている現在のNode.jsのバージョンが表示されるはずです。

Linux: さまざまなディストリビューションのLinux向けに、特定のNode.jsパッケージが用意されています。お使いのLinuxバージョンに適したNode.jsパッケージとインストール手順については、パッケージマネージャーを介したNode.jsのインストールを参照してください。

Windows Subsystem for Linux: Windowsをお使いの場合、WSLはNode.js開発を行うための優れた方法です。Windows上でLinuxディストリビューションを実行し、そのLinux環境にNode.jsをインストールできます。WSL拡張機能と組み合わせることで、WSLのコンテキストで実行しながら、VS Codeの完全な編集およびデバッグのサポートを受けられます。詳細については、WSLでの開発を参照するか、WSLでの作業チュートリアルを試してください。

Hello World

まずは、最もシンプルなNode.jsアプリケーションである「Hello World」を作成することから始めましょう。

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

mkdir hello
cd hello
code .

ヒント: コマンドラインからファイルやフォルダーを直接開くことができます。ピリオド「.」は現在のフォルダーを指すため、VS Codeが起動してHelloフォルダーが開きます。

エクスプローラーのツールバーから、[新しいファイル] ボタンを押します

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

拡張子.jsを使用することで、VS CodeはこのファイルをJavaScriptとして解釈し、JavaScript言語サービスで内容を評価します。JavaScriptのサポートについての詳細は、VS CodeのJavaScript言語のトピックを参照してください。

app.jsにシンプルな文字列変数を作成し、その文字列の内容をコンソールに出力します

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

console.と入力すると、consoleオブジェクトに対するIntelliSenseが自動的に表示されたことに注目してください。

また、VS Codeが'Hello World'の初期化に基づいてmsgが文字列であることを認識していることにも注目してください。msg.と入力すると、IntelliSenseによってmsgで利用可能なすべての文字列関数が表示されます。

IntelliSenseを試した後、上記のソースコード例から余分な変更を元に戻し、ファイルを保存します（⌘S（Windows、Linux Ctrl+S））。

Hello Worldの実行

Node.jsでapp.jsを実行するのは簡単です。ターミナルから以下を入力するだけです

node app.js

ターミナルに「Hello World」と出力され、Node.jsの処理が終了するのを確認できるはずです。

統合ターミナル

VS Codeには、シェルコマンドを実行するために使用できる統合ターミナルがあります。そこから直接Node.jsを実行できるため、コマンドラインツールの実行中にVS Codeから切り替える必要がありません。

表示 > ターミナル（バッククォート文字を使用した⌃`（Windows、Linux Ctrl+`））で統合ターミナルが開き、そこでnode app.jsを実行できます。

このウォークスルーでは、コマンドラインツールの実行に、外部ターミナルまたはVS Code統合ターミナルのどちらを使用してもかまいません。

Hello Worldのデバッグ

はじめに紹介したように、VS CodeにはNode.jsアプリケーション用のデバッガーが標準で搭載されています。このシンプルなHello Worldアプリケーションをデバッグしてみましょう。

app.jsにブレークポイントを設定するには、エディターのカーソルを1行目に置いてF9を押すか、行番号の横にあるエディター左側の余白をクリックします。余白に赤い円が表示されます。

デバッグを開始するには、アクティビティバーで [実行とデバッグ] ビューを選択します

これで、デバッグツールバーの緑色の矢印をクリックするか、F5を押して「Hello World」を起動してデバッグできます。ブレークポイントにヒットし、このシンプルなアプリケーションを表示しながらステップ実行できます。VS Codeのステータスバーの色が変わり、デバッグモードであることを示すとともに、[デバッグコンソール] が表示されることに注目してください。

「Hello World」で動作するVS Codeを確認したところで、次のセクションではフルスタックのNode.js WebアプリでVS Codeを使用する方法を説明します。

注意: 「Hello World」の例は終了したため、Expressアプリを作成する前にそのフォルダーから移動してください。必要に応じて「Hello」フォルダーを削除してもかまいません。残りのウォークスルーには不要です。

Expressアプリケーション

Expressは、Node.jsアプリケーションを構築および実行するための非常に人気のあるアプリケーションフレームワークです。Express Generatorツールを使用して、新しいExpressアプリケーションをスキャフォールディング（作成）できます。Express Generatorはnpmモジュールとして提供されており、npmコマンドラインツール npm を使用してインストールします。

ヒント: コンピューターに npm が正しくインストールされているかテストするには、ターミナルから npm --help と入力すると、使用方法に関するドキュメントが表示されるはずです。

ターミナルから以下を実行して、Express Generatorをインストールします

npm install -g express-generator

-g スイッチは、Express Generatorをマシンにグローバルにインストールするため、どこからでも実行できるようになります。

これで、以下を実行して、myExpressApp という名前の新しいExpressアプリケーションをスキャフォールディングできます

express myExpressApp --view pug

これにより、アプリケーションの内容が含まれる myExpressApp という新しいフォルダーが作成されます。--view pug パラメーターは、ジェネレーターに pug テンプレートエンジンを使用するように指示します。

アプリケーションのすべての依存関係（これもnpmモジュールとして提供されます）をインストールするには、新しいフォルダーに移動して npm install を実行します

cd myExpressApp
npm install

この時点で、アプリケーションが動作するかテストする必要があります。生成されたExpressアプリケーションには package.json ファイルがあり、これには node ./bin/www を実行する start スクリプトが含まれています。これにより、Node.jsアプリケーションが起動します。

Expressアプリケーションフォルダー内のターミナルから、以下を実行します

npm start

Node.js Webサーバーが起動し、https://:3000 にアクセスして実行中のアプリケーションを確認できます。

優れたコード編集

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

それではVS Codeを起動します

code .

注意: VS Codeの統合ターミナルを使用してExpress Generatorをインストールし、アプリをスキャフォールディングした場合は、起動しているVS Codeインスタンスから [ファイル] > [フォルダーを開く] コマンドを使用して myExpressApp フォルダーを開くことができます。

Node.js と Express のドキュメントには、このプラットフォームとフレームワークを使用して高機能なアプリケーションを構築する方法が詳細に説明されています。Visual Studio Codeは、優れたコード編集とナビゲーションの体験を提供することで、このようなアプリケーションの開発生産性を向上させます。

app.js ファイルを開き、Node.jsのグローバルオブジェクト __dirname の上にホバーします。VS Codeが __dirname を文字列として認識していることに注目してください。さらに興味深いことに、Node.jsフレームワークに対する完全なIntelliSenseを利用できます。たとえば、http をrequireすると、Visual Studio Codeで入力するにつれて http クラスに対する完全なIntelliSenseが表示されます。

VS Codeは、アプリケーションで使用しているJavaScriptベースのフレームワークに関するメタデータをVS Codeに提供するために、TypeScript型定義（型タイピング）ファイル（例: node.d.ts）を使用します。型定義ファイルはTypeScriptで記述されているため、パラメーターや関数のデータ型を表現でき、VS Codeが高度なIntelliSense体験を提供できるようになります。Automatic Type Acquisition（自動型取得）と呼ばれる機能のおかげで、これらの型定義ファイルのダウンロードについて心配する必要はありません。VS Codeが自動的にインストールしてくれます。

他のファイルにあるモジュールを参照するコードを作成することもできます。たとえば、app.js では Express.Router クラスをエクスポートする ./routes/index モジュールをrequireしています。index に対するIntelliSenseを表示すると、Router クラスの構造を確認できます。

Expressアプリのデバッグ

Expressアプリケーション用に、デバッガー設定ファイル launch.json を作成する必要があります。アクティビティバー（⇧⌘D（Windows、Linux Ctrl+Shift+D））の [実行とデバッグ] をクリックし、[launch.json ファイルを作成します] リンクを選択して、デフォルトの launch.json ファイルを作成します。configurations の type プロパティが "node" に設定されていることを確認して、Node.js 環境を選択します。ファイルが最初に作成されるとき、VS Codeは package.json から start スクリプトを探し、その値を [プログラムの起動] 設定の program（この場合は "${workspaceFolder}\\bin\\www"）として使用します。

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

新しいファイルを保存し、[実行とデバッグ] ビューの上部にある設定ドロップダウンで [プログラムの起動] が選択されていることを確認します。app.js を開き、行番号の左側の余白をクリックして、Expressアプリのオブジェクトが作成されるファイルの先頭付近にブレークポイントを設定します。F5 を押して、アプリケーションのデバッグを開始します。VS Codeは新しいターミナルでサーバーを起動し、設定したブレークポイントで停止します。そこから変数を検査したり、ウォッチ式を作成したり、コードをステップ実行したりできます。

アプリケーションのデプロイ

Webアプリケーションのデプロイ方法について知りたい場合は、AzureでWebサイトを実行する方法を説明しているAzureへのアプリケーションのデプロイチュートリアルを確認してください。

次のステップ

Visual Studio Codeには探索すべき機能がまだまだあります。次のトピックもお試しください。

• Node.jsプロファイルテンプレート - 厳選された拡張機能、設定、スニペットのセットを含む新しいプロファイルを作成します。
• 設定 - 自分の作業スタイルに合わせてVS Codeをカスタマイズする方法を学びます。
• デバッグ - ここで VS Code は真価を発揮します。
• ビデオ: VS Codeでのデバッグの開始 - VS Codeでのデバッグ機能の使い方を学びます。
• Node.jsのデバッグ - VS Codeに組み込まれているNode.jsのデバッグ機能の詳細を学びます。
• デバッグレシピ - クライアント側やコンテナデバッグなどのシナリオの例です。
• タスク - Gulp、Grunt、Jakeを使用したタスクの実行、およびエラーと警告の表示について学びます。