そういう、モデルなんです。

ビジネスモデル、3Dモデル、設計図、模型などの現状と動向を考察、関連書籍の紹介

TypeScript + node.js 実装および mocha + espower-typescript テスト駆動開発の環境構築

ハードディスク障害にハマりながらも、 何とか node.js の環境までは作った。

tombi-aburage.hatenablog.jp

JavaScript でクラス Class が使えるようになったと聞いたので、ユーティリティクラスを試しにクラスとして書いてみたが・・・汚い…これがクラスといえるのか?

  • コンストラクタの中でプロパティ(メンバ)を生成するだと?
  • すべてパブリックだと?
  • いちいち this をつけろだと?

なんと見苦しい…

そういえば Alexa Skills Kit SDK をダウンロードするさいに、TypeScript 対応と書いてあったな…

TypeScript を導入

プロジェクトフォルダーにて、ローカルに開発環境へ導入

npm install --save-dev @types/node

npm WARN diceroller@1.0.0 No description
npm WARN diceroller@1.0.0 No repository field.

+ @types/node@11.13.4
added 1 package from 37 contributors and audited 23 packages in 1.294s
found 0 vulnerabilities

しかし、TypeScript のコンパイル方法すら知らなかったので、書籍を探して勉強するまで一旦中止。

知識ゼロでは流石に無理。

なお後で分かったことだが、上のコマンドは断じて TypeScript を導入するコマンドなどではなかった w

TypeScript を導入再開

手ごろな書籍を見つけてきた。

TypeScript実践マスター

TypeScript実践マスター

 

Visual Studio Code、Node.js は導入済みなので飛ばして、Type Script 固有の環境構築から始める。 

tsc コマンドをグローバルにインストール

 

npm install -g typescript

C:\Users\tombi\AppData\Roaming\npm\tsc -> C:\Users\tombi\AppData\Roaming\npm\node_modules\typescript\bin\tsc
C:\Users\tombi\AppData\Roaming\npm\tsserver -> C:\Users\tombi\AppData\Roaming\npm\node_modules\typescript\bin\tsserver
+ typescript@3.4.5
added 1 package from 1 contributor in 3.179s

tsc -v

Version 3.4.5

コンパイラ導入、問題なし

この辺から TypeScript とは直接関係なさそうな作業が続く(寄り道)

早くTypeScript のコンパイルや稼働確認をしたい所だが、上記書籍の著者は DevOps のベストプラクティスを重視しているようで、コンパイラが導入できたからといって、いきなりコンパイルなどはさせてくれなsい。

必要と思われる開発環境をすべて先に用意してから、アプリケーションを作りなさいという考えのようだ。

確かに最終的には、DevOps 開発環境を作法通りに揃えてから開発に臨んだ者が勝つのは同意なので、焦らずに環境構築を続行する。

開発用のWebサーバは、今は用意しない

次に開発用のWebサーバ http-server をインストールしろと書いてあったが、以前に

tombi-aburage.hatenablog.jp

で Vue をインストールしたさいに Webサーバぽいものが同梱されていたと思ったので、Vue で開発する限り、それを流用できるかもしれない。

したがって http-server 導入は飛ばす。Git も導入済みなので飛ばす。

ブラウザ用のデバッガ拡張を導入

ブラウザ用の debugger は未導入だったので導入した。推奨マークがついていた。

f:id:tombi-aburage:20190511083212p:plain

Debugger for Chrome extension に推奨マーク

他にも、推奨マーク付きがあるのではないかと思って調べたら、幾つか発見されたが、書籍では指示されていなかったので後回し。

f:id:tombi-aburage:20190511083537p:plain

他にも推奨マーク付きがあった

Visual Studio 推しだったらしい・・・

Visual Studio Code の環境構築をここまでやったところで、書籍によれば

Visual Sutdi 2017 を使用してTypeScript の開発を行う場合は(中略)ツールも含めてインストールされるので、とても簡単に準備が完了

とのこと。

先に言ってよ!

とはいえよく読むと

と3つも作業が必要らしく、それほど楽とも思えなかったのでスルー。

初めて真面目に GIt レポジトリを作成

ローカルレポジトリとプロジェクトを色々な端末上に作成し、USBメモリでファイルコピーした結果、自分でもどれが正本か分からなくなったので、リモートレポジトリを正本にする運用に切り替えることにした。

tombi-aburage.hatenablog.jp

最初から、そうしとけば良かったワケだが。

レポジトリ作成、問題なし

Azure のサインアップ

Alexa アプリや Vue.js アプリを作成することが目的なので、あまり Azure を使う気もなかったが、

  • Webサイト、MySQL は無料で使い続けられるらしい
  • Bot Framework は使ってみたい

ことから、折を見て作成することにした。
が、パスワード考えさせられるのが嫌なので、今は作成しない。

やっと、コンパイルのお許しが出ました。

TypeScript実践マスター

TypeScript実践マスター

 

の第3章に到達。やっとコンパイルのお許しが出た。
作業的には tsc コマンドのインストール直後にできる作業なのだが。 

書籍では VS Code 上でサンプルプログラムを作成してコンパイルする手順となっていたが、折角なので、練習も兼ねてリモートレポジトリ GitHub 上でサンプルプログラム app.ts のソースを編集し、それをローカルに取り込んでからコンパイルする方法でやってみた。

f:id:tombi-aburage:20190511190119p:plain

地味な同期ボタン

地味な同期ボタンを押すと、GItHub から app.ts ファイルが取り込まれて VS Code に反映された。その後、コンパイルすると、app.js というファイルが作成された

tsc app.ts

f:id:tombi-aburage:20190511190405p:plain

ts ファイルから js ファイルが作成された
コンパイル、問題なし

TypeScript のビルド構成を定義

tsc --init

出来た tsconfig.json は、コメントだらけのキモい設定ファイル。
書き足すよりはコメント解除する方が合理的といえば合理的だが。

タスク Terminal - Tasks: Configure Default Build Task

タスク Terminal : Run Build Task

より task.json ファイルが作成され、

> Executing task: tsc -p e:\Users\tombi\Projects\TypeScriptSample\tsconfig.json <
Terminal will be reused by tasks, press any key to close it.

この結果、先ほどとは少し出力内容が異なるが app.js というファイルが作成された。

ビルドタスク、問題なし

さてここで、テスト駆動開発のための準備始まる

以前、アレクサスキルを開発したさい、場当たり的な手動単体テストしかできていないのをまずいと思っていたので、ちょうどよかった。

tombi-aburage.hatenablog.jp

TypeScriptそのものにはテストフレームワークは無いのか、結局 mocha を使う流れになっているが。

デバッグ構成を追加

デバッグ構成追加 Debug - Add Configuration すると、候補として Chrome、Node.js の2つと More... が出てきた。

試しに More... を押してみると、debugger に分類されている拡張の一覧がずらっと出てきた。こんなにあるのか…

まあ今は、Node.js を追加するだけなのだが。

launch.json の configurations で [Ctrl] + [SPACE] すると Moca Tests という起動オプションがあったので、node.js との相性はよいのではないかと推測される

TypeScript (.ts) ファイルのデバッグ

launch.json

"sourceMaps": true

を追加してデバッグ実行。しかし、

という事象となった。おかしい…

tsconfig.json の方にも sourceMap の設定があった。

tsconfig.json の sourceMap (末尾に s はなし)の行のコメント解除。
これもコメント解除しただけではダメで、再ビルドが必要だった。

再ビルドをしたら、.ts ファイルと .js ファイルを橋渡しする map ファイルが作成され、デバッグ実行のさいに、ts.ファイルの方に設定したブレークポイントが機能するようになった。

2か所あるのね。ポカミス。

単体テストフレームワーク Mocha 導入

以下も参照して構築

qiita.com

ここで説明されていた 

  • power-assert
  • intelli-espower-loader

も格好いいので導入することにした。

ここから悲劇が始まった…

なお最終的に、intelli-espower-loader の方は TypeScript との相性が悪いことが判明したため撤去して、espower-typescript を導入し直すはめになった。

3つまとめて、ローカルインストール

npm init の後、

npm install --save-dev mocha power-assert intelli-espower-loader

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN typescriptsample@1.0.0 No description

+ mocha@6.1.4
+ intelli-espower-loader@1.0.1
+ power-assert@1.6.1
added 187 packages from 650 contributors and audited 504 packages in 34.575s
found 0 vulnerabilities

TypeScript の型定義を導入

npm install -g typings

npm WARN deprecated typings@2.1.1: Typings is deprecated in favor of NPM @types -- see README for more information
C:\Users\tombi\AppData\Roaming\npm\typings -> C:\Users\tombi\AppData\Roaming\npm\node_modules\typings\dist\bin.js
+ typings@2.1.1
added 184 packages from 100 contributors in 16.522s

警告あり。今後は typing よりも @types を使え、詳しくは README 参照とのこと。

教えてくれて、ありがとう。

github.com

を確認したところ、以下のようなことが留意点としてあった。

 TypeScript 2.0, users can install typings using npm install @types/<package> 

 New projects should use @typesfrom NPM.

npm install -g @types/node
npm install -g @types/mocha
npm install -g @types/power-assert

この3つの型定義のグローバルインストールは見かけ上成功した。

しかし、実は違った。

後に不適切と判明し、ローカルインストールに変更する破目になった。

なお、intelli-espower-loader の型定義はそもそも存在しないらしく、エラーとなった。

npm install -g @types/intelli-espower-loader

npm ERR! code E404
npm ERR! 404 Not Found: @types/intelli-espower-loader@latest

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tombi\AppData\Roaming\npm-cache\_logs\2019-05-11T22_37_28_910Z-debug.log

型定義が無い類のパッケージだと理解して、このエラーは無視する。

デバッグ構成に Mocha の起動オプションも追加

以前に Node.js のデバッグ構成を追加したさいに Mocha のデバッグ構成も見つけていたので、すでに追加済みだった。

launch.json の configurations で [Ctrl] + [SPACE] すると Moca Tests という起動オプションがある

もう、やってあったわ。

 テストスクリプト作成

mocha 本体以外に power-assert、intelli-espower-loader を勝手に追加してしまったので、書籍のサンプルがそのままでは使えなくなった。以下を参考に予習。

power-assertの使い方 Node.js編 | Web Scratch

package.json にも、directories の追加を行った。

しかしながら、power-assert を require したさいに型定義を発見できない。

f:id:tombi-aburage:20190512082726p:plain

require で power-assert を発見できない
また、外部参照問題か…

どうやら power-assert については型定義をグローバルインストール(-g 付き)できないらしいので、ローカルインストールで再インストールしたら require のエラーは治った。

結局、ローカルが安全だな…

必要かどうか分からないが、念のためアンインストールしてから、ローカルインストール(-g なし)する。

npm uninstall @types/power-assert
npm install @types/power-assert

しかし、引き続き入力した describe で型定義を発見できないとのこと。
mocha の型定義も、グローバルインストールではダメだったらしい。

お前もローカルか…

過去を振り返ってみれば、mocha 本体も power-assert もグローバルインストールしてはいなかったので、もともと辻褄が合っていなかったようだ。

f:id:tombi-aburage:20190512083627p:plain

describe で多分 mocha 型定義を発見できない
npm uninstall @types/mocha
npm install @types/mocha

これで問題は解消した。念のため node の型定義もローカルインストールにしておく。

npm uninstall @types/node
npm install @types/node
これで型定義は全てローカル

テストスクリプトとして 

import assert = require('power-assert');

describe("Test Case #1", () => {
it("Test Case #A", () => {
assert.ok(1 === 1, "1は1と等しい");
});
it("Test Case #B", () => {
assert.ok(false, "わざとテスト失敗");
});
});

という感じで .ts を作成し、少なくともコーディテング時点でのエラーは全て無くなったので、ビルドして .js を生成した後、デバッグ実行。

describe が定義されていません、とのエラー

C:\Program Files\nodejs\node.exe node_modules\mocha\bin\_mocha -u tdd --timeout 999999 --colors E:\Users\tombi\Projects\TypeScriptSample/test
e:\Users\tombi\Projects\TypeScriptSampl
e\node_modules\yargs\yargs.js:1163
else throw err
^

ReferenceError: describe is not defined
(以下、スタックトレース略)

また、外部参照問題か…

intelli-espower-loader の指定を忘れていた(関係なし)

そういえば mocha 起動時に intelli-espower-loader を -- require で指定する、というのを設定していなかったので、これが原因かもしれない。

毎回--requireを指定するのが面倒な場合はmocha.optsファイルを作って書いておく

らしいので作成したが、別にこのエラーとは関係なかった。

なお、拡張子は opts と4文字なので、間違わないようにすること。

念のため、すべてのパッケージと型定義をグローバルにも追加

治らないので疑心暗鬼となり、

  • mocha をグローバルインストール
  • さっき消したばかりの型定義もグローバル
npm uninstall mocha
npm install -g mocha
npm install -g --save-dev mocha
npm install @types/node -g
npm install @types/mocha -g
npm install @types/power-assert -g

エラー解消せず。これらも別にこのエラーとは関係なかった。

launch.json の tdd を bdd に変更(解決)

stackoverflow.com

I used tdd before, it throw ReferenceError: describe is not defined

But, when I use bdd, it works!

 とのことだったので、launch.json

"name": "Mocha Tests",
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
"args": [
"-u",
"tdd",

の tdd のところを bdd に変更したら、あっさり治った。

mocha のデフォルトは bdd なのだが、VS Code がビルド構成を生成したさいにご親切にも tdd になさったようだ。

--ui, -u Specify user interface [string] [default: "bdd"

余計なことを・・・

mocha によるテストスクリプトの起動には成功

C:\Program Files\nodejs\node.exe --inspect-brk=42451 node_modules\mocha\bin\_mocha -u bdd --timeout 999999 --colors E:\Users\tombi\Projects\TypeScriptSample/test

のように、tdd ではなく bdd が指定されて mocha が起動した。

f:id:tombi-aburage:20190512103928p:plain

_mocha -u bdd で node.exe が起動し、テストスクリプトが実行された

どうやら今度こそ、起動には成功したようだ。

とにかく、起動はした
でも実行結果表示は期待外れ

しかしながら、どうやら power-assert、intelli-espower-loader は作動していない。

実行結果の表示が、親切な表示になっていないので、どうやら power-assert、intelli-espower-loader は作動していないように思える。

 これらもグローバルインストールしないとダメなのか…

npm install -g power-assert
npm install -g intelli-espower-loader

しかし、これだけでは解消しなかった。

mocha.opts は読み込まれていない様子だ。

どうやらプロジェクトフォルダ直下に置いた mocha.opts に追記した

  • --require intelli-espower-loader

設定は読み込まれていないようだ。今回のように node.exe 経由で呼び出されている場合には、mocha.opts は無視されるようだ。

mocha.opts ではなく、launch.json に指定し直しても、無駄だった。

紛らわしいので mocha.opts は削除し、launch.json に記述を追加する。

"args": [
"--require",
"intelli-espower-loader",
"-u",
"bdd",

しかし、これでも親切な表示にはならず、問題は解消しなかった。

power-assert のモジュール周りで何か不具合が起きているようにも思えた。

よくよく見ると DEBUG CONSOLE には、実行結果の後にスタックトレースの切れ端が出ている。

at Decorator._callFunc (E:\Users\tombi\Projects\TypeScriptSample\node_modules\empower-core\lib\decorator.js:110:20)
at Decorator.concreteAssert (E:\Users\tombi\Projects\TypeScriptSample\node_modules\empower-core\lib\decorator.js:103:17)
at decoratedAssert (E:\Users\tombi\Projects\TypeScriptSample\node_modules\empower-core\lib\decorate.js:51:30)
at powerAssert (E:\Users\tombi\Projects\TypeScriptSample\node_modules\empower-core\index.js:63:32)
at Context.<anonymous> (E:\Users\tombi\Projects\TypeScriptSample\test\test2.ts:9:13)

おそらく power-assert のモジュールで何か不具合が起きているようだ。

同じような被害者を発見した。

と、ここまでやったところで調査すると、ほとんど同一事象に陥っている記事を見つけた。power-assert が悪いわけではなく、intelli-espower-loader を使っていることがよろしくなかったらしい。

qiita.com

× intelli-espower-loader

espower-typescript に乗り換え

TypeScript と組み合わせる場合には、intelli-espower-loader ではなくて、espower-typescript を使えとのこと。

github.com

〇 espower-typescript

用済みとなった intelli-espower-loader は副作用が残ると嫌なのでアンインストール。

npm uninstall intelli-espower-loader

続いて espower-typescript をインストール。

npm install espower-typescript

PS E:\Users\tombi\Projects\TypeScriptSample> npm install espower-typescript
npm WARN espower-typescript@9.0.2 requires a peer of typescript@>= 2.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN ts-node@8.1.0 requires a peer of typescript@>=2.0 but none is installed. You must install peer dependencies yourself.
npm WARN typescriptsample@1.0.0 No description

+ espower-typescript@9.0.2
added 8 packages from 5 contributors and audited 743 packages in 2.888s
found 0 vulnerabilities

警告あり。typescript モジュールが無いから自分で入れろとのこと。 
一番最初にグローバルインストールしていたのだが、ローカルにもないとダメらしい。 

npm install --save-dev typescript

npm WARN typescriptsample@1.0.0 No description

+ typescript@3.4.5
added 1 package from 1 contributor and audited 744 packages in 1.906s
found 0 vulnerabilities

espower-typescript を require するように変更

github.com

にある、Run test の例を参考にして、launch.json の記述を再び変更する。

"args": [
"--require",
"espower-typescript/guess",
"test/**/*.ts",

テストスクリプトも espower-typescript  のサイト掲載のとおりに作成した。

import assert = require('assert');
describe('Array#join', () => {
it('joins all elements into a string with separator', () => {
assert(['a', 'b', 'c'].join(':') === 'a:b:c:');
});
});

デバッグ実行で mocha を起動、今度は親切な表示に変わった(成功)

empower-core のスタックトレースが相変わらず表示されるが、親切な表示には変わったので良しとする。なおempower-core のスタックトレースは表示されてしまうのが普通のようなので、放置しておく。

f:id:tombi-aburage:20190512123706p:plain

親切な表示になった

これで TypeScript + node.js + mocha + espower-typescript の組み合わせでのテスト駆動開発が可能になったようだ。

テスト駆動開発、準備良し

ああ、面倒くさかった…