最近、JavaScriptを多用するWebアプリケーションの開発に携わる機会が増えてきました。
jQueryのイベントハンドラをベタに書いていくのは、規模が小さいうちは良いのですが、機能追加・仕様変更等が多発すると少々面倒なことになります。このまま大きくなっていくと破綻が目に見えているので、構造化されたアプリケーションを作りたいと思いBackbone.jsを学び始めました。
Backbone.js 公式サイト

7月上旬から学び始めたので、まだ20日程度ですが、その中で学んだこと等を紹介します。これから勉強を始めてみようと思う人の参考になれば、幸いです。
以下の内容は、Backbone.jsの熟練者が指南しているわけではないことを予めご了承ください。ちなみに、平日の夜と、時間が取れるときの週末を使って勉強して、イベントサービスのWebAPIを串刺し検索するアプリ等を作るくらいには、Backbone.jsを使えるようになりました。

このドキュメントは、2013年7月25日に行われた第20回 HTML5+α @福岡の発表資料でもあります。

Backbone.js 初学者の為のロードマップ

事前にあると望ましい知識

Backbone.jsに興味を持たれる方は、冒頭に記載した私と似たような状況だと思うので大丈夫だと思いますが、以下のようなある程度の事前知識・経験が必要です。

• jQuery or Zepto
• Underscore.js
• Webアプリケーションフレームワーク

Underscore.jsは、便利な関数がパッケージされたJavaScriptのライブラリで、Backbone.jsの内部でも利用されているものです。すべての関数が頭の中に入っている必要はありませんが、Backbone.jsを使わないにしても、覚えておいて損はないライブラリなので、ぜひこの機会に利用してみましょう。
Underscore.js 公式サイト
Underscore.js入門 (全10回) – dotinstall

Webアプリケーションフレームワークの経験については、なくても支障はないかもしれませんが、Model, View等の概念を知っておかないとツライと思います。

5つのステップ

いくつかの書籍やブログに目を通し、実際に手を動かした中で、個人的に参考になったものをピックアップし、これから勉強を始めてみようと思う人がスムースに学べるよう、以下の5つのステップを考えてみました。

• STEP 1 [知る] – Backbone.js 公式サイト
• STEP 2 [視聴して学ぶ] – dotinstall | Backbone.js入門 (全22回)
• STEP 3 [読解して学ぶ] – ToDoサンプルを読み解く
• STEP 4 [書いて学ぶ] – SPA-with-Backbone
• STEP 5 [身につける] – Backbone.jsガイドブック

それでは早速みていきましょう。

続きを読む