Help us understand the problem. What is going on with this article?

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

参考サイト

参考にしたサイト。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away