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 Package Manager は Node.js ディストリビューションに含まれています。`node` および `npm` コマンドラインツールを PATH に含めるには、新しいターミナル (コマンドプロンプト) を開く必要があります。

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

Linux: Linux のさまざまなフレーバーには、特定の Node.js パッケージが用意されています。パッケージマネージャーを使用した Node.js のインストールを参照して、お使いの Linux のバージョンに合わせた Node.js パッケージとインストール手順を確認してください。

Windows Subsystem for Linux: Windows をお使いの場合、WSL は Node.js 開発を行うのに最適な方法です。Windows 上で Linux ディストリビューションを実行し、Node.js を Linux 環境にインストールできます。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 が自動的に表示されたことに注目してください。

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

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

Hello World を実行する

`app.js` を Node.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` にブレークポイントを設定するには、エディターカーソルを最初の行に置き、F9 を押すか、行番号の隣のエディターの左ガターをクリックします。ガターに赤い丸が表示されます。

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

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

VS Code を「Hello World」で動作させてみたので、次のセクションではフルスタックの 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 アプリケーションには、`node ./bin/www` を実行するための `start` スクリプトを含む `package.json` ファイルがあります。これにより、Node.js アプリケーションが起動します。

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

npm start

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

優れたコード編集機能

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

次に VS Code を起動します

code .

注: Express ジェネレーターをインストールし、アプリをスキャフォールドするために VS Code 統合ターミナルを使用していた場合は、実行中の VS Code インスタンスからファイル > フォルダーを開くコマンドを使用して `myExpressApp` フォルダーを開くことができます。

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

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

VS Code は、TypeScript 型宣言 (型定義) ファイル (たとえば `node.d.ts`) を使用して、アプリケーションで使用している JavaScript ベースのフレームワークに関するメタデータを VS Code に提供します。型宣言ファイルは 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 へのアプリケーションのデプロイチュートリアルを参照してください。ここでは、Azure でウェブサイトを実行する方法を説明しています。

次のステップ

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

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