OfficeスクリプトのデバッグのためにTypeScriptデバッグ環境を用意

最近Officeスクリプトを作成する機会がありましたが、Microsoft 365環境上にはデバッグする環境はどうもないみたい？

OfficeスクリプトはTypeScriptがベースとのことなので、TypeScriptのデバッグ環境だけ整えておくことにしました。

環境

% sw_vers
ProductName:        macOS
ProductVersion:     13.1
BuildVersion:       22C65
% uname -v
Darwin Kernel Version 22.2.0: Fri Nov 11 02:04:44 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T8103
%

M1 Mac miniでVentura使ってます。

目標

VSCodeでpythonのスクリプトをデバッグするようにTypeScriptもデバッグできたらいいな。

F5キーでデバッグ開始
ステップ実行も可能
ブレークポイントで止まってくれる

今回インストールするもの

Node.js
typescriptパッケージ
ts-nodeパッケージ

手順

Node.jsのインストール

Node.jsの公式に行けばMac用のインストーラが手に入るので、それでインストールできます。

https://nodejs.org/ja/

が、今回はHomebrewからインストールしました。

% brew install node

Node.jsをインストールしたあと、パスが通ってないことがあるみたい？　というような記事がちらほら見えましたが、てんこの環境では普通に使えたのでこのまま進めます。

% node -v
v19.3.0
%

typescriptパッケージ

Node.jsはJavaScriptの実行環境です。このままではTypeScriptのスクリプトは実行できません。

そこでNode.jsのパッケージマネージャーでTypeScript機能をインストールします。

% npm install typescript -g

npmコマンドはNode Package Manager。pythonで言うところのpipに当たるものと理解してます。

typescriptパッケージをインストールすると、TypeScriptで書いたスクリプトをJavaScriptのスクリプトにコンパイルできるようになります。JavaScriptにコンパイルできれば、Node.jsで実行できるようになるわけです。

-gオプションはグローバルインストールのオプションです。pythonでもグローバルインストールとローカルインストールがありましたが、Node.jsではnpmコマンドに-gオプションを付けるとグローバルインストール、何もつけないとローカルインストールになるようです。

コンパイルはtscコマンドで行うので、実行確認しておきます。

% tsc -v
Version 4.9.4
%

プロジェクトディレクトリーの作成

ここからはプロジェクトディレクトリーを作成して、プロジェクト毎のセットアップをしていきます。

なので、まず任意の場所にディレクトリーを作成します。

% cd
% mkdir -p src/test
% cd src/test

プロジェクトに必要なファイルの作成

まだてんこはファイルの意味をよく理解できていませんが、package.jsonファイルとtsconfig.jsonファイルを作成します。

２つともコマンドで作成できます。

まずはpackage.json。

% npm init -y
Wrote to /Users/xxxxxxxx/src/test/package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


%

もう一つ、tsconfig.json。

% tsc --init

Created a new tsconfig.json with:                                               
                                                                             TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig
%

特に内容は書き換えたりはしていません。

ts-nodeパッケージのインストール

ここでts-nodeパッケージをインストールします。ts-nodeは、TypeScriptを直接実行するための機能らしいです。

普通はTypeScriptをコンパイルしてJavaScriptファイルを生成→JavaScriptファイルを実行という流れですが、ts-nodeがあるとTypeScriptをいきなり実行できるみたい。pythonのファイルを実行する感覚に近くなるのかな〜と思ってts-nodeもインストールしてみます。

% npm install ts-node

ts-nodeはローカルにインストールしました。-gオプションは付けずにインストールです。

本当はこいつもグローバルにインストールしたかったですが、そうするとこのあとの手順がうまく進まず、原因もよくわからず、で断念。

ここまでの手順で準備完了です。

デバッグしてみる

作成したプロジェクトのディレクトリーにサンプルのスクリプトを作って、VSCodeでデバッグ操作してみます。

console.log("テスト1");
console.log("テスト2");
console.log("テスト3");
console.log("テスト4");
console.log("テスト5");
console.log("テスト6");

ファイル名の拡張子は.tsにしておきます。

VSCodeで開くときは、ファイルではなくフォルダーを開くようにします。

行番号をクリックすると赤丸が付き、これがブレークポイントになります。

あとはF5キーで実行。ブレークポイントで実行が中断されるので、そこからはF10キーでステップ実行します。

参考にした記事

qiita.com

てんこ製作

Tenco Works