JavaScript 便利ツール

普段は C++ をメインに使っているが最近 JavaScript を使うことになったので、 JavaScript の便利ツールを調べた結果をメモとして残すことにした。
他にも便利なツールなどありましたら教えていただけると嬉しいです。

# JSLint / JSHint
JavaScript のコードを分析してjs ファイルに潜む悪いパーツを検出してくれるツール。
下記コマンドにてインストール可能。

```
$ npm install -g jshint
```

### 使い方
例えば fizzbuzz.js に対して構文解析を行う場合は下記コマンドで ok。

```
$ jshint fizzbuzz.js
```

### JSLint と JSHint は何が違うのか？
厳しすぎる (というかプログラムをダグラス・クロックフォード氏の流儀で書くよう強制する) 判定を行う JSLint に問題を感じたアントン氏が JSLint からフォークしたものが JSHint である。
厳しい判定を好む人は JSLint 、 **致命的なエラーとならない箇所** の警告は出さないで欲しい人は JSHint を使うと良いのだろうか。
ちなみに、2013年には英語圏の JavaScript コミュニティにおいて、 JSHint 支持者が JSLint 支持者を上回るだろうとのこと。
参考記事 : http://blog.node.ws/?p=1379

# jscheckstyle
各関数 / メソッドの循環的複雑度を算出するツール。
下記コマンドにてインストール可能。

```
$ npm install -g jscheckstyle
```

### 使い方
例えば fizzbuzz.js に対して jscheckstyle を実行すると下記の様な出力が得られる。

```fizzbuzz.js
function isMultiple(src, base) {
    'use strict';
    return src % base === 0;
}

function fizzbuzz(n) {
    'use strict';
    if(isMultiple(n, 15)) {
        return 'fizzbuzz';
    } else if(isMultiple(n, 3)) {
        return 'fizz';
    } else if(isMultiple(n, 5)) {
        return 'buzz';
    } else {
        return n.toString();
    }
}

// サンプル
console.log( fizzbuzz(1) ); // =>  1
console.log( fizzbuzz(3) ); // =>  fizz
console.log( fizzbuzz(5) ); // =>  buzz
console.log( fizzbuzz(15) ); // => fizzbuzz 
```

| Line | Function | Length | Args | Complex... |
|:-----------|------------:|:------------|------------:|:------------:|
| 1            | isMultiple | 4             | 2              | 2            |
| 6            | fizzbuzz   | 12           | 1              | 8            |

**行数 ( Length ) は空行やコメントを含む** ため他の関数との相対的な比較に使用する。

# Jasmine
JavaScript の単体テストフレームワーク。
[こちら](https://github.com/pivotal/jasmine/downloads) よりダウンロード可能。

### 使い方
ダウンロード後解凍し、下記を実施する。

* src ディレクトリにテスト対象コードを配置
* spec ディレクトリにテストコードを配置
* テスト対象コードとテストコードを SpecRunner.html にインクルード

上記手順を実施後、SpecRunner.html を開くと結果がブラウザに表示される。
テストコードの書き方はダウンロードパッケージに含まれるサンプルコードを参照。

### 補足
コマンドライン版 Jasmine が欲しい人は、下記コマンドにて入手可。

```
$ npm install -g jasmine-node
```

# Sinon.js
スタブやモック、フェイクオブジェクトの提供に特化した JavaScript 用ライブラリ。
下記コマンドで入手可。

```
$ npm install -g sinon
```

### 使い方
[こちら](http://sinonjs.org/docs/) のサイトを参考。

# PhantomJS
js ファイルを実行できる Webkit ベースのコマンドラインツール。
DOM や Canvas などにネイティブにアクセスできるため、アプリのテストツールとしても利用可能。
mac を使っている場合は下記コマンドで入手可。

```
$ brew install phantomjs
```

### 使い方
[ここ](https://github.com/ariya/phantomjs/wiki/Examples) にサンプルコードがあるので、それを参考に使用する。

# grunt.js
node.js を利用した CUI のビルドツール。タスクを設定し、それらを自動化してくれる。
インストールは下記コマンドで ok。

```
$ sudo npm install -g grunt-cli
```

### 使い方
grunt.js は様々なことができるが、今回は js フォルダ以下にある js ファイルに変更が加えられる度に自動で jshint を実行する例を紹介する。フォルダ構成は下記の通り。

```
project/
    js/sample.js
```

まず project フォルダへ移動し、下記コマンドを入力。入力後対話形式で name などを聞いてくるので必要事項を入力する。

```
$ npm init
```

入力完了後 project フォルダに package.json が生成される。
( 入力内容により異なるが ) 例えば次の様な内容となる。

```package.json
{
  "name": "test",
  "version": "0.0.0",
  "description": "test",
  "main": "Gruntfile.js",
  "scripts": {
    "test": ""
  },
  "repository": "",
  "author": "MasayaMizuhara",
  "license": "BSD"
}
```

package.json 生成後、下記コマンドにより生成した package.json を有効にする。

```
$ npm install grunt --save-dev
```

続いて使用するプラグインをインストールする。

```
$ npm install grunt-contrib-watch grunt-contrib-jshint --save-dev
```

タスクを使用する Gruntfile.js を project フォルダ直下に作る。
今回のサンプルでの内容は下記の通り。

```
module.exports = function(grunt) {
    grunt.initConfig({
            jshint: {
                files: ['js/*.js'],
            },  
            watch: {
                files: ['js/*.js'],
                tasks: ['jshint']
            }   
    }); 
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
};
```

Gruntfile.js のあるフォルダにて下記コマンドを実行する。
これにより、js フォルダ以下にある js ファイルが変更される度に jshint が実行される様になる。

```
$ grunt watch
```

### 参考サイト
参考にしたサイト。

* http://kojika17.com/2013/03/grunt.js-memo.html
* http://1000ch.net/2013/08/01/FrontendCodingEnvironment/