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>

参考カテゴリ

オススメ記事

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

AmazonLinuxでEC2起動時にスワップ領域の割り当てに失敗

EC2 起動時のスワップ領域割り当てですが、これまでは以下の記事を参考に、/etc/rc.local を使って行っていました。 ・ Amazon EC2(Linux)のswap領域ベストプラクティス しかし、最近になって、EC2 イン...

>>記事を確認する

【5分でできる】Laravel5.4から5.5へバージョンアップ

Laravel5.5 がついにリリースされたので、5.4 ベースで作っていたものをバージョンアップしてみました。 composer.json の以下の部分を 5.5.* に変更するだけですが、依存関係のパッケージも問題なくアップデ...

>>記事を確認する

【30分でできる】AWSのEC2にgoofysを入れてS3をマウント

過去に携わったプロジェクトで、S3FS の通信状態が悪い時があるので、アプリ側のプログラムを AWS SDK を使ったものに置き換えていこうという施策がありました。 S3FS の導入には関わっていなかったので、導...

>>記事を確認する

【30分でできる】ぐるなびAPIで飲食店の店舗情報取得

過去に作成した「ぐるなびAPI」のプログラムや、ぐるなびの Web Service が新しくなったこともあり、API からの情報取得プログラムを書き換えてみました。 以前の記事は下記になります。 ・ ぐるなびAPIで...

>>記事を確認する

NginxのFastCGIキャッシュで白い画面がキャッシュされる

以前から、トップページにアクセスすると、レスポンスステータスは 200 で返ってくるのに、画面に何も表示されない現象が稀に見受けられたので調査してみました。 さすがに機会損失にも繋がるということで、...

>>記事を確認する

Laravel5.4の認証ユーザーのパスワードハッシュについて

Laravel で用意されている認証モジュールを利用する際、ユーザーモデル(User.php)経由で登録されるパスワードのハッシュ方法について調べてみました。 Laravel 上ではパスワード文字列を bcrypt() のヘルパー...

>>記事を確認する

Laravel5.4のコントローラコンストラクタでAuth::user()が取得できない

Laravel5.4 で認証を通したアクセスに対して、コントローラのコンストラクタでユーザモデルの値を取得しようと思ったら、なぜか Auth::user() の値が取得できなくて悩みました。 public function __construc...

>>記事を確認する

NginxのHSTS(HTTP Strict-Transport-Security)の設定

「Let's Encrypt」のおかげで、全サイト SSL 化していますが、これまで nginx の設定では、http のアクセスがあった場合に https に 301 リダイレクトさせていました。 この場合、Googlebot に http のアク...

>>記事を確認する

GoogleMapのAPIキーの認証情報にリファラURL設定

昔は API キーを指定することで、JavaScript で GoogleMap が表示できていましたが、何年か前に、そのキーに対して認証情報の追加が推奨されました。 新規で発行する場合は必須になっているかもしれませんが...

>>記事を確認する

【30分でできる】AmazonLinuxでApache2.4+php7.1+Laravel5.5

先日、「 VagrantでCentOS6.9のイメージを使う 」の通り、CentOS6.9 には Apache2.4 と PHP7.1 で Laravel のフレームワークが使える環境を構築しました。 ただ、将来的には AWS かつ Amazon Linux 上で動か...

>>記事を確認する