最近のJavaScript開発まとめ
こんにちは、中川です。
ここ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っぽさが出すぎるのが難点です。
ライブラリ
●jQuery http://jquery.com/
以下のZeptoを使う場合以外 は、ほぼ100%使っています。
●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の調整の時によく使っています。
テスト
●Jasmine http://pivotal.github.io/jasmine/
個人的にはQUnitでもいいのですが、AngularJSがJasmineなのと、私の関わるプロジェクトメンバー的にJasmine派が多いので採用しています。
Monacaチームでは一部でQUnitを使っている気配もあります。
●Karma http://karma-runner.github.io/
JavaScriptのテストランナーです。旧名Testacular。
Jasmine対応、主要ブラウザ対応、ファイル更新監視、コードカバレッジも計測できます。
TestemやBuster.jsも過去に触ってみましたが、機能的にも満足なのと、AngularJSで採用されていることもあり、Karmaに落ち着きました。
●Selenium http://docs.seleniumhq.org/
まだ本格導入ではありませんが、統合テストのお供に、Selenium WebDriverがとても便利で使い始めました。
Grunt
●Grunt http://gruntjs.com/
JavaScriptのタスク実行ツール。
最近使っているのは以下のタスクになります。
○grunt-contrib-concat https://github.com/gruntjs/grunt-contrib-concat
○grunt-contrib-uglify https://github.com/gruntjs/grunt-contrib-uglify
○grunt-contrib-jshint https://github.com/gruntjs/grunt-contrib-jshint
○grunt-contrib-watch https://github.com/gruntjs/grunt-contrib-watch
○grunt-contrib-less https://github.com/gruntjs/grunt-contrib-less
Node.js
Node.jsは、GruntやJSHintなど各種開発ツール系で利用するのがメインですが、
開発用の仮APIサーバなど、さくっと作れる系のものでも利用しています。
本番環境への導入では、MongoDBと組み合わせた小規模なSNSなどで利用してみましたが、
運用面を考えるとPHPのほうが経験があるので安定運用はしや すく感じました。（これは慣れの部分が大きいでしょうね。）
以下、よく使うnpmパッケージです。
●express http://expressjs.com/
サーバサイドMVCフレームワーク。
●ejs https://github.com/visionmedia/ejs
テンプレートエンジン。
●mongoose http://mongoosejs.com/
MongoDBアクセス用ライブラリ。
●node-dev https://npmjs.org/package/node-dev
Nodeスクリプトの更新監視+自動リロード。
●node-static https://npmjs.org/package/node-static
静的ファイル用HTTPサーバー。コマンドでディレクトリ指定して実行するだけで、
指定ディレクトリをhttpで公開できます。私の環境では0.10.xではうまく動かないようで、
v0.8.x系のNodeで利用しています。
●Mocha http://visionmedia.github.io/mocha/
テストライブラリ。JasmineやQUnitと比べてとても非同期テストが書きやすいです。
その他
●jq http://stedolan.github.io/jq/
JSON整形ツール。APIから返却されたJSONの確認に便利です。
●less http://lesscss.org/
社内では、less派とsass派、半々くらいでしょうか。
個人的にはNode.jsで使えるlessが好きです。
●バージョン管理
アシアルでは、Git http://git-scm.com/ を利用しています。
MonacaなどはGitHubも使っているようですが、社内でのソース管理には、
GitLab http://gitlab.org/ を利用しています。
まとめ
上記、長々とたくさんのリンクを書いてきましたが、
JS開発をされている方には、有名ドコロが多く、掘り出し物はないかもしれませんね。。
私は主に受託プロジェクトの開発を行なっており、開発メンバーや保守のことを考えるとあまりエッジの効いたものを使うのをためらってしまうため、このような無難なリストになっているのかと思いました。
特に固定化したいという訳ではありませんので、今後も色々試していきたいと思います。
