馬とテニスのIT革命
馬とテニスとリラックマが好きな IT 系のエンジニアです。
JavaScript

Backbone.jsの動作環境をセットアップする

サーバサイドのプログラムやサーバインフラをメインに担当していた私としては、JavaScript はちょっとしたエレメントの操作や、Ajax を使った非同期プログラムでしか活用する場はありませんでした。

Backbone.js や AngularJS、Knockout.js などの、JS フレームワークがあるよと数年前に聞かされていましたが、フロントエンドでそこまでするの?っと興味はありませんでした。

そんな中、手伝っていたプロジェクトで、Backbone.js のような JS のオリジナルフレームワークを使っていて、しかもそのフレームワークを作った人が既に退職してしまっているとのこと。

ソースを見ていても特殊だし、html のタグの id 属性などが JS の発火条件になっているなど、すごくカルチャーショックを受けたのを覚えています。

JSフレームワークとの再会

そして 1 年振りに、また JS フレームワークを触る機会が出てきたので、少しくらいは JS に興味を持って Backbone.js や Marionette.js、Underscore.js などの基本構成や TIPS などをまとめていきたいと思います。

Backbone.jsの基本概念

Backbone.js の基本概念として覚えておきたいのは、Backbone.Model、Backbone.View、Backbone.Router、Backbone.Collection の 4 つ。

Model(モデル)と Collection(コレクション)は密接な関係にあり、Collection は Model のグループで、Model は 1 つのオブジェクトに該当する。

View(ビュー)はその名の通りといきたいところですが、実際のレンダリングは html で処理されるので、ここで言う View は Model の情報を html として伝える部分の担当となる。

Router(ルーター)は、URL を機能にマッピングするだけになるが、若干コントローラ的な役割に近い。

しかし View もコントローラ的な役割を担う部分もあるので、明確にコントローラがどこに該当するかは曖昧。

実際にブラウザの画面を見たり操作したりするユーザーにとっては、相手が html になり、その html の中のイベントが呼び出されると、Backbone.View に処理が移譲され、View が Backbone.Model とデータのやりとりをして、最後にユーザーのブラウザ画面を書き換える。

この辺は、実際にプログラムを書いて動作させた方がわかりやすいですが、ざっくりとしたイメージはこんな感じ。

ユーザー
⇒ html(イベント発生)
⇒ Backbone.View(更新)
⇒ Backbone.Model(処理)

Backbone.Model(通知)
⇒ Backbone.View(更新)
⇒ html

Backbone.jsの動作環境

Backbone.js の構成を眺めているよりも実際にローカル環境で動かしてみた方が早いので、まずは index.html を作って JS を読み込ませてしまいましょう。

最近は、CDN 環境(AmazonS3やCloudFlareなど)や公式プロジェクトの開発 Web サイト上の JS を参照することも多いので、両方のパターンを書き残しておきたいと思います。

まず、Backbone.js は Underscore.js に依存するので両方が必要です。

また、Backbone.View を利用するには DOM 操作ライブラリ(jQueryやZeptoなど)が別途必要になるので、私は慣れている jQuery を採用します。

公式サイトからダウンロード

では、まず各 JS ライブラリのダウンロードからです。

Backbone.js の 2015 年 2 月 8 日現在の最新バージョンは 1.1.2、Underscore.js は 1.7.0 です。

ローカル環境ですし、どちらも Development バージョンを使いたいと思います。

なお、今回の Backbone.js の最新版を利用する場合は Underscore.js の 1.5.0 以上が必要と公式サイトに書かれていますが、今回は要件を満たしているので大丈夫そう。

jQuery は IE8 までのサポートをどうするかで 1 系か 2 系か迷うところですが、PC 向けのサイトを開発する場合は 1 系がいいでしょうね。

早く IE8 以下を切り捨てたいですが、一般ユーザー向けのサイトを構築している場合はなかなか簡単にはできないですよね。

まだまだ IE8 以下のシェアは少なからずありますし。

なので、ここでは jQuery の 1 系の最新版である 1.11.2 を使います。

サンプルプログラム作成

実際に index.html を作ってみます。

ちなみに、これらのライブラリは head タグ内で読み込むものだと思っていたのですが、入門書籍を読んだ限りでは、ページのレンダリングがスクリプトにブロックされる前に実行されるように一般的に使われている手法のようです。

また、各 JS ライブラリの読み込み順にも気を付ける必要があり、Backbone.js が依存する jQuery と Underscore.js は先に読み込ませておく必要があります。

では、index.html を作ったらブラウザで表示させてみます。

結果は html の内容通り「test!!」とダイアログに表示されます。

まあ、このサンプルは Backbone などの機能は使っていませんが、モジュールの読み込み確認に最適です。

<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>

<script>
    alert("test!!");
</script>

各 JS ライブラリの CDN は以下になるようです。

jQuery は ajax.googleapis.com などでも提供されていますが、どこがベストなのかは分かりませんが公式サイトの方がいいでしょうね。

ちなみに、CDN 上のファイル取得ができなかった場合に、自分のサーバ上の JS で補うようにしておくと安心です。

以下では jQuery だけその対策を入れてみました。

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.11.2.min.js"><\/script>');
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
Web API The Good Parts

オライリーの「Web API」に特化した本です。最近の多くの Web サービスは API が活用されていますが、その技術はこれまでの Web サイトとそれほど大きく変わりません。

今後、マイクロサービス化が進む中で知っておいて損はない内容が詰め込まれており、現場のエンジニアやこれから Web 系のエンジニアを目指す人にもオススメの一冊です。

created by Rinker
¥2,376
(2018/10/15 13:40:38時点 Amazon調べ-詳細)

あなたにオススメ