まずFrontrend（フロントレンド）とは？

サイバーエージェントが主催するフロントエンド系技術セミナーです。 HTML5/CSS3やJavaScriptのトレンドやノウハウ等を惜しみなくお伝えします。

• http://atnd.org/events/35720

前々から行きたいなーと思っていたけど予定が合わずなかなか行けずじまいだったけど、今回はちょうど仕事でBackbone.jsを使用していることもあり、Ahomuさんの「jQuery to Backbone – アーキテクチャを意識したJavaScript入門」を目当てに初めて参加させて頂いた。

というわけで他のセッションも最高によかったけど自分的には「jQuery to Backbone – アーキテクチャを意識したJavaScript入門」に的を絞ってまとめておこうかと。

まずはjQueryを振り返る

1. DOM APIを隠蔽して簡潔に記述出来る。Pure JavaScriptだと煩雑な書式もjQueryだと直感的。
2. Cross Browserの諸問題も解決してくれている。
3. Pluginが豊富。

もちろんPure JavaScriptの方がネイティブで高速だけど使いどころとjQueryが裏で何をやってるかが理解出来ていればjQueryはやっぱり便利。

フロントエンド実装の変遷

WEBサイト

エフェクトといえばロールオーバーやスライドショー、ツールチップくらいのサイト。

従来のWEBサービス、WEBアプリ

ちょっとしたUIが連携しあう上記よりちょっとリッチなサイト。

最新のWEBサービス、WEBアプリ

シングルページでリッチな表現、シームレスなUIでバックエンドとの連携が必須なサイト。

おおまかに上記みたいな変遷。自分だけでなくフロントエンド実装に関わる人みんなが感じてるところなのかな。大体2まではjQueryのプラグインを作ってカスタムイベントで連携とかでなんとかなる、というかしてきた。ただ3については規模にもよるけどプラグインの連携という考え方だともはや限界がある。

そこでMV*なJavaScript

まあMV*とかの理解ってのはガチなプラグラマの人だったりでないとよく分からんと思う。昨今議論されているのを遠目に見てきて下手に勉強（独学）していいのかどうかも迷った。ME上がりでjQueryからJavaScript弄り始めて2、3年の自分なんてなんとなーくというか殆どよく分かってないし。ところが「今回はMV*についてのこの辺りの議論は一旦忘れましょう」とMV*初心者にとって心強く有り難いお言葉があったので心のなかで百万回イイねした。

Backbone.jsを使ってみましょう

意外だったのはMVCフレームワークと思ってたけどオフィシャルにはMVCフレームワークとは謳ってないらしい。ならあんまりMVCにこだわり過ぎず、方法の一つとしてBackbone.jsを柔軟に導入してみましょうと。

その前にデザインパターンも知っておいて損はない

セッションではFacade、Singleton/Flyweight、Observer/Mediatorの簡単な説明があった。デザインパターンはオライリーのJavaScriptパターン辺り読めば結構理解できるし知らず知らずやってたりするけどデザインパターン理解出来てるとそれだけでも結構構造化出来る。

jQuery to Backbone

Backbone.jsが提供するMVCとは。

View - 見た目とUIにおける入出力、DOM要素の管理、ユーザー操作（イベント）制御 Model - 取り扱うデータの1単位、ストレージとの通信・同期、APIや情報のレコードを表現 Collection - Modelが集合したリスト、リスト操作、Modelと同様の通信・同期 Router - URLによるルーティング、hashchange、pushstate、遷移処理のnavigate

Backbone.jsを実際に使う

実際のjQueryで書かれたスクリプトをBackbone.jsを使って構造化していくデモを元に話が進められたんだけどこのデモがもう最高に分かりやすかった。これはお金払ってでも知りたかった、確認したかった点なので自分的には大満足。後日資料が公開されるとの事で心待ちにしております。

Backbone.jsで自然とTestableなJavaScriptに

Backbone.jsを使ってコンポーネントで分割すると構造化され、結果的に前セッション「Testable JavaScript – テストしやすいJavaScriptとテストについて」へとつながると。

Backbone with jQuery

toではなくwith。これ名言だと思う。変にMV*を意識し過ぎたり、jQueryを完全な悪と捉えて排除するんじゃなくて、両者の良い面を適材適所で使っていきましょうと。

まとめ

というわけでこのセクション、期待以上に分かりやすくてBackbone.jsの取っ掛かりとしてはとても良い機会と理解になったかと。素晴らしい機会を与えてくださったCyberAgent様に感謝感謝。

ちなみに

案件でもBackbone.js使っているので気づいたところをメモ。

• _.bindAll(this);で関数が正しい有効範囲で動作することを保証。
• 複数のViewでイベントを監視したい時にBackbone.Eventsを継承したメディエーター作っといてそこで仲介させるやり方がいいなあと思った。
• Backbone.emulateJSONはサーバーでJSONが使えない時にtrueにする。
• Backbone.emulateHTTPはRESTなAPIで通信出来ない場合（CREATE、READ、UPDATE、DELETEが使用できない）にtrueにするとPUT、DELETEをPOSTで通信するようにしてくれる。