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 パッケージが用意されています。お使いの 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 フォルダーが開きます。

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

File Explorer New File

ファイルに app.js という名前を付けます

File Explorer app.js

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

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

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

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

console IntelliSense

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

string 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 を実行できます

integrated terminal

このチュートリアルでは、コマンドラインツールの実行に外部ターミナルまたは VS Code 統合ターミナルのいずれかを使用できます。

Hello World のデバッグ

紹介で述べたように、VS Code には Node.js アプリケーション用のデバッガーが付属しています。簡単な Hello World アプリケーションをデバッグしてみましょう。

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

app.js breakpoint set

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

Run icon

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

hello world debugging

「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 アプリケーションには、node ./bin/www を実行する start スクリプトを含む package.json ファイルがあります。これにより、Node.js アプリケーションの実行が開始されます。

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

npm start

Node.js Web サーバーが起動し、http://localhost:3000 を参照して、実行中のアプリケーションを確認できます。

Your first Node Express App

優れたコード編集

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

次に、VS Code を起動します

code .

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

Node.js および Express のドキュメントでは、プラットフォームとフレームワークを使用してリッチアプリケーションを構築する方法がわかりやすく説明されています。Visual Studio Code は、優れたコード編集およびナビゲーションエクスペリエンスを提供することにより、これらのタイプのアプリケーションの開発をより生産的にします。

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

VS Code は、TypeScript 型宣言 (型定義) ファイル (たとえば node.d.ts) を使用して、アプリケーションで使用している JavaScript ベースのフレームワークに関するメタデータを VS Code に提供します。型宣言ファイルは TypeScript で記述されているため、パラメーターと関数のデータ型を表現でき、VS Code が豊富な IntelliSense エクスペリエンスを提供できるようになります。自動型取得 という機能のおかげで、これらの型宣言ファイルをダウンロードすることを心配する必要はありません。VS Code が自動的にインストールします。

他のファイルのモジュールを参照するコードを記述することもできます。たとえば、app.js では、Express.Router クラスをエクスポートする ./routes/index モジュールが必要です。index で IntelliSense を起動すると、Router クラスの形状を確認できます。

Express.Router IntelliSense

Express アプリのデバッグ

Express アプリケーション用にデバッガー構成ファイル launch.json を作成する必要があります。アクティビティバー (⇧⌘D (Windows、Linux Ctrl+Shift+D)) の [実行とデバッグ] をクリックし、launch.json ファイルを作成します リンクを選択して、デフォルトの launch.json ファイルを作成します。Node.js 環境を選択するには、configurations の type プロパティが "node" に設定されていることを確認します。ファイルが最初に作成されると、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 は新しいターミナルでサーバーを起動し、設定したブレークポイントをヒットします。そこから、変数の検査、ウォッチの作成、コードのステップ実行を行うことができます。

Debug session

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

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 を使用したタスクの実行。エラーと警告の表示。

04/03/2025