普段は 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 の単体テストフレームワーク。
こちらよりダウンロード可能。

使い方

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

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

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

補足

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

$ npm install -g jasmine-node

Sinon.js

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

$ npm install -g sinon

使い方

こちらのサイトを参考。

PhantomJS

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

$ brew install phantomjs

使い方

ここにサンプルコードがあるので、それを参考に使用する。

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

参考サイト

参考にしたサイト。

JavaScript 便利ツール