最近のJSの開発環境について知っておくべきライブラリ10個

js

ほんとに10個だと思った？（無意味に煽っていくスタイル）

最近JSだけのリポジトリで無益なゲームを大量に作っては破棄しているのだけど、割とストレスなく出来上がってきたので書く。

長々と書くが、要は次のリポジトリに概要が詰まってる。
mizchi/mizchi_client_boilerplate · GitHub https://github.com/mizchi/mizchi_client_boilerplate

前提として、最近はCSJSでもnodeのインストールを前提とする環境が多い。必須といってもいい。

grunt

gruntjs/grunt · GitHub https://github.com/gruntjs/grunt

ビルドタスクを簡単に作れる。make、rake、などに相当するが、node製らしくファイルシステムの監視でアクションを作れるのが特長。$ grunt serverで簡易サーバーも立てられる。

プラグインが大量にあって追加も簡単。ググればだいたい見つかる。

watchタスクにcoffeeのコンパイル手順を書いて、$ grunt watch server、みたいな使い方するとlocalhost:8000に簡易サーバーを立てつつ裏でファイルシステム監視しつつcoffeeの自動コンパイルしてくれて便利。

bower

twitter/bower · GitHub https://github.com/twitter/bower

Twitter製のクライアントサイドjs依存管理ライブラリ。gemとかnpmだと思ってもらえば問題ない。
component.json みたいなファイルを書いて、 $ bower install すると components/以下に保存される。require.jsに対応している。

{
    "name":  "MyProject",
    "version": "0.0.1",
    "dependencies": {
        "underscore": "latest",
        "jquery": "latest",
        "requirejs": "2.1.1"
    }
}

使いたいライブラリがbowerに登録されていないことが多いが、バージョン名のところにgithubもしくはホスティングされているURLを直接参照すれば解決する。

yeoman

yeoman/yeoman · GitHub https://github.com/yeoman/yeoman

CSJS開発環境の総合フレームワーク。日本の紹介記事だとgruntと対になるような紹介をされていることが多いが、実際の中身はgruntのラッパーライブラリである。

angularやemberを試してみたいときに、おもむろに $ yeoman init angularすると雛形が出来上がって、気軽に試したいときにすごい便利。

紹介はするけど、ぶっちゃけ自分ではあまり使ってない。あまりにもyeoman流儀を強制されて、Railsの吐き出したディレクトリを最初に目にしたような目眩を感じる。僕のようにこの流儀が受け付けない人は、何も考えずに他人のboilerplate眺める用途に使おう。

require.js

RequireJS http://requirejs.org/

最近のJSの依存管理のデファクトなのだが、自分はあまり好きではない。
名前空間を決めて使おう！ってのはモダンなJSだと当たり前のことなんだけど、そんな当たり前の糞な規約を守れない糞JSコーダーを、require.jsという枷に入れてどうにかします、みたいな印象を受ける。

未だに自分のローカルの依存解決は gruntのconcat順で解決していてダサい(しデバッグしづらい)のでなんとかしたいのだけど、require.jsの規約はもっとダサい。ライブラリのインスタンスをコールバックで受け取るっていうのも、そのために無駄にネストを深くするのも、ちょっと嫌だ。

でもまあ、TwitterがFlightやBower等で使うことを強制してきてるし、外部ライブラリ間の依存解決もできるし、たぶんこれから標準になるんだろーなといった印象。TypeScriptもmoduleを使うと内部構造はrequire.js準拠になるオプションがある。

peerjs

PeerJS http://peerjs.com

つい先日リリースされたばかりで、WebRTCでクライアントサイドP2Pを実現する、そのAPIを使いやすくしたライブラリ。おそらくsocket.ioに似せたものなので、使ったことがある人にはわかりやすい。
クライアント間でハンドシェイクするためのstunサーバーもpeerjs.comで提供してくれている。(npm で自分で立てても良い)

今現在ChromeDevでしか動作しないが、自分でサーバー立てずにlocalStorageとp2pだけで「ウェブ」アプリを作ることもできる。そんな未来もある。HTML5でゲーム作ってる人はウェブサーバー管理しなくていいってのはすごい利点だと思ってる。

その他MVCフレームワークについて雑感

Backbone

無難に便利なんだけどCollection, Model部分はその他モジュールと綺麗に切り離されているので、そこだけ使いたいケースが多い。Viewはイベントハンドラとして使うと便利。
Backbone使いはよく言うんだけど、このライブラリはコード量が減る方向には貢献しない。

Angular

あんまりガッツリ使ってないんだけど、DOMツリーが名前空間を表象するのは自分にはちょっと受け入れがたい。抽象度が低く規約が多い。HTMLとデータ構造がそのままビューに反映するアプリには良いとは思う。裏で大量のロジックが走るようなアプリには向いてない。

Ember

Railsの規約をそのまま持ってきすぎで、ルーティング制約とそのモデル対応がきつい。シングルページアプリケーションしか作ってない身だと有り難みがなかった。
おそらくRailsとの親和性が高いのでRails組み込みとして使うと真価を発揮するんじゃないだろうか。まだそんな時代じゃない気もするが…。



疲れたのでこのへんで終了。

そうそう、Railsは4.0で遷移アクションがデフォルトpushStateになるらしいので、つまりはJSオブジェクトを破棄しない。グローバル汚染が厳しくなるので、より慎重なJSを書く必要があるし、遷移時のオブジェクトの再生成コストがなくなるのでJSの仕事が多くなると思われる。

HTML5ゲームエンジン、テストフレームワークについてはまた後日。