アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

JavaScriptのコーディング規約を気軽にチェック

こんにちは、中川です。
今回は「Google JavaScript Style Guide」を気軽にチェックできるClosure Linterをご紹介したいと思います。

Google JavaScript Style Guide


http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

Google JavaScript Style Guideのいいところですが、
規約だけでなく、しっかりしたツールも揃っているところが素晴らしいと思います。
コーディング規約はあったとしても、それに従っているか定期的に簡単にチェックする方法がないと、
いつしか守られないまま開発されてしまうことになりますね。

※今回の内容はMacにて動作確認を行なっています。

■Closure Linter


https://developers.google.com/closure/utilities/

Google JavaScript Style Guide」に則ってチェック・修正を行えるツールとなります。

・インストール




$ sudo easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz

これで、gjslint、fixjsstyleのコマンドが利用できるようになります。

・動作確認


以下のような以下のサンプルで動作確認したいと思います。


// sample.js
var params = { 
  name: "Asial",
  message: 'Hello',
};

hello(params.name,params.message);

function hello(name, message) {
  alert(name + ' : ' + message)
}


gjslintでコーディングスタイル違反を確認してみましょう。


$ gjslint sample.js

FILE  :  /path/to/sample.js -----
Line 3, E:0131: Single-quoted string preferred over double-quoted string.
Line 4, E:0121: Illegal comma at end of object literal
Line 7, E:0002: Missing space after ","
Line 10, E:0010: (New error) Missing semicolon at end of line
Found 4 errors, including 1 new errors, in 1 files (0 files OK).

Some of the errors reported by GJsLint may be auto-fixable using the script
fixjsstyle. Please double check any changes it makes and report any bugs. The
script can be run by executing:

fixjsstyle sample.js

このように、ズラズラと警告を表示してくれます。
これらをまとめて修正してくれるのが、fixjsstyleコマンドになります。

では、実行してみましょう。


$ fixjsstyle sample.js

Fixed 4 errors in /path/to/sample.js


・修正内容



※(赤色が修正前、緑色が修正後です。)

このように、コーディング規約違反の部分を一括で修正してくれます。
非常に便利なツールですね。

Vimとの連携


gjslintで確認して、fixjsstyleで直してというのもいいですが、
ちょこちょこやるのは結構面倒で、そのうちやらなくなるものです。

ということで、VimプラグインのSyntasticを使って、
コーディング時に自動でチェックするようにすることにしましょう。

Syntastic


https://github.com/scrooloose/syntastic

pathogen.vimを使っている場合、以下のように設置できます。



$ cd ~/.vim/bundle
$ git clone https://github.com/scrooloose/syntastic.git

これで、sample.jsを編集中に保存する度に、チェックが走るようになり、
警告がある行に、「>>」印がつきます。
また、警告がある場合は、vimで「:Errors」コマンドを実行すると、
エラーの詳細を確認することができます。

なおSyntasticは、gjslint だけでなく、jslintやjshintのチェックにも対応しているようです。
また、JavaScriptに限らず非常にたくさんの言語に対応しています。

■最後に


尚、今回ご紹介した「Google JavaScript Style Guide」以外にも、
JavaScriptのコーディング規約は探せばいろいろあるようです。
JavaScriptのいろいろなコーディングルールをまとめてみた | Web scratch
Google JavaScript Style Guide」が絶対というわけではないので、各プロジェクトに合ったものを利用するようにしましょう。

それでは、みなさん、コーディング規約を守ってきれいな開発を!