普段は 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 を実行すると下記の様な出力が得られる。
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 が生成される。
( 入力内容により異なるが ) 例えば次の様な内容となる。
{
"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
参考サイト
参考にしたサイト。