JavaScriptTweetこんにちは、中川です。ここ1・2年ですが、私の担当するプロジェクトでは、PHPよりもJavaScriptの開発が多い状態が続いております。最近のJS開発で利用しているライブラリやツールなどをまとめてみました。http://backbonejs.org/JavaScriptのMVCフレームワーク。何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。http://angularjs.org/データバインディングを備えたフレームワーク。高機能なテンプレートや、DIの仕組み、ルーティング+テンプレート読込機能もあり、大規模な開発にも耐えられるようになっています。Backboneを追い越す人気になるのではないかと思っていますが、まだまだ日本語情報は多くはないようです。http://jquerymobile.com/スマホ向けUIフレームワーク。モバイル版サイトを作りたい場合にも利用できます。モバイルUIパーツやページ遷移のアニメーションが便利です。Mobileっぽさが出すぎるのが難点です。http://jquery.com/以下のZeptoを使う場合以外は、ほぼ100%使っています。jQueryではなく、zeptoを使うこともありますが、そこまで気にしなくていい場合はjQueryがいいと思っています。http://requirejs.org/JSのモジュール化とローディングを行なってくれます。Backboneの場合は使っています。AngularJSの場合は、あまり相性がよくないと感じるのでRequireJSは使わず、後述のGruntで結合しています。http://underscorejs.org/Backboneを使う場合に利用しています。)のほうが、高速で機能も豊富のようですが、Underscoreでも特に困る場面がなかったので、こちらを使っています。Backbone利用時のテンプレートは_.templateを使っています。社内ではHandlerbarsを使ったプロジェクトもあるようです。http://momentjs.com/最近よく使っているので、ここに加えました。日付のパース、フォーマット処理を行うのにとても便利です。Guidehttps://google.github.io/styleguide/javascriptguide.xmlプロジェクトによって若干の違いがあるのですが、基本的にGoogleのスタイルガイドを利用しています。○インデントは4スペース最近のアシアルでは4インデント派が多いため、そこは妥協しました。○1行の長さは100〜120文字80行でもいいかと思っていたのですが、80では余計に見づらくなるような改行を入れるはめになる場面が多いので、これも少々ゆるめて最近は100〜120で妥協しています。http://jshint.com/JavaScripのコーディング規約チェックツール。未定義変数や未使用変数、コード行数、引数の数、循環複雑度なども警告することができます。メンバーが好き勝手書かないように、チーム開発には導入が必須です。使っていたこともあったのですが、上記のようなプロジェクトにより色々と妥協する部分もあり、最近ではJSHintだけになりました。https://npmjs.org/package/platoプロジェクトのJSファイルを解析して、コードの行数や複雑度、メンテナンス性、JSHintの警告などをHTMLレポートとしてまとめてくれます。先日のブログ記事でも紹介しましたが、こちらはリファクタリングのお供に利用しています。Vimで行なっています。tigの表示崩れがいやで、最近Screenからtmuxに乗り換えてみました。前に整理してプラグインを随分減らしました。現在使っているプラグインは以下になります。http://www.jetbrains.com/phpstorm/アシアルでも数人が導入していて評価も高いようです。人のコードを読んだり、リファクタリングの際に使うことが多いです。http://www.sublimetext.com/ビュー側(HTML)のコードの編集が多い場合には、vimではなくこちらを使っています。Textで行うことが多いです。この程度の理由なので、他のエディタでもそんなに困らない気がしてきました。http://www.google.co.jp/intl/ja/chrome/browser/canary.htmlDevToolsが便利すぎるので、Chromeを使っています。最近はFirefoxを開発で使う機会は減りました。Canaryビルド版のChromeは動作の安定は保障されませんが、ほぼ毎日更新され最新の機能をいち早く試せます。通常のChromeと同時にインストール、起動することができます。通常のChromeはウェブ閲覧用に使っており、Canary版は開発に使っています。以下、Canary版に入れているエクステンションです。APIを直接たたけるのが便利です。他にも色々試しましたがこれが一番しっくりきました。Bataranghttps://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfkAngularJSのscopeの中がのぞけるエクステンションです。○LiveReloadhttp://livereload.com/ファイル保存に合わせてブラウザを自動リロードしてくれます。HTMLやCSSの調整の時によく使っています。http://pivotal.github.io/jasmine/個人的にはQUnitでもいいのですが、AngularJSがJasmineなのと、私の関わるプロジェクトメンバー的にJasmine派が多いので採用しています。Monacaチームでは一部でQUnitを使っている気配もあります。http://karma-runner.github.io/JavaScriptのテストランナーです。旧名Testacular。Jasmine対応、主要ブラウザ対応、ファイル更新監視、コードカバレッジも計測できます。TestemやBuster.jsも過去に触ってみましたが、機能的にも満足なのと、AngularJSで採用されていることもあり、Karmaに落ち着きました。WebDriverがとても便利で使い始めました。http://gruntjs.com/JavaScriptのタスク実行ツール。最近使っているのは以下のタスクになります。開発用の仮APIサーバなど、さくっと作れる系のものでも利用しています。運用面を考えるとPHPのほうが経験があるので安定運用はしやすく感じました。(これは慣れの部分が大きいでしょうね。)以下、よく使うnpmパッケージです。http://expressjs.com/サーバサイドMVCフレームワーク。https://github.com/visionmedia/ejsテンプレートエンジン。http://mongoosejs.com/MongoDBアクセス用ライブラリ。https://npmjs.org/package/node-devNodeスクリプトの更新監視+自動リロード。https://npmjs.org/package/node-static静的ファイル用HTTPサーバー。指定ディレクトリをhttpで公開できます。私の環境では0.10.xではうまく動かないようで、v0.8.x系のNodeで利用しています。http://visionmedia.github.io/mocha/テストライブラリ。JasmineやQUnitと比べてとても非同期テストが書きやすいです。http://stedolan.github.io/jq/JSON整形ツール。APIから返却されたJSONの確認に便利です。http://lesscss.org/社内では、less派とsass派、半々くらいでしょうか。個人的にはNode.jsで使えるlessが好きです。