2026年1月15日 / 最終更新日時 : 2026年1月15日 @yuuji_mimura TypeScript

TypeScriptのデバッグ②

以前の記事で TypeScript のデバッグ方法をご紹介しましたが、そもそもブラウザを使用しない (Node.js + TypeScript で API サーバーを作成する) などの用途もあると思われますので、今回は TypeScript ファイルだけで構成されたプロジェクトをデバッグする方法をご紹介します。

コンパイル (トランスパイル) しないで直接 TypeScript ファイルを実行する方法と、コンパイルされた JavaScript ファイルをソースマップを使用して、ソースコードレベルでデバッグできる環境を構築します。

今回の実行環境は以下のようになっています。
Node.js をベースに TypeScript で開発する環境を想定しています。

VS Code (Windows 版)・・・バージョン 1.108.0
Node.js・・・バージョン 24.7
TypeScript コンパイラ (tsc)・・・バージョン 5.9.3

1 プロジェクトをセットアップします
2 TypeScript 設定を修正します
3 ソースファイルを作成します
4 ソースファイルを直接実行してデバッグします
5 コンパイルされたファイルを使用してデバッグします

プロジェクトをセットアップします

まずはこちらの記事などを参考に、TypeScript のコンパイラをインストールします。次に、こちらのサイトの記事などを参考にして Node.js もインストールしておきます。

任意のプロジェクト名のフォルダを作成してVS Code で開きます。Ctrl + @ と入力してターミナル画面を開きます。表示されたターミナル画面で「node -v」や「tsc -v」と入力して、Node.js と TypeScript コンパイラがインストールされているのを確認します。

インストールされているのが確認できたら、ターミナル画面に以下のように入力してプロジェクトを初期化します。このコマンドを実行するとプロジェクト内に「package.json」ファイルが作成されます。

npm init -y

次に以下のコマンドを入力して、TypeScript での開発に必要なパッケージをインストールします。

npm i -D typescript @types/node tsx

最後に以下のコマンドを入力して、TypeScript の設定ファイル「tsconfig.json」を作成します。

tsc --init

TypeScript 設定を修正します

「tsconfig.json」ファイルを開き、以下の設定を行います。

"outDir": "./dist", のコメントアウトを解除
"inlineSources": true, を追加
"compilerOptions" の設定の後に以下を追加
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "dist"]

{
  // Visit https://aka.ms/tsconfig to read more about this file
  "compilerOptions": {
    // File Layout
    // "rootDir": "./src",
    "outDir": "./dist",

    // Environment Settings
    // See also https://aka.ms/tsconfig/module
    "module": "nodenext",
    "target": "esnext",
    "types": [],
    // For nodejs:
    // "lib": ["esnext"],
    // "types": ["node"],
    // and npm install -D @types/node

    // Other Outputs
    "inlineSources": true,
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Style Options
    // "noImplicitReturns": true,
    // "noImplicitOverride": true,
    // "noUnusedLocals": true,
    // "noUnusedParameters": true,
    // "noFallthroughCasesInSwitch": true,
    // "noPropertyAccessFromIndexSignature": true,

    // Recommended Options
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist"]
}

ソースファイルを作成します

プロジェクトフォルダ内に「src」フォルダを作成します。フォルダ内に「server.ts」ファイルを作成して、以下の内容を記述して保存します。

console.log("hello typescript");

ソースファイルを直接実行する場合は、以下のように入力します。

npx tsx src/server.ts

コンパイルしてから実行する場合は以下のように入力します。

npx tsc
node dist/server.js

ソースファイルを直接実行してデバッグします

プロジェクトフォルダ内に「.vscode」フォルダを作成します。フォルダ内に「launch.json」ファイルを作成して以下の内容を記述して保存します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug TypeScript (tsx)",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["tsx"],
      "args": ["${file}"],
      "cwd": "${fileDirname}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": ["<node_internals>/**"],
      "env": {
        "NODE_ENV": "development"
      }
    }
  ]
}

「src\server.ts」ファイルを開いて、行番号の左側をクリックしてブレークポイントを設定します。あとは「F5」キーを押すとデバッガーが起動して設定したブレークポイントで停止します。

プロジェクトファイルが「ts-projects\node-server\src\server.ts」などのようにサブフォルダにある場合は、「.vscode」フォルダを親のフォルダ以下にコピーして、「デバッグしたいファイルをエディタ画面で開いて」デバッグを行うとブレークポイントで停止します。

コンパイルされたファイルを使用してデバッグします

「.vscode/launch.json」ファイルを開いて以下の設定を追加します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug TypeScript (tsx)",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["tsx"],
      "args": ["${file}"],
      "cwd": "${fileDirname}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": ["<node_internals>/**"],
      "env": {
        "NODE_ENV": "development"
      }
    },
    {
      "name": "Debug built JS (source-map)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/dist/server.js",
      "cwd": "${workspaceFolder}",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/dist/**/*.js",
        "${workspaceFolder}/dist/**/*.map",
        "!**/node_modules/**"
      ],
      "skipFiles": ["<node_internals>/**"],
      "console": "integratedTerminal"
    }    
  ]
}

VS Code のコンソール画面で以下のコマンドを実行してコンパイルします。