Edited at

JavaScript 便利ツール

More than 5 years have passed since last update.

普段は 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


参考サイト

参考にしたサイト。