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 ディストリビューションを実行し、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. と入力すると、msg で利用可能なすべての文字列関数を示す IntelliSense が表示されます。

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 にブレークポイントを設定するには、エディターカーソルを最初の行に置き、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 .

注意: Express ジェネレーターのインストールとアプリのスキャフォールドに VS Code の統合ターミナルを使用していた場合、実行中の 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 は TypeScript の型定義 (typings) ファイル (例: 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 スクリプトを探し、その値を [Launch Program] 構成の program (この場合は "${workspaceFolder}\\bin\\www) として使用します。

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

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

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

Web アプリケーションのデプロイ方法を学びたい場合は、Azure へのアプリケーションのデプロイチュートリアルをご覧ください。そこでは、Azure で Web サイトを実行する方法を紹介しています。

次のステップ

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

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