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

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

記事一覧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 を使います。

Backbone.js
Underscore.js
jQuery

サンプルプログラム作成

実際に 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>

参考カテゴリ

オススメ記事

最新の投稿やよく見られているのオススメ記事一覧です。

標準出力と標準エラー出力をパイプに渡す

よく、標準出力先をファイルにリダイレクトすることはありますが、意外に標準エラー出力は使う機会がありません。しかし、やはりツールやパッケージ製品になると標準エラー出力も活用されているようです。でも、...

Linux(FreeBSD)

>>記事を確認する

主要無料ブログ5つに対する自動投稿PHPプログラム

アメブロへ楽天APIなどの情報を自動で投稿する の反響が良かったので、どうせならアメブロ以外の無料ブログの XML-RPC を使った自動投稿も紹介したいと思います。これには FC2BlogManager.php というライブ...

PHP

>>記事を確認する

snmpでデバイスの情報を取得

snmpでデバイスの情報を取得するコマンドです。これを元に、ディスクIOなどのMIB値を探します。 $ snmpwalk -v 2c -c {SNMPGROUPNAME} localhost 1.3.6.1.4.1.2021.13.15.1.1.2 (結果の一部) UCD-DIS...

Linux(FreeBSD)

>>記事を確認する

awkで指定したカラム以降をprint表示する

前回、awk で最後のカラム以外を表示してみましたが、今回は指定したカラム以降のカラムを全部表示したいと思います。 例えば、7 個の文字列がカンマで区切られているファイルがあるとしたら、3 番目のカラム...

awk / シェル

>>記事を確認する

CentOSでRedisサーバを使う

冗長化した Web サーバなどで、セッションの管理や、セッションや特定のユーザーに紐付く一時データを管理するのに memcache を使う場面は多いと思います。 その memcache の中でも主流なのが memcached です...

Linux(FreeBSD) / CentOS / Redis

>>記事を確認する

ドメイン取るなら低価格で楽々管理

バリュードメインは、GMO デジロック社の低価格ドメイン総合サービスです。

このサイト含め、私もこれまでに 100 個以上のドメインを取得して管理してきましたが、WHOIS の代理公開も可能なので、無料 SSL 証明書の Let's Encrypt と組み合わせれば、かなりの低価格で SSL サイトも運営できます。

年単位で領収証発行もしてくれるので、たくさんサイトを抱えているアフィリエイターや個人事業主にもオススメです。

AWSの無料利用枠内で複数サイトをサクサクと運営する方法

MySQLでテーブル定義を取得

似たような構成のテーブルを作る時に、今までは mysqldump コマンドで -d オプションを付けて実行していました。 これでも十分に要件は満たせるのですが、MySQL のコンソールからサクっと出したい場合もある...

データベース / MySQL

>>記事を確認する

Poderosa5の登場と文字色と背景色

新しい PC を購入したので、久し振りに Poderosa のインストールをしたのですが、Poderosa-Terminal として最新バージョンの 5 が 2016 年に登場していました。 これ、職場でもインストールしてみたのですが...

Windows / ツール

>>記事を確認する

Laravel5.1からLaravel5.5へアップデートする

LTS だった Laravel5.1 のバグフィックスサポートが 2017 年の 6 月で終わり、セキュリティサポートも 2018 年の 6 月で終了となります。 このタイミングで、兼ねてから発表のあった、次期 LTS の Laravel5.5...

PHP / PHPフレームワーク / Laravel

>>記事を確認する

VagrantでCentOS6.9のイメージを使う

CentOS7 が既に 7.3 まで出ていますが、AmazonLinux がまだ 6 の構成と似ていることから、なかなか 7 系に移行できません。 そこで、Vagrant のイメージも 6 系の最新版を使うと思ったのですが、下記の BOX ...

Linux(FreeBSD) / CentOS / Vagrant

>>記事を確認する