2012/05/14
カテゴリ : JavaScript
Tech
JavaScriptのコーディング規約を気軽にチェック
こんにちは、中川です。
今回は「Google JavaScript Style Guide」を気軽にチェックできるClosure Linterをご紹介したいと思います。
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
Google JavaScript Style Guideのいいところですが、
規約だけでなく、しっかりしたツールも揃っているところが素晴らしいと思います。
コーディング規約はあったとしても、それに従っているか定期的に簡単にチェックする方法がないと、
いつしか守られないまま開発されてしまうことになりますね。
※今回の内容はMacにて動作確認を行なっています。
https://developers.google.com/closure/utilities/
「Google JavaScript Style Guide」に則ってチェック・修正を行えるツールとなります。
以下のような以下のサンプルで動作確認したいと思います。
gjslintでコーディングスタイル違反を確認してみましょう。
これらをまとめて修正してくれるのが、fixjsstyleコマンドになります。
では、実行してみましょう。

※(赤色が修正前、緑色が修正後です。)
このように、コーディング規約違反の部分を一括で修正してくれます。
非常に便利なツールですね。
gjslintで確認して、fixjsstyleで直してというのもいいですが、
ちょこちょこやるのは結構面倒で、そのうちやらなくなるものです。
ということで、VimプラグインのSyntasticを使って、
コーディング時に自動でチェックするようにすることにしましょう。
https://github.com/scrooloose/syntastic
pathogen.vimを使っている場合、以下のように設置できます。
警告がある行に、「>>」印がつきます。
また、警告がある場合は、vimで「:Errors」コマンドを実行すると、
エラーの詳細を確認することができます。

なおSyntasticは、gjslint だけでなく、jslintやjshintのチェックにも対応しているようです。
また、JavaScriptに限らず非常にたくさんの言語に対応しています。
尚、今回ご紹介した「Google JavaScript Style Guide」以外にも、
JavaScriptのコーディング規約は探せばいろいろあるようです。
JavaScriptのいろいろなコーディングルールをまとめてみた | Web scratch
「Google JavaScript Style Guide」が絶対というわけではないので、各プロジェクトに合ったものを利用するようにしましょう。
それでは、みなさん、コーディング規約を守ってきれいな開発を!
今回は「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
・動作確認
以下のような以下のサンプルで動作確認したいと思います。
- //
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
警告がある行に、「>>」印がつきます。
また、警告がある場合は、vimで「:Errors」コマンドを実行すると、
エラーの詳細を確認することができます。
なおSyntasticは、gjslint だけでなく、jslintやjshintのチェックにも対応しているようです。
また、JavaScriptに限らず非常にたくさんの言語に対応しています。
■最後に
尚、今回ご紹介した「Google JavaScript Style Guide」以外にも、
JavaScriptのコーディング規約は探せばいろいろあるようです。
JavaScriptのいろいろなコーディングルールをまとめてみた | Web scratch
「Google JavaScript Style Guide」が絶対というわけではないので、各プロジェクトに合ったものを利用するようにしましょう。
それでは、みなさん、コーディング規約を守ってきれいな開発を!
2012/05/10
カテゴリ : 日常
誕生日プレゼント
こんにちは、阿部です。
先日、社内で3月・4月の誕生日会を開いていただきました☆
アシアルでは、ほぼ毎月誕生日会を開催していて、プレゼントを贈りあっています。
今回は、5年目ということで、今までもらったプレゼントを紹介しようと思います。
先日、社内で3月・4月の誕生日会を開いていただきました☆
アシアルでは、ほぼ毎月誕生日会を開催していて、プレゼントを贈りあっています。
今回は、5年目ということで、今までもらったプレゼントを紹介しようと思います。
インスピレーションをかきたてるポスターデザインのまとめ記事のまとめ
こんにちは、鴨田です。
最近はあまりデザイン寄りの記事は書いていなかったので、たまにはデザイナーとして側面から、記事を書きたいと思います。
今回は海外ブログ記事のご紹介です。
10種類のポスター作品と6つのポスターまとめ記事(サイト)を紹介しています。
記事内で紹介しているまとめ記事(サイト)は原文と同じですが、ポスター画像は自分が気に入ったものに変えていますし、冒頭文は意訳ですので、翻訳元の記事も確認してもらえると、より正確に伝わると思います。
最近はあまりデザイン寄りの記事は書いていなかったので、たまにはデザイナーとして側面から、記事を書きたいと思います。
今回は海外ブログ記事のご紹介です。
10種類のポスター作品と6つのポスターまとめ記事(サイト)を紹介しています。
記事内で紹介しているまとめ記事(サイト)は原文と同じですが、ポスター画像は自分が気に入ったものに変えていますし、冒頭文は意訳ですので、翻訳元の記事も確認してもらえると、より正確に伝わると思います。













最近のコメント