6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ktdatascienceTeam Coffee

VSCodeデバッグを劇的に効率化｜launch.jsonの正しい使い方

6
Posted at

はじめに

VSCodeでデバッグを行う際、「実行とデバッグ」ボタンを押してなんとなくデバッグを始めていませんか？実は、launch.json を適切に設定することで、デバッグの効率は大幅に向上します。

本記事では、launch.json の基本から実践的な活用方法まで、体系的に解説します。

対象読者

  • VSCodeを使っているが、デバッグ設定を十分に活用できていない方
  • launch.json の存在は知っているが、詳しい設定方法が分からない方
  • より効率的なデバッグワークフローを構築したい方

前提知識

  • VSCodeの基本的な操作
  • デバッグの基本概念（ブレークポイント、ステップ実行など）

前提知識はこちらをご覧ください

launch.jsonとは

デバッグ設定ファイルの役割

launch.json は、VSCodeでアプリケーションをデバッグする際の動作を定義する設定ファイルです。このファイルを使用することで、以下のような細かい制御が可能になります。

  • デバッグ対象のプログラムやスクリプトの指定
  • 実行時の引数や環境変数の設定
  • 作業ディレクトリの指定
  • デバッグ前のビルドタスク実行
  • 複数のデバッグ設定の切り替え

配置場所と作成方法

launch.json は、ワークスペースのルートディレクトリにある .vscode フォルダ内に配置されます。

your-project/
  ├── .vscode/
  │   └── launch.json
  ├── src/
  └── package.json

作成手順

  1. VSCodeのサイドバーから「実行とデバッグ」アイコンをクリック
  2. 「launch.json ファイルを作成」をクリック
  3. デバッグ環境（Node.js, Python, C++など）を選択

VSCodeが自動的に基本的な設定を生成してくれます。

launch.jsonの基本構造

launch.json は以下のような構造になっています。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}
  • version: 設定ファイルのバージョン（通常は 0.2.0）
  • configurations: デバッグ設定の配列（複数の設定を定義可能）

launchとattachの違い

デバッグには2つのモードがあります。

launch（起動）モード

  • VSCodeが新しいプロセスを起動してデバッグを開始
  • 開発中の通常のデバッグに使用
  • "request": "launch" で指定

attach（アタッチ）モード

  • 既に実行中のプロセスにデバッガーを接続
  • リモートデバッグやコンテナ内のプロセスのデバッグに使用
  • "request": "attach" で指定

基本的な設定項目

ここでは、launch.json でよく使用される主要な設定項目を解説します。

必須属性

すべてのデバッグ設定には、以下の3つの属性が必須です。

type

使用するデバッガーの種類を指定します。

{
  "type": "node"          
}

主な値：

  • node または pwa-node: Node.js / TypeScript
  • python: Python
  • coreclr: C#（.NET Core）
  • cppvsdbg: C++（Windows）
  • chrome: Google Chrome

ヒント: 使用できる type は、インストールされているVSCode拡張機能によって異なります。拡張機能をインストールすることで、さまざまな言語のデバッガーが利用可能になります。

request

デバッガーの動作モードを指定します。

{
  "request": "launch"     
}

値：

  • launch: 新しいプロセスを起動してデバッグ
  • attach: 既存のプロセスにアタッチ

name

デバッグ設定の識別名です。VSCodeのUIに表示されます。

{
  "name": "Launch Program"
}

わかりやすい名前をつけることで、複数の設定を使い分ける際に便利です。

よく使う設定項目

program

デバッグ対象の実行可能ファイルまたはスクリプトへのパスを指定します。

{
  "program": "${workspaceFolder}/src/index.js"
}

args

プログラムに渡すコマンドライン引数を配列で指定します。

{
  "args": ["--port", "3000", "--env", "development"]
}

これは以下のコマンドと同等です。

node app.js --port 3000 --env development

cwd

デバッグ対象プログラムの現在の作業ディレクトリを設定します。

{
  "cwd": "${workspaceFolder}/backend"
}

env / environment

デバッグセッション中に設定する環境変数を定義します。

{
  "env": {
    "NODE_ENV": "development",
    "API_KEY": "your-api-key",
    "PORT": "8080"
  }
}

注意: デバッガーによっては environment という名前を使用する場合があります。

preLaunchTask

デバッグセッションの開始前に実行するタスクを指定します。

{
  "preLaunchTask": "build"
}

これにより、デバッグ開始前に自動的にビルドやコンパイルを実行できます。タスクは tasks.json で定義します。

skipFiles

デバッグ中にステップ実行をスキップするファイルやフォルダーをglobパターンで指定します。

{
  "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "<node_internals>/**/*.js"
  ]
}

node_modulesや内部モジュールをスキップすることで、自分のコードに集中できます。

stopAtEntry

プログラムのエントリーポイントでデバッガーを停止させるかどうかを指定します。

{
  "stopAtEntry": true
}

便利な変数

launch.json では、以下の変数を使用できます。

変数 説明
${workspaceFolder} 現在開いているワークスペースのルートフォルダーのパス
${file} 現在アクティブなファイルのパス
${fileBasename} 現在アクティブなファイルのファイル名
${fileDirname} 現在アクティブなファイルのディレクトリパス
${fileExtname} 現在アクティブなファイルの拡張子
${cwd} 起動時のタスクの現在の作業ディレクトリ

ポータブルな設定のベストプラクティス

絶対パスではなく変数を使用することで、異なる環境でも動作する設定を作成できます。

//  悪い例：絶対パス
{
  "program": "/Users/username/projects/myapp/src/index.js"
}

//  良い例：変数を使用
{
  "program": "${workspaceFolder}/src/index.js"
}

言語・環境別の設定例

実際のプロジェクトで使える、言語・環境別の launch.json 設定例を紹介します。

実践的な活用テクニック

ここでは、launch.json をより効果的に活用するためのテクニックを紹介します。

複数のデバッグ設定を使い分ける

1つの launch.json に複数の設定を定義することで、状況に応じて使い分けることができます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "開発環境",
      "program": "${workspaceFolder}/app.js",
      "env": {
        "NODE_ENV": "development",
        "DEBUG": "*"
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "本番環境（ローカル）",
      "program": "${workspaceFolder}/app.js",
      "env": {
        "NODE_ENV": "production"
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "特定の機能テスト",
      "program": "${workspaceFolder}/test/specific-test.js",
      "args": ["--feature", "auth"]
    }
  ]
}

デバッグを開始する際、ドロップダウンメニューから実行したい設定を選択できます。

環境変数を使った設定の切り替え

環境変数を使用することで、同じコードでも異なる動作を実現できます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "API開発（モックDB）",
      "program": "${workspaceFolder}/api/server.js",
      "env": {
        "DB_TYPE": "mock",
        "API_PORT": "3001",
        "LOG_LEVEL": "debug"
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "API開発（実DB）",
      "program": "${workspaceFolder}/api/server.js",
      "env": {
        "DB_TYPE": "postgres",
        "DB_HOST": "localhost",
        "DB_PORT": "5432",
        "API_PORT": "3001",
        "LOG_LEVEL": "info"
      }
    }
  ]
}

preLaunchTaskでビルドを自動化

デバッグ開始前に自動的にビルドやコンパイルを実行する設定です。

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "TypeScript App with Build",
      "program": "${workspaceFolder}/dist/index.js",
      "preLaunchTask": "typescript-build",
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ]
    }
  ]
}

tasks.json（.vscode/tasks.json）

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "typescript-build",
      "type": "shell",
      "command": "npm run build",
      "group": "build",
      "presentation": {
        "reveal": "silent"
      },
      "problemMatcher": "$tsc"
    }
  ]
}

これにより、デバッグを開始するたびに最新のビルドが自動的に実行されます。

引数を動的に変更する

プログラムに渡す引数を状況に応じて変えることで、様々なシナリオをテストできます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "python",
      "request": "launch",
      "name": "データ処理（小規模データ）",
      "program": "${workspaceFolder}/process.py",
      "args": [
        "--input",
        "data/sample_small.csv",
        "--batch-size",
        "100"
      ]
    },
    {
      "type": "python",
      "request": "launch",
      "name": "データ処理（大規模データ）",
      "program": "${workspaceFolder}/process.py",
      "args": [
        "--input",
        "data/sample_large.csv",
        "--batch-size",
        "1000",
        "--parallel"
      ]
    }
  ]
}

現在開いているファイルをデバッグ

${file} 変数を使用することで、現在アクティブなファイルを直接デバッグできます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "python",
      "request": "launch",
      "name": "Current File",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

これは、複数のスクリプトを個別にテストする際に便利です。

既存プロセスへのアタッチ

既に実行中のプロセスにデバッガーをアタッチする設定です。

Node.js（プロセスIDを指定）

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "processId": "${command:PickProcess}"
    }
  ]
}

${command:PickProcess} を使用すると、デバッグ開始時にプロセス選択ダイアログが表示されます。

Node.js（ポート指定）

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach by Port",
      "port": 9229,
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

Node.jsを --inspect フラグで起動した場合に使用します。

node --inspect=9229 app.js

コンソール出力の制御

デバッグ時の出力先を制御できます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch with Integrated Terminal",
      "program": "${workspaceFolder}/app.js",
      "console": "integratedTerminal"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch with External Terminal",
      "program": "${workspaceFolder}/app.js",
      "console": "externalTerminal"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch with Debug Console",
      "program": "${workspaceFolder}/app.js",
      "console": "internalConsole"
    }
  ]
}
  • integratedTerminal: VSCode内の統合ターミナルに出力
  • externalTerminal: 外部ターミナルウィンドウに出力
  • internalConsole: デバッグコンソールに出力（デフォルト）

環境ごとの設定ファイルを読み込む

.env ファイルを使用して環境変数を管理する場合の設定です。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch with .env",
      "program": "${workspaceFolder}/app.js",
      "envFile": "${workspaceFolder}/.env"
    }
  ]
}

注意: この機能を使用するには、dotenv などのライブラリをインストールするか、デバッガーが .env ファイルのサポートを提供している必要があります。

まとめ

launch.json を適切に設定することで、VSCodeでのデバッグ体験は大きく向上します。

重要なポイント

  1. 基本を押さえる: type、request、name は必須属性
  2. 変数を活用: ${workspaceFolder} などを使って、ポータブルな設定を作成
  3. 複数設定を用意: 開発、テスト、本番環境など、状況に応じた設定を使い分ける
  4. preLaunchTaskを活用: ビルドやコンパイルを自動化して効率を向上
  5. 環境変数で制御: 同じコードでも異なる動作を実現

次のステップ

本記事で紹介した基本的な設定を試した後は、以下のステップに進むことをおすすめします。

  • tasks.jsonとの連携: ビルドやテストタスクを統合
  • compounds設定: 複数のデバッグ設定を同時に起動（フロントエンド＋バックエンドなど）
  • 言語固有の高度な設定: 使用している言語やフレームワークの公式ドキュメントを確認

VSCodeの公式ドキュメントも充実しているので、より詳しい情報が必要な場合は参照してください。

参考リンク

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?