Skip to content

Kuniwak/how-to-debug-js

Repository files navigation

慣れる?JS 素早く究明!デバッグ入門

素早く原因究明をするための多段式エラープルーフの実例です。

多段式エラープルーフとは?

デバッグの時間を短くするために、複数のレイヤーのエラープルーフを併用する開発スタイルです。 詳しくはスライドをご覧ください:

多段式エラープルーフの体験方法

インストール

このプロジェクトを動かすには、Node.js v4 以上が必要です。 ndenvなどを使って、Node.js v4 以上のバージョンをインストールしてください。

Node.js が準備できたら、以下のコマンドを実行してください:

$ git clone https://github.com/Kuniwak/how-to-debug-js
$ cd how-to-debug-js
$ npm install

構文ハイライト

お好きなエディタで、TypeScript にきちんと色がつく構文ハイライトを使ってください。 宗教戦争を避けるために、ここでは具体的なエディタやIDEへの言及は控えます。

リント

リントとは、変数名のタイポや、落とし穴のある書き方を調べるツールです。

例えば、以下のように var を使ったコードがあったら、「const を使うといいよ!」と教えてくれたりします。

var hoge = new Hoge();

このリントは、以下のコマンドで実行できます:

$ npm run lint

静的型検査

静的型検査とは、変数やプロパティに、どのようなオブジェクトや値が入っているのかを追跡して、不整合が起きていないかどうかをチェックする仕組みです。 例えば、存在しないメソッドや、間違った引数などを発見することができます。

例えば、以下のコードには不整合があります:

const numberA = 10;
const numberB = document.getElementById('input').textContent;

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(numberA, numberB));

これを TypeScript コンパイラにかけてみると次のように指摘されます:

const numberA = 10;
const numberB = document.getElementById('input').textContent;

function add(a: number, b: number): number {
  return a + b;
}

// 実は numberB には文字列が格納されているので、
// 足し算すると文字列の結合になってしまう!
//
// TypeScript はこの関数呼び出しがおかしいことを指摘してくれる。
console.log(add(numberA, numberB));

実際に、TypeScript のオンラインデモで手軽に試すことができます。

このプロジェクトにおける TypeScript コンパイラは次のコマンドで実行できます:

$ npm run build

単体・結合テスト

単体テストは、関数やクラスをいくつかの入力で試しに実行してみて、期待する振る舞いをするかどうかを、プログラムで検証する手法です。 品質をガッツリ保証するというよりかは、開発者がコードの正しさを確信するために書きます。

結合テストは、関数やクラスの組み合わせに着目して検証する手法です。 単体テストとの違いは、何をテストするかです:

  • 単体テスト: 個別の関数やクラスを検証する
  • 結合テスト: 関数やクラスの組み合わせを検証する

このプロジェクトにおける単体テストは、次のコマンドで実行できます:

$ npm test

E2Eテスト

E2Eテストは、Webブラウザーを使った最上位の結合テストです。 E2Eテストでは、ブラウザーをプログラムから操作して、あたかもユーザーがブラウザーを操作しているかのようにシミュレーションします。

このプロジェクトにおけるE2Eテストは、次のコマンドで実行できます:

$ npm run e2e

手動動作確認

次のコマンドを実行し、表示された URL へ Web ブラウザからアクセスすると動作確認できます。

$ npm start

> inurement-js-debug@0.0.0 start path/to/how-to-debug-js
> node bin/start-server

http://localhost:8080/public にブラウザでアクセスしてください

このプロジェクトで使っている多段式エラープルーフ

エラープルーフのレイヤー 使っているツール
構文ハイライト お好きなものをお使いください
リント TSLint
静的型検査 TypeScript
単体・結合テスト Mocha + chai
E2Eテスト Mocha + chai + selenium-webdriver
手動動作確認

ライセンス

The MIT License (MIT)

Copyright (c) 2014 Kuniwak

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.