はじめに

コーディングをしていると「ちょっとここの動作だけ見たいな」とか「このパッケージ試したいな」ということが多々あると思います。
そんなときに使えるデバッグ環境を手軽に構築する方法を紹介します。

環境

% node --version
v17.0.1

% yarn --version
1.22.17

手順

1. 新規プロジェクトの作成をする

WebStorm を起動して、メニューバーの File > New > Project... をクリックする。
New Project ウィンドウが表示されたら Node.js を選択する。

Package manager を yarn に変更する (npm を使いたい方はそのままで OK です。以下、適宜読み替えてください) 。
設定が終わったら Create をクリックする。

2. Typescript の環境とソースファイルの用意をする

メニューバーの View > Tool Windows > Terminal をクリックする。
ターミナルが表示されたら以下のコマンドを実行する。

zsh

% yarn add --dev typescript ts-node
% yarn run tsc --init
% touch main.ts

まとめて実行する場合は以下。

zsh (コピペ用)

% yarn add --dev typescript ts-node && yarn run tsc --init && touch main.ts

main.ts ファイルが作成されるので、それを開いて適当なコードを書く。

main.ts

function main() {
    const greeting = 'Hello, world!'
    console.log(greeting)
}

main()

3. 実行構成の作成をする

package.json ファイルを開いて以下を追記する。

package.json

  "scripts": {
    "run": "./node_modules/.bin/ts-node"
  }

"run": の行の左側に ▶︎ マークが表示されるので、それをクリックして Modify Run Configuration... を選択する。

Create Run Configuration ウィンドウが表示されたら Arguments に main.ts と入力する。

設定が終わったら OK をクリックする。

4. 実行する

メニューバーの Run > Run 'run' をクリックする。

Run：run

/usr/local/bin/node /usr/local/Cellar/yarn/1.22.17/libexec/bin/yarn.js run run main.ts
yarn run v1.22.17
$ ./node_modules/.bin/ts-node main.ts
Hello, world!
✨  Done in 0.82s.

Process finished with exit code 0

プログラムが実行されて、コンソールに結果が表示されました。
ブレークポイントを設置すれば、メニューバーの Run > Debug 'run' をクリックしたとき…

実行を一時停止できますし、変数の確認もできます。

参考文献