MENU
contact

VSCodeでNode.jsを使う方法

VSCode

採用はこちら

VSCode（Visual Studio Code）は、Node.jsを使ったJavaScript開発と相性のよいコードエディターです。

VSCodeにはJavaScriptやTypeScriptの編集支援機能、Node.js向けのデバッグ機能などが標準で用意されています。

ただし、VSCode自体にNode.jsの実行環境が含まれているわけではありません。

VSCodeでNode.jsを使うには、VSCodeとは別にNode.jsをインストールする必要があります。

基本的には、次のような関係になります。

  • VSCode：JavaScriptのコードを書く、編集する、デバッグする
  • Node.js：JavaScriptのコードを実行する
  • npm：Node.jsで利用するパッケージを管理する

Node.jsをインストールしてVSCodeから操作できるようにすれば、JavaScriptの実行だけでなく、WebサーバーやAPI、Webアプリケーションの開発なども行えるようになります。

目次

VSCodeでNode.jsを使うために必要なもの

VSCodeでNode.js開発を始める場合は、主に「VSCode」と「Node.js」の2つを準備します。

VSCode

VSCodeはMicrosoftが提供しているコードエディターです。

JavaScriptやTypeScriptのコード補完、エラー表示、デバッグ、統合ターミナルなど、Node.js開発に便利な機能が数多く搭載されています。

基本的なNode.js開発であれば、Node.js専用の拡張機能を必ずインストールする必要はありません。

Node.js

Node.jsは、JavaScriptをブラウザの外で実行するためのランタイム環境です。

通常のJavaScriptはWebブラウザ上で実行されることが多いですが、Node.jsを利用すると、パソコン上でJavaScriptを直接実行できます。

Node.jsは、たとえば次のような用途で使用されています。

  • Webサーバーの開発
  • APIの開発
  • Webアプリケーションのバックエンド開発
  • コマンドラインツールの作成
  • ファイル操作
  • 定型処理の自動化
  • ReactやVue.jsなどの開発環境の構築

npm

Node.jsをインストールすると、一般的にはnpmも一緒に利用できるようになります。

npmは、Node.jsやJavaScriptで使用するライブラリや開発ツールを管理するためのパッケージマネージャーです。

たとえば、ExpressやTypeScript、ESLintなどをnpmからインストールできます。

Node.jsをインストールする

最初に、Node.jsをパソコンへインストールします。

Node.js公式サイトでは、LTS版やCurrent版などが提供されています。

LTS版を選ぶのが一般的

Node.jsを初めて利用する場合や、通常のWeb開発で利用する場合は、基本的にLTS版を選ぶと扱いやすいでしょう。

LTSは「Long Term Support」の略で、長期間のサポートを前提としたリリースです。

一方、Current版では新しい機能を早く利用できますが、使用するライブラリや開発環境によってはLTS版ほど安定した運用をしやすいとは限りません。

特別な理由がなければ、学習用途や一般的な開発ではLTS版を選択するのが無難です。

なお、Node.jsのバージョンは頻繁に更新されるため、インストール時には公式サイトで最新のLTS版を確認するとよいでしょう。

Node.jsがインストールされているか確認する

Node.jsをインストールしたら、VSCodeのターミナルから正常に利用できるか確認します。

VSCodeのターミナルを開く

VSCode上部のメニューから「ターミナル」→「新しいターミナル」を選択します。

WindowsやLinuxでは、次のショートカットでもターミナルを開ける場合があります。

Ctrl + `

VSCodeには統合ターミナルが用意されているため、コマンドプロンプトやPowerShellなどを別に起動しなくてもNode.jsを操作できます。

Node.jsのバージョンを確認する

ターミナルで次のコマンドを実行します。

node -v

または、次のコマンドでも確認できます。

node --version

Node.jsが正しくインストールされていれば、次のようにバージョン番号が表示されます。

v24.x.x

実際の数字は、インストールしたNode.jsのバージョンによって異なります。

npmのバージョンを確認する

続いて、npmも利用できるか確認します。

npm -v

または、

npm --version

と入力します。

バージョン番号が表示されれば、npmも利用できる状態です。

VSCodeでNode.jsプロジェクトを作成する

Node.jsの準備ができたら、実際にプロジェクトを作成します。

プロジェクト用フォルダを作成する

たとえば、次のようなフォルダを作成します。

node-test

VSCodeの「ファイル」→「フォルダーを開く」から、作成したフォルダを開きます。

ターミナルから作成する場合は、次のように操作できます。

mkdir node-test
cd node-test

VSCodeのcodeコマンドが利用できる環境であれば、次のコマンドで現在のフォルダをVSCodeで開くこともできます。

code .

JavaScriptファイルを作成する

プロジェクトフォルダを開いたら、JavaScriptファイルを作成します。

app.jsを作成する

VSCodeのエクスプローラーから新しいファイルを作成し、次の名前を付けます。

app.js

.jsはJavaScriptファイルの拡張子です。

JavaScriptコードを書く

app.jsに次のコードを記述します。

console.log("Hello Node.js!");

これで、Node.jsから実行できる簡単なJavaScriptプログラムが完成します。

VSCodeからNode.jsを実行する

作成したJavaScriptファイルは、VSCodeのターミナルからNode.jsを使って実行できます。

nodeコマンドを実行する

app.jsが保存されているフォルダで、次のコマンドを実行します。

node app.js

すると、ターミナルに次のように表示されます。

Hello Node.js!

この「JavaScriptファイルを作成して、nodeコマンドで実行する」という流れが、Node.jsの基本的な使い方です。

Node.jsで変数や関数を使う

Node.jsで実行するJavaScriptでは、通常のJavaScriptと同じように変数や関数を使用できます。

たとえば、次のように記述します。

const userName = "Taro";

function greeting(name) {
    return `こんにちは、${name}さん`;
}

console.log(greeting(userName));

保存したあとに、

node app.js

を実行すると、次のように表示されます。

こんにちは、Taroさん

基本的なJavaScript文法は、ブラウザ上で使用するJavaScriptと共通しています。

npmでNode.jsプロジェクトを初期化する

Node.jsで本格的に開発する場合は、npmを使ってプロジェクトを管理します。

package.jsonを作成する

プロジェクトフォルダで次のコマンドを実行します。

npm init

プロジェクト名やバージョンなどを対話形式で設定できます。

すべて基本設定のまま作成する場合は、次のコマンドが便利です。

npm init -y

実行すると、一般的に次のファイルが作成されます。

package.json

package.jsonには、主に次のような情報が記録されます。

  • プロジェクト名
  • バージョン
  • 使用するパッケージ
  • npmスクリプト
  • モジュール方式の設定

Node.jsプロジェクトでは重要な設定ファイルの一つです。

npmでパッケージをインストールする

Node.jsでは、npmを利用して外部パッケージを追加できます。

Expressをインストールする

たとえば、Webサーバー開発でよく使われるExpressをインストールする場合は、次のコマンドを実行します。

npm install express

実行すると、一般的には次のような変化があります。

  • node_modulesフォルダが作成される
  • package-lock.jsonが作成または更新される
  • package.jsonにExpressの依存関係が追加される

プロジェクトの状態によって、作成・更新されるファイルは異なる場合があります。

Node.jsで簡単なWebサーバーを作る

Node.jsには、標準機能だけでもHTTPサーバーを作成できます。

server.jsを作成する

新しくserver.jsというファイルを作成し、次のコードを書きます。

const http = require("http");

const server = http.createServer((req, res) => {
    res.writeHead(200, {
        "Content-Type": "text/plain; charset=utf-8"
    });

    res.end("Hello Node.js Server!");
});

server.listen(3000, () => {
    console.log("http://localhost:3000 で起動しました");
});

Webサーバーを起動する

ターミナルから次のコマンドを実行します。

node server.js

ブラウザで次のアドレスへアクセスします。

http://localhost:3000

画面に次の文字列が表示されれば、Webサーバーは正常に動作しています。

Hello Node.js Server!

サーバーを終了するときは、ターミナルで次のキーを押します。

Ctrl + C

VSCodeでNode.jsをデバッグする

VSCodeにはNode.js向けのデバッグ機能が組み込まれています。

そのため、コードを実行するだけでなく、処理を途中で停止して変数の内容などを確認できます。

ブレークポイントを設定する

たとえば、次のコードがあるとします。

const a = 10;
const b = 20;

const result = a + b;

console.log(result);

処理を止めたい行の左側にある余白をクリックすると、赤い丸が表示されます。

これがブレークポイントです。

F5キーでデバッグを開始する

ブレークポイントを設定した状態でF5キーを押すと、デバッグを開始できます。

初回は実行環境の選択を求められる場合があります。

Node.jsのプログラムをデバッグする場合は、Node.jsに対応した構成を選択します。

ブレークポイントで処理が停止すると、VSCode上で次のような情報を確認できます。

  • 変数の値
  • コールスタック
  • ウォッチ式
  • 現在実行している処理
  • 関数呼び出しの流れ

エラーの原因を調べる場合に非常に便利です。

参考サイト

Visual Studio CodeによるNode.jsのデバッグ（その１）

launch.jsonでデバッグ設定を管理する

複雑なNode.jsプロジェクトでは、.vscode/launch.jsonを利用してデバッグ設定を管理できます。

launch.jsonの基本例

たとえば、app.jsをデバッグする場合は次のような設定を利用できます。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Node.jsをデバッグ",
            "program": "${workspaceFolder}/app.js"
        }
    ]
}

programには、デバッグしたいJavaScriptファイルを指定します。

ただし、単純なNode.jsプログラムであれば、必ずしもlaunch.jsonを作成する必要はありません。

実行方法や環境変数などを細かく設定したい場合に利用すると便利です。

package.jsonのscriptsを使う

Node.jsプロジェクトでは、実行コマンドをpackage.jsonのscriptsに登録できます。

startコマンドを登録する

たとえば、package.jsonを次のように設定します。

{
    "scripts": {
        "start": "node app.js"
    }
}

すると、

npm start

を実行するだけで、

node app.js

と同じ処理を実行できます。

プロジェクトが大きくなると、npm scriptsを利用して実行方法を統一すると管理しやすくなります。

Node.jsでES Modulesを使う

Node.jsでは、CommonJSとES Modulesという主に2つのモジュール方式を利用できます。

CommonJS

CommonJSでは、require()を使ってモジュールを読み込みます。

const fs = require("fs");

Node.jsでは現在も正式に利用できるモジュール方式です。

ES Modules

ES Modulesでは、importやexportを利用します。

import fs from "node:fs";

代表的な設定方法の一つが、package.jsonに次の設定を追加する方法です。

{
    "type": "module"
}

この設定により、そのパッケージスコープ内の.jsファイルをES Modulesとして扱えます。

.mjsや.cjsを使う方法もある

Node.jsでは、拡張子によってモジュール方式を明示することもできます。

.mjsはES Modulesとして扱われます。

app.mjs

一方、.cjsはCommonJSとして扱われます。

app.cjs

現在のNode.jsではモジュール形式の構文検出が行われる場合もあるため、プロジェクトではpackage.jsonのtypeや拡張子を使ってモジュール方式を明示しておくと分かりやすいでしょう。

VSCodeのIntelliSenseを活用する

VSCodeにはIntelliSenseと呼ばれるコード補完機能があります。

コード入力を補助してくれる

たとえば、次のコードを書きます。

const message = "Hello";

続いて、

message.

まで入力すると、利用できるメソッドなどが候補として表示されます。

型情報が提供されているライブラリであれば、インストールしたパッケージについても補完候補や説明を確認できます。

Node.js開発では、IntelliSenseを活用することでコーディング効率を高められます。

VSCodeとNode.jsでTypeScriptを使う

Node.jsではJavaScriptだけでなく、TypeScriptも利用できます。

VSCodeにはTypeScriptの編集支援機能がありますが、TypeScriptコンパイラをプロジェクトで利用する場合は、通常は別途インストールします。

TypeScriptをインストールする

プロジェクトフォルダで次のコマンドを実行します。

npm install --save-dev typescript

続いて、

npx tsc --init

を実行すると、TypeScriptの設定ファイルであるtsconfig.jsonを作成できます。

TypeScriptは、型チェックを利用して大規模なJavaScript開発を行いたい場合に便利です。

Node.js開発に拡張機能は必須ではない

VSCodeには、JavaScriptやTypeScriptの開発に必要な基本機能があらかじめ含まれています。

たとえば、次のような機能を標準で利用できます。

  • JavaScriptのコード補完
  • TypeScriptの言語サポート
  • Node.jsのデバッグ
  • 統合ターミナル
  • コードナビゲーション
  • エラーや警告の表示

そのため、簡単なNode.js開発であれば、追加の拡張機能がなくても始められます。

必要に応じて拡張機能を追加する

実際の開発では、用途に応じてESLintやPrettierなどの拡張機能を追加すると便利です。

ただし、最初から大量の拡張機能をインストールする必要はありません。

必要になった機能だけ追加していく方法がおすすめです。

VSCodeでNode.jsが動かない場合の対処方法

Node.jsをインストールしても、VSCodeから正常に実行できないことがあります。

その場合は、いくつかのポイントを確認します。

Node.jsがインストールされているか確認する

まず、次のコマンドを実行します。

node -v

バージョン番号が表示されない場合は、Node.jsが正しくインストールされていない可能性があります。

VSCodeのターミナルを開き直す

Node.jsをインストールした直後は、すでに開いていたVSCodeのターミナルにPATHの変更が反映されていない場合があります。

その場合は、ターミナルを閉じて新しく開き直します。

必要に応じて、VSCode自体を再起動してください。

実行しているフォルダを確認する

たとえば、app.jsが次のフォルダにあるとします。

C:\project\node-test\app.js

ターミナルが別のフォルダを開いている状態で、

node app.js

を実行すると、ファイルを見つけられない場合があります。

app.jsが保存されているフォルダへ移動してから実行してください。

nodeコマンドが認識されない場合

環境によっては、

node is not recognized

や、

node: command not found

といったエラーが表示される場合があります。

この場合は、主に次の原因が考えられます。

  • Node.jsがインストールされていない
  • PATHが正しく設定されていない
  • Node.jsのインストール後にターミナルを開き直していない
  • 使用しているシェルに設定が反映されていない

まずはNode.jsのインストール状況とPATHを確認しましょう。

WindowsではWSLを使う方法もある

Windows環境では、通常のWindows上にNode.jsをインストールする方法だけでなく、WSLを利用する方法もあります。

WSLは「Windows Subsystem for Linux」の略で、Windows上でLinux環境を利用できる機能です。

VSCodeとWSLを組み合わせる

VSCodeはWSL環境と連携できます。

そのため、

「Windows上のVSCodeでコードを編集しながら、WSL上のNode.jsで実行する」

という開発環境も構築できます。

Linuxサーバーに近い環境で開発したい場合などに便利です。

ただし、Node.jsを初めて学ぶだけであればWSLは必須ではありません。

まずはWindows上にNode.jsを直接インストールして使う方法でも問題ありません。

VSCodeでNode.jsを使う基本的な流れ

VSCodeでNode.jsを利用するときは、基本的に次の流れになります。

  1. VSCodeをインストールする
  2. Node.jsをインストールする
  3. VSCodeでプロジェクトフォルダを開く
  4. JavaScriptファイルを作成する
  5. VSCodeのターミナルを開く
  6. node -vでNode.jsを確認する
  7. node app.jsでJavaScriptを実行する
  8. 必要に応じてnpm init -yを実行する
  9. npmで必要なパッケージをインストールする
  10. ブレークポイントやF5を使ってデバッグする

まとめ

VSCodeでNode.jsを使うには、VSCodeとは別にNode.jsをインストールする必要があります。

VSCodeはコードの編集やデバッグを支援するツールであり、実際にJavaScriptを実行するのはNode.jsです。

Node.jsをインストールしたら、VSCodeのターミナルで、

node -v

を実行して動作確認を行い、JavaScriptファイルを、

node app.js

のように実行します。

さらに、npmを使えば外部パッケージを追加でき、package.jsonを利用してプロジェクト設定や実行コマンドを管理できます。

VSCodeにはNode.js向けのデバッグ機能も標準で用意されているため、ブレークポイントを使った動作確認も簡単です。

まずは小さなapp.jsを作成してnode app.jsで実行するところから始めると、VSCodeとNode.jsの関係を理解しやすいでしょう。

以上、VSCodeでNode.jsを使う方法についてでした。

最後までお読みいただき、ありがとうございました。

VSCode
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

  1. ホーム
  2. VSCode
  3. VSCodeでNode.jsを使う方法
目次