TypeScriptとVSCodeを使用したデバッグの基本

Visual Studio Code（VSCode）は、TypeScriptプロジェクトの開発に非常に便利な統合開発環境（IDE）です。デバッグは、アプリケーションの品質を向上させ、問題を解決するための重要なステップです。この記事では、TypeScriptとVSCodeを使用して効果的にデバッグするための基本的な手順に焦点を当てます。

プロジェクトの設定

最初に、VSCodeでTypeScriptプロジェクトを開きます。プロジェクトルートには、tsconfig.jsonファイルがあるはずです。このファイルは、TypeScriptコンパイラの設定を含んでいます。デバッグする前に、必要に応じて適切なコンパイラオプションを確認しましょう。

デバッグの構成

VSCodeは、デバッグ構成を管理するためのlaunch.jsonファイルを提供しています。プロジェクト内にこのファイルが存在しない場合は、VSCodeが自動的に作成します。デバッグ構成は、デバッグセッションの挙動を制御します。

以下は、launch.jsonの例です。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug TypeScript",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/path/to/your/compiled/file.js",
      "sourceMaps": true,
      "protocol": "inspector",
      "args": [],
      "cwd": "${workspaceFolder}",
      "outFiles": ["${workspaceFolder}/path/to/your/compiled/file.js"]
    }
  ]
}

この例では、Node.js環境を使用してTypeScriptをデバッグしています。programおよびoutFilesのパスは、プロジェクトに合わせて変更してください。

ブレークポイントの設定

デバッグセッション中にコードの特定の箇所で停止させるには、ブレークポイントを設定します。ソースコードの左側の行番号をクリックするか、該当の行にカーソルを合わせてF9キーを押すことでブレークポイントを設定できます。

デバッグの開始

デバッグ構成が整備され、ブレークポイントが設定されたら、デバッグを開始します。F5キーを押すか、VSCodeのデバッグメニューから適切なデバッグ構成を選択してデバッグを開始できます。

デバッグの実行

デバッグが開始されたら、コードはブレークポイントで停止します。VSCodeのデバッグツールを使用して、変数の値を確認したり、ステップ実行したりできます。

これで、TypeScriptとVSCodeを使用してデバッグするための基本的な手順がわかりました。プロジェクトによっては、さらに高度なデバッグテクニックが必要になるかもしれませんが、基本的な流れはこの記事を参考にしてください。