Backbone.jsの勉強ログ #1

studying-951818_1280
LINEで送る
Share on GREE
Share on LinkedIn

JSフレームワークを覚えていくと、JSのスキルは必然的に向上します。
他人のスクリプトなどを簡単に見ることができ、動作確認も簡単にできるJavascript言語ですが、柔軟な言語であるために、書き方も人によってさまざまです。
ECMAScriptのバージョンが上がってきて、オブジェクト思考やらMVCやら非常に思考性の高いプログラム言語になってきた反面、これが鉄板という書き方が1年単位で変わってきている事実もあります。
ライブラリもフレームワークも日々新しいものが出てきたりバージョンアップを繰り返すことで、一番進化の早い言語であると言ってもいいでしょう。

仕事だけでなく意図的に人のソースコードやライブラリに触れる事も重要という事で今回は「Backbone.js」です。

各種リンク

Backbone.jsの本家ページ

https://github.com/jashkenas/backbone/

dotinastall

Backbone.js入門

まとめてくれてるサイト

Backbone.js とは

ググれば大量に出てくるので、WEBで勉強するのは非常に容易いでしょう。

環境構築

プロジェクトファイルをGITでclone

cloneされたフォルダはこんな感じ
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-18-31-34

ただ、必要なファイルは下記の3つなので、別にフォルダを作ってそこにコピーしておきましょう。

backbone.js
jquery.js
underscore.js

次に必要なのはindex.htmlだけです。
ソースは以下の通り

※app.jsは、今回のサンプルプログラムを作るソースになるので、空ファイルを作成しておきましょう。

Backbone.jsの起動

Modelの作成

モデルの作成方法は以下のソースで確認できます。

実行結果は以下のとおりです。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-18-51-47

解説

new宣言の時にoptionを指定すれば、JSコンソール内の「attribute」内に繁栄されます。
ただし、Backbone関数の呼び出し時に「default」をセットしている場合は、new宣言時の指定を削除することもできます。
さらに、task1に対して「toJSON()」という関数を実行すると、不要なデータは無しでattributeのみのデータ構造になります。

※エラーなどが出た場合は、ソースを見直しましょう。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*