JavaScriptの開発効率を高める7つのライブラリ

今回はブレガーの開発効率を高めるために使用した、

7つのJavaScriptライブラリおよびフレームワークをご紹介できればと思います。

それでは、早速どうぞ！

http://zeptojs.com/

jQueryとほぼ同機能でファイルサイズ1/3の軽量ライブラリ。

DOM操作やAjax通信系のライブラリは、

習得コストを考えると、利用者が圧倒的に多い

jQueryを選ぶのがベストだと思います。

ただ、jQueryは30KBというファイルサイズが難点で、

一方でZeptoはモダンブラウザに特化しているため、

わずか10KB程度しかありません。（※ともに圧縮＆gzip時）

jQueryと比べて、いくつかの機能が使えませんが、

主要機能のほとんどは使用可能であったため、

ブレガーでは、jQueryではなくZeptoを選びました。

ただ、jQueryはドンドン軽量化されていますし、

jqMobiのような新たな対抗馬もいるので、

今後はZepto以外のライブラリを選ぶかもしれません。

https://github.com/BorisMoore/jsrender

JavaScriptで扱えるテンプレートエンジン。

Ajaxで受け取ったデータを元にHTMLを書き換える際に、

直接DOM操作をすると非常に面倒ですが、ブレガーでは

JsRenderを用いて、テンプレートからHTMLを生成しています。

テンプレート化によって分業化しやすくなるので、

開発スピードが一気に速くなりました。

ドキュメントが少ないのが欠点ですが、

ヘルパー関数やカスタムタグが作れたりと高機能で

処理速度もほとんど気にならないほど速いです。

他のテンプレートエンジンと比べて、

記法が直感的で分かりやすいのもいいですね。

http://www.createjs.com/#!/CreateJS

Canvas描画・アニメーションライブラリ。

Canvasでの図形描画や画像読み込み、

アニメーションなどをより直感的に書けます。

特にActionScriptの経験がある人には

馴染みやすい記法だと思います。

ブレガーでは、Flashで作ったアニメーションを

JavaScriptに書き出すことができる、

「Toolkit for CreateJS」を利用しています。

http://lodash.com/

JavaScriptユーティリティライブラリ。

JavaScriptの配列やオブジェクトの複雑な操作を

すっきりシンプルに書けるライブラリ。

かゆいところに手が届く便利なメソッドが

数多く実装されていて、一度使ったら手放せません。

Underscore.jsと記法はほぼ同じですが、

こちらのほうが高機能かつ高速です。

JavaScriptMVCフレームワーク。

JavaScriptのMVCフレームワークは

いくつか存在しますが、Backbone.jsは

比較的ファイルサイズが軽く、

利用者が多いので情報も充実してます。

Observerパターンで書きやすくなり、

機能追加や修正のスピードが上がるので

個人的にはとても重宝しています。

「MVC」と書きましたが、Controllerがなく、

一般的なMVCとは概念的に異なるのでご注意を。

http://requirejs.org/

モジュール管理および最適化ライブラリ。

各JavaScriptファイルの依存関係を

一元的に管理することができ、ビルド時には

複数ファイルの結合（単一ファイル化）や

コードの圧縮もしてくれるスグレモノです。

ブレガーのような、多数のJavaScriptファイルが

複雑に絡み合う大規模プロジェクトでは、

RequireJSの恩恵を大いに受けられます。

逆にファイル数の少ないプロジェクトの場合は、

わざわざ使う必要はないかもしれません。

http://pivotal.github.io/jasmine/

JavaScriptテストフレームワーク。

JSのロジックや通信のテストを

自動化したいときに非常に有用です。

Jasmine単体よりもSinon.JSと併用するほうが

いろいろと便利で書きやすいです。

仕様変更頻度の高いソーシャルゲームにおいて

全機能のテストコードを書くのは、

工数的に難しく、現実的ではありません。

いまのところブレガーでは、

共通基盤のみテストを自動化しています。

今回はブレガーで使用しているライブラリを

いくつかご紹介しました。

スマホにしては多いのではないか？

と感じる方もいらっしゃるかもしれませんが、

私がライブラリを使うのには以下のような理由があります。

（1） 車輪の再発明をしなくて済むため工数短縮になる

（2） コードがちゃんとテストされているため安全

（3） コードの記法が統一されるため複数人で開発しやすい

（4） 既にdocumentがあるためコードの解説が不要

しかし、ライブラリを使うことが絶対に正しいとは限りません。

特にスマホの劣悪な通信環境では、

ファイルサイズを出来る限りミニマムに抑えなければ、

ユーザーが離脱する原因となってしまいます。

便利だからといって、大容量のライブラリを

バンバン使って操作性を悪化させては本末転倒です。

ブレガーでも、出来る限り軽量なライブラリを選び、

ライブラリを使わずに実装したほうが良いところは

自前で実装していきました。

大事なのは、ライブラリを使うことではなく、

ユーザーがストレスなく思いっきり楽しめるサービスを

いかに「速く」「安全に」創ることができるか。

これに尽きると思います。

最後までお読みいただき、ありがとうございました。

今回ご紹介した内容が、皆さんのサービス開発に

少しでもお役に立つことができれば嬉しいです。