JavaScriptは一つの実行内容に対して複数の書き方が存在します。また、コールバック地獄と比喩される非同期処理の積み重ねなど、ソースコードが分かりづらくなる要因が多数存在します。一人で小さなスクリプトを書く分には構いませんが、多人数で大きなWebアプリケーションを作り上げる際には問題が起こりやすいプログラミング言語です。

そこでまずコードを自動レビューして、悪い部分を修正していきましょう。そこで使えるのがJSHintになります。

JSHintのインストール

JSHintは npm コマンドでインストールできます。

$ npm install -g jshint

これで jshint コマンドが使えるようになります。

package.jsonに記載して該当のプロジェクト、ディレクトリにインストールして使う事もできます。

JSHint の使い方

一番オーソドックスな使い方は jshint コマンドに解析したいJavaScript/Node.jsプロジェクトのパスを渡す方法です。これはファイルでもディレクトリでも大丈夫です。

$ jshint path/to/javascript

なお、Node.jsのプロジェクトでは npm を使ってインストールしたライブラリが node_modules というディレクトリに入ります。この中にあるファイルは自分たちで開発したものではないので、チェック対象外にするのが良いでしょう。この時には --exclude を使います。

$ jshint --exclude="node_modules/" path/to/javascript

実際に実行すると、次のように指摘事項が標準出力されます。

$ jshint --exclude="node_modules/" path/to/javascript
index.js: line 2, col 3, Comma warnings can be turned off with 'laxcomma'.
index.js: line 1, col 26, Misleading line break before ','; readers may interpret this as an expression boundary.
index.js: line 9, col 19, ['BOT_URL'] is better written in dot notation.
index.js: line 9, col 30, Missing semicolon.
4 errors

後はこの指摘事項に沿って修正していくことで、最終的に何も出力が出なければ完了になります。

オプションについて

--reporter オプションを使うと出力形式を変更できます。checkstyleを指定するとCheckStyle互換のXML形式で出力されます。

$ jshint --exclude="node_modules/" --reporter=checkstyle path/to/javascript
<?xml version="1.0" encoding="utf-8"?>
<checkstyle version="4.3">
<file name="index.js">
<error line="9" column="27" severity="warning" message="Missing semicolon." source="jshint.W033" />
</file>
</checkstyle>

unixを指定すると行と文字数のカウントがシンプルになります。

$ jshint --exclude="node_modules/" --reporter=unix path/to/javascript
index.js:9:27: Missing semicolon.
1 error

その他、 --extract オプションを指定するとHTMLファイル内に書かれているJavaScriptについてチェックしてくれるようになります。

$ jshint --exclude="node_modules/*" --extract="auto" index.html
index.html: line 16, col 46, Missing semicolon.
1 error

設定の指定

設定ファイルは .jshintrc という名前で設定します。内容はJSONで、次のような内容になります。以下は定義されていない変数をエラーとし、使われていない変数があってもエラーにします。さらにグローバル変数としてMY_GLOBALを指定することで未定義エラーを防止します。

{
"undef": true,
"unused": true,
"globals": {
"MY_GLOBAL": true
}
}

または各JavaScriptファイル内にコメントで定義もできます。使いやすい方を採用してください。

/* jshint undef: true, unused: true */
/* globals MY_GLOBAL */

ES6で書かれたファイルをチェックする場合は /*jshint esversion: 6 */ を指定します。もちろん .jshintrc を使って全体に対して設定を適用できます。

また、チェック対象外にしたい行は // jshint ignore:line と記述します。この他のオプションについては JSHint Options Reference を参考にしてください。

JSHint は長い間メンテナンスされています。その中には多くのナレッジが詰まっています。他の解析器に比べて機能は決して多くありませんが、必要十分な機能は揃っています。

SideCI の自動コードレビューでは JSHint にも対応しています。個人であればローカルに JSHint をインストールすれば良いでしょう。チームで開発している時にはGitHubのPull Request単位で自動コードレビューを行うSideCIをぜひお試しください。

SideCIでは無料トライアルも可能です。ぜひ皆さんのRailsプロジェクトで試してみてください。