VS Code で Node.js を開発する

Visual Studio Code（略称 VS Code）はマイクロソフトが開発した無料のオープンソースコードエディタであり、現在最も人気のある Node.js 開発エディタの1つです。

主な利点

• 組み込みの Node.js サポート：インテリジェントなコード補完、デバッグなどの機能を提供
• 豊富な拡張機能：拡張機能マーケットプレイスからさまざまな Node.js 開発ツールをインストールできる
• 統合ターミナル：エディタ内で直接 Node.js プログラムを実行できる
• 軽量で高速：起動が速く、リソース消費が少ない

VS Code のインストール

1. アクセスVS Code 公式サイト
2. 対応する OS のバージョンをダウンロードする
3. インストールウィザードに従ってインストールを完了する
4. VS Code 完全チュートリアル：https://www.example.com/vscode/vscode-tutorial.html

また、中国国内の Alibaba と ByteDance にも VS Code ベースの AI IDE があります：

おすすめの拡張機能

1. Node.js Extension Pack：Node.js 関連の複数のプラグインを含む拡張機能パック
2. JavaScript (ES6) code snippets：ES6+ のコードスニペットを提供
3. Auto Rename Tag：HTML/XML タグを自動的にリネームする
4. ESLint：コード品質チェックツール
5. Prettier：コード整形ツール
6. npm Intellisense：npm パッケージの自動補完
7. Path Intellisense：ファイルパスの自動補完

最初の Node.js プロジェクトを作成する

プロジェクトを初期化する

1. ターミナルを開く（VS Code では Ctrl+` を押す）
2. プロジェクトフォルダを作成して移動する：

   mkdir my-node-app
   cd my-node-app

3. npm プロジェクトを初期化する：

   npm init -y

   package.json ファイルが生成されます：

   

メインファイルを作成する

1. VS Code で作成するapp.jsファイル
2. 以下のコードを入力する：

   サンプル

   const http = require('http');
   
   const server = http.createServer((req, res) => {
     res.statusCode = 200;
     res.setHeader('Content-Type', 'text/plain');
     res.end(' サンプル Node Test ~ Hello, Node.js!\n');
   });
   
   const port = 3000;
   server.listen(port, () => {
     console.log(`サーバーの実行アドレス：http://localhost:${port}/`);
   });
   

プロジェクトを実行する

1. ターミナルで実行する：

   node app.js

   

2. ブラウザを開いてアクセスするhttp://localhost:3000

   

入力する際は注意してください：console.VS Code の IntelliSense がコードの提案を提供できます。

Node.js アプリケーションをデバッグする

VS Code は強力なデバッグ機能を提供しています：

デバッグ設定

1. 左側のアクティビティバーの「実行とデバッグ」アイコンをクリックする
2. 「launch.json ファイルを作成」をクリックする
3. 「Node.js」環境を選択する

ブレークポイントの設定

1. コードの行番号の左側をクリックしてブレークポイントを設定する
2. F5 を押してデバッグを開始する
3. デバッグツールバーを使用して実行フローを制御する

デバッグコントロール

• 続行（F5）：次のブレークポイントまで実行を続行する
• ステップオーバー（F10）：現在の行を実行し、関数には入らない
• ステップイン（F11）：関数の中に入る
• 再起動（Ctrl+Shift+F5）：デバッグを最初からやり直す
• 停止（Shift+F5）：デバッグを終了する