ハードディスク障害にハマりながらも、 何とか node.js の環境までは作った。
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 を導入再開
手ごろな書籍を見つけてきた。
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 をインストールしろと書いてあったが、以前に
で Vue をインストールしたさいに Webサーバぽいものが同梱されていたと思ったので、Vue で開発する限り、それを流用できるかもしれない。
したがって http-server 導入は飛ばす。Git も導入済みなので飛ばす。
ブラウザ用のデバッガ拡張を導入
ブラウザ用の debugger は未導入だったので導入した。推奨マークがついていた。
他にも、推奨マーク付きがあるのではないかと思って調べたら、幾つか発見されたが、書籍では指示されていなかったので後回し。
Visual Studio 推しだったらしい・・・
Visual Studio Code の環境構築をここまでやったところで、書籍によれば
Visual Sutdi 2017 を使用してTypeScript の開発を行う場合は(中略)ツールも含めてインストールされるので、とても簡単に準備が完了
とのこと。
先に言ってよ!
とはいえよく読むと
- ASP.NET と Web 開発
- Node.js 開発
- Visual Studio 向け GitHub 拡張
と3つも作業が必要らしく、それほど楽とも思えなかったのでスルー。
初めて真面目に GIt レポジトリを作成
ローカルレポジトリとプロジェクトを色々な端末上に作成し、USBメモリでファイルコピーした結果、自分でもどれが正本か分からなくなったので、リモートレポジトリを正本にする運用に切り替えることにした。
最初から、そうしとけば良かったワケだが。
Azure のサインアップ
Alexa アプリや Vue.js アプリを作成することが目的なので、あまり Azure を使う気もなかったが、
ことから、折を見て作成することにした。
が、パスワード考えさせられるのが嫌なので、今は作成しない。
やっと、コンパイルのお許しが出ました。
の第3章に到達。やっとコンパイルのお許しが出た。
作業的には tsc コマンドのインストール直後にできる作業なのだが。
書籍では VS Code 上でサンプルプログラムを作成してコンパイルする手順となっていたが、折角なので、練習も兼ねてリモートレポジトリ GitHub 上でサンプルプログラム app.ts のソースを編集し、それをローカルに取り込んでからコンパイルする方法でやってみた。
地味な同期ボタンを押すと、GItHub から app.ts ファイルが取り込まれて VS Code に反映された。その後、コンパイルすると、app.js というファイルが作成された
tsc app.ts
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 というファイルが作成された。
さてここで、テスト駆動開発のための準備始まる
以前、アレクサスキルを開発したさい、場当たり的な手動単体テストしかできていないのをまずいと思っていたので、ちょうどよかった。
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 に
を追加してデバッグ実行。しかし、
という事象となった。おかしい…
tsconfig.json の方にも sourceMap の設定があった。
tsconfig.json の sourceMap (末尾に s はなし)の行のコメント解除。
これもコメント解除しただけではダメで、再ビルドが必要だった。
再ビルドをしたら、.ts ファイルと .js ファイルを橋渡しする map ファイルが作成され、デバッグ実行のさいに、ts.ファイルの方に設定したブレークポイントが機能するようになった。
単体テストフレームワーク Mocha 導入
以下も参照して構築
ここで説明されていた
- 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 参照とのこと。
を確認したところ、以下のようなことが留意点としてあった。
TypeScript 2.0, users can install typings using
npm install @types/<package>
New projects should use
@types
from 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 したさいに型定義を発見できない。
どうやら power-assert については型定義をグローバルインストール(-g 付き)できないらしいので、ローカルインストールで再インストールしたら require のエラーは治った。
必要かどうか分からないが、念のためアンインストールしてから、ローカルインストール(-g なし)する。
npm uninstall @types/power-assert
npm install @types/power-assert
しかし、引き続き入力した describe で型定義を発見できないとのこと。
mocha の型定義も、グローバルインストールではダメだったらしい。
過去を振り返ってみれば、mocha 本体も power-assert もグローバルインストールしてはいなかったので、もともと辻褄が合っていなかったようだ。
npm uninstall @types/mocha
npm install @types/mocha
これで問題は解消した。念のため node の型定義もローカルインストールにしておく。
npm uninstall @types/node
npm install @types/node
テストスクリプトとして
という感じで .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 に変更(解決)
I used tdd before, it throw ReferenceError: describe is not defined
But, when I use bdd, it works!
とのことだったので、launch.json の
の 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 が起動した。
どうやら今度こそ、起動には成功したようだ。
しかしながら、どうやら 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 に記述を追加する。
しかし、これでも親切な表示にはならず、問題は解消しなかった。
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 を使っていることがよろしくなかったらしい。
espower-typescript に乗り換え
TypeScript と組み合わせる場合には、intelli-espower-loader ではなくて、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 するように変更
にある、Run test の例を参考にして、launch.json の記述を再び変更する。
テストスクリプトも espower-typescript のサイト掲載のとおりに作成した。
デバッグ実行で mocha を起動、今度は親切な表示に変わった(成功)
empower-core のスタックトレースが相変わらず表示されるが、親切な表示には変わったので良しとする。なおempower-core のスタックトレースは表示されてしまうのが普通のようなので、放置しておく。
これで TypeScript + node.js + mocha + espower-typescript の組み合わせでのテスト駆動開発が可能になったようだ。
ああ、面倒くさかった…