2013年7月16日

最近のJavaScript開発まとめ

asial

Pocket

こんにちは、中川です。

ここ1・2年ですが、私の担当するプロジェクトでは、
PHPよりもJavaScriptの開発が多い状態が続いております。

JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、
一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。

フレームワーク

●Backbone.js http://backbonejs.org/

JavaScriptのMVCフレームワーク。
何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。
利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。

●AngularJS http://angularjs.org/

データバインディングを備えたフレームワーク。
高機能なテンプレートや、DIの仕組み、ルーティング＋テンプレート読込機能もあり、大規模な開発にも耐えられるようになっています。
Backboneを追い越す人気になるのではないかと思っていますが、まだまだ日本語情報は多くはないようです。

●jQuery Mobile http://jquerymobile.com/

スマホ向けUIフレームワーク。さくっとモバイル版サイトを作りたい場合にも利用できます。
モバイルUIパーツやページ遷移のアニメーションが便利です。
CSSをうまく調整すれば素敵なデザインにもできるみたいですが、あまり考えずに利用するとjQuery Mobileっぽさが出すぎるのが難点です。

ライブラリ

●Zepto http://zeptojs.com/

スマホ案件では軽量、初期化速度等からjQueryではなく、zeptoを使うこともありますが、
そこまで気にしなくていい場合はjQueryがいいと思っています。

●RequireJS http://requirejs.org/

JSのモジュール化とローディングを行なってくれます。
Backboneの場合は使っています。
AngularJSの場合は、あまり相性がよくないと感じるのでRequireJSは使わず、後述のGruntで結合しています。

●Underscore.js http://underscorejs.org/

Backboneを使う場合に利用しています。
Lo-Dash( https://github.com/bestiejs/lodash )のほうが、高速で機能も豊富のようですが、
Underscoreでも特に困る場面がなかったので、こちらを使っています。
Backbone利用時のテンプレートは_.templateを使っています。
社内ではHandlerbarsを使ったプロジェクトもあるようです。

●Moment.js http://momentjs.com/

最近よく使っているので、ここに加えました。
日付のパース、フォーマット処理を行うのにとても便利です。

コーディング規約

●Google JavaScript Style Guide

https://google.github.io/styleguide/javascriptguide.xml

プロジェクトによって若干の違いがあるのですが、基本的にGoogleのスタイルガイドを利用しています。

○インデントは4スペース
最近のアシアルでは4インデント派が多いため、そこは妥協しました。

○1行の長さは100〜120文字
80行でもいいかと思っていたのですが、80では余計に見づらくなるような改行を入れるはめになる場面が多いので、これも少々ゆるめて最近は100〜120で妥協しています。

●JSHint http://jshint.com/

JavaScripのコーディング規約チェックツール。
インデント数やスペースの位置などのコードの書き方だけでなく、
未定義変数や未使用変数、コード行数、引数の数、循環複雑度なども警告することができます。
メンバーが好き勝手書かないように、チーム開発には導入が必須です。

コーディング規約のチェックには、gjslint (Closure Linter) を使っていたこともあったのですが、上記のようなプロジェクトにより色々と妥協する部分もあり、最近ではJSHintだけになりました。

●plato https://npmjs.org/package/plato

プロジェクトのJSファイルを解析して、コードの行数や複雑度、メンテナンス性、JSHintの警告などをHTMLレポートとしてまとめてくれます。
先日のブログ記事でも紹介しましたが、こちらはリファクタリングのお供に利用しています。

エディタ

●Vim http://www.vim.org/

通常の開発はiTerm + tmux + Vimで行なっています。
tigの表示崩れがいやで、最近Screenからtmuxに乗り換えてみました。

ちょっと前に整理してプラグインを随分減らしました。現在使っているプラグインは以下になります。

○Vundle https://github.com/gmarik/vundle
○Syntastic https://github.com/scrooloose/syntastic
○vim-quickrun https://github.com/thinca/vim-quickrun
○neocomplcache https://github.com/Shougo/neocomplcache.vim
○zencoding-vim https://github.com/mattn/zencoding-vim
○simple-javascript-indenter https://github.com/jiangmiao/simple-javascript-indenter

●PhpStorm http://www.jetbrains.com/phpstorm/

アシアルでも数人が導入していて評価も高いようです。
ただし私は通常の開発ではあまり使っておらず、
人のコードを読んだり、リファクタリングの際に使うことが多いです。

●Sublime Text http://www.sublimetext.com/

ビュー側(HTML)のコードの編集が多い場合には、vimではなくこちらを使っています。
マウスが使えるのと、プロジェクトのファイルツリー、タブでファイルを開いておいて行き来して確認などが便利なので、HTMLの編集はSublime Textで行うことが多いです。
が、この程度の理由なので、他のエディタでもそんなに困らない気がしてきました。

ブラウザ

●Google Chrome Canary http://www.google.co.jp/intl/ja/chrome/browser/canary.html

DevToolsが便利すぎるので、Chromeを使っています。最近はFirefoxを開発で使う機会は減りました。

Canaryビルド版のChromeは動作の安定は保障されませんが、ほぼ毎日更新され最新の機能をいち早く試せます。通常のChromeと同時にインストール、起動することができます。
通常のChromeはウェブ閲覧用に使っており、Canary版は開発に使っています。

以下、Canary版に入れているエクステンションです。

○Advanced Rest Client
https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo
フロントエンドのJSからREST APIで連携するケースの案件が増えてきていますので、REST APIを直接たたけるのが便利です。他にも色々試しましたがこれが一番しっくりきました。

○AngularJS Batarang
https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk
AngularJSのscopeの中がのぞけるエクステンションです。

○LiveReload
http://livereload.com/
ファイル保存に合わせてブラウザを自動リロードしてくれます。
HTMLやCSSの調整の時によく使っています。