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」が絶対というわけではないので、各プ ロジェクトに合ったものを利用するようにしましょう。
それでは、みなさん、コーディング規約を守ってきれいな開発を！
