【JavaScript】JSHintで簡単構文チェック

こんにちは。竪月です。

前回に引き続きJavaScriptをテーマに、エラーや潜在的な問題を検出してくれる構文チェッカー「JSHint」の紹介をしたいと思います。
(前回：【JavaScript】Jasmine + JSCoverを使ったテスト駆動開発)

以前業務で、IE6〜IE11、Chrome、FireFox、MacやiOSのSafariや、Androidの標準ブラウザまでマルチデバイスの対応をした時、IE11では動くのに、IE8やIE6だと途端に動かなくなる、ということがあり、簡単なエラーは実はJSHintで解決できるものが多かったです。 例えば、判定の仕方とか、終端の;,が抜けたり無駄にあったり、などを簡単に検知することができます。

UTやITの前にJSHintでバグを潰しておく、というのはとても有効だなと思うので、よかったら試してみてください。コマンドでさくっと確認できます。また、私は使ってなかったのですが、SublimeTextを使っている人は、「SublimeLiner」というパッケージを使うと、いちいちコマンドをたたかなくても常にチェックしてくれるので便利そうですね。

◆準備

それではさっそく、JSHintの環境を準備しましょう。

①nodeJSをインストール

Windows：http://nodejs.org/　からnode-v0.12.0-x64.msiをダウンロードし実行

Mac：コマンドで以下を実行

brew install node

②JSHintをインストール

$ npm install -g jshint

※Windowsの場合はPC再起動後に実行します。

◆実行

では、構文エラーのあるjsファイルを対象にJSHintコマンドを実行してみましょう。

◆サンプルソースNG

/** 構文エラーとなるfunction */
function Hoge() {
    var flg = true;
    if (flg == true) {
        return 'OK'
    } else {
        return 'false';
    };
};

◆JSHint実行結果

$ jshint Hoge.js 
Scroller_jshint.js: line 4, col 13, Use '===' to compare with 'true'.
Scroller_jshint.js: line 5, col 20, Missing semicolon.
Scroller_jshint.js: line 8, col 6, Unnecessary semicolon.
Scroller_jshint.js: line 9, col 2, Unnecessary semicolon.

◆解説
JSHint実行の結果、以下の箇所で構文エラーとなっています。

• 4行目：比較演算子が厳密等価比較ではないため怒られています。スクリプトエラーとなることはありませんが、曖昧等価比較では、1でもtrueでも真になってしまうので、期待する結果とならない可能性があります。
• 5行目：「return ‘OK’」の後に’;’がないため怒られています。末尾は必ず’;’で終わりましょう。
• 8、9行目：「}」かっこを閉じる場合、’;’は不要なため怒られています。

JSHintは、上記のようにスクリプト実行では検出できない構文エラーをチェックしてくれます。

それでは、修正して再度JSHintを実行してみましょう。

◆サンプルソース修正

/** 構文エラーを修正したfunction */
function Hoge() {
    var flg = true;
    if (flg === true) {
        return 'OK';
    } else {
        return 'false';
    }
}

◆JSHint修正後実行結果

$ jshint Hoge.js 

すべてのエラーが解消されました！

あとよくあるエラーとしては、「eval is evil」というものがあります。
eval()関数を使ってjsonをそのままパースしたりすると、その文字列本当にそのまま使っても大丈夫なの、つまり、悪意のあるユーザが入力した値をそのまま使って、不正なデータアクセスとかされる危険性があるので、使わないほうがいいよ、ということです。
このエラーとなった場合は、想定内であればJSHintのオプションに’eval’を付加してエラーとして扱わなくすれば良いのですが、eval()を使わない記述を考えるのも手かなと思います。

◆まとめ

JSHintを使って簡単にJavaScriptの構文チェックをする方法、いかがでしたか。

人のレビューにも限界はあるし、機械化できることはしてしまったほうが良いので、JSHintとかCSSHintとかは使ったほうがバグ削減につながるのでみんな幸せですね。
これからも品質向上に繋がるような、記事を書いていきたいと思います。

それでは、また次回。