JSフレームワークを覚えていくと、JSのスキルは必然的に向上します。
他人のスクリプトなどを簡単に見ることができ、動作確認も簡単にできるJavascript言語ですが、柔軟な言語であるために、書き方も人によってさまざまです。
ECMAScriptのバージョンが上がってきて、オブジェクト思考やらMVCやら非常に思考性の高いプログラム言語になってきた反面、これが鉄板という書き方が1年単位で変わってきている事実もあります。
ライブラリもフレームワークも日々新しいものが出てきたりバージョンアップを繰り返すことで、一番進化の早い言語であると言ってもいいでしょう。
仕事だけでなく意図的に人のソースコードやライブラリに触れる事も重要という事で今回は「Backbone.js」です。
各種リンク
Backbone.jsの本家ページ
https://github.com/jashkenas/backbone/
dotinastall
Backbone.js入門
まとめてくれてるサイト
Backbone.js とは
ググれば大量に出てくるので、WEBで勉強するのは非常に容易いでしょう。
環境構築
プロジェクトファイルをGITでclone
$ git clone https://github.com/jashkenas/backbone.git
Cloning into 'backbone'...
remote: Counting objects: 11758, done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 11758 (delta 0), reused 0 (delta 0), pack-reused 11754
Receiving objects: 100% (11758/11758), 25.73 MiB | 1.03 MiB/s, done.
Resolving deltas: 100% (7680/7680), done.
Checking connectivity... done.
cloneされたフォルダはこんな感じ
ただ、必要なファイルは下記の３つなので、別にフォルダを作ってそこにコピーしておきましょう。
backbone.js
jquery.js
underscore.js
次に必要なのはindex.htmlだけです。
ソースは以下の通り
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Backbone.js</title>
</head>
<body>
<script src="js/underscore.js"></script>
<script src="js/jquery.js"></script>
<script src="js/backbone.js"></script>
<script src="js/app.js"></script>
</body>
</html>
※app.jsは、今回のサンプルプログラムを作るソースになるので、空ファイルを作成しておきましょう。
Backbone.jsの起動
Modelの作成
モデルの作成方法は以下のソースで確認できます。
(function(){
// Model
var Task = Backbone.Model.extend({
default:{
title : "do something!",
completed : false
}
});
var task1 = new Task({
title : "do it!",
completed : true
});
console.log(task1);
})();
実行結果は以下のとおりです。
解説
new宣言の時にoptionを指定すれば、JSコンソール内の「attribute」内に繁栄されます。
ただし、Backbone関数の呼び出し時に「default」をセットしている場合は、new宣言時の指定を削除することもできます。
さらに、task1に対して「toJSON()」という関数を実行すると、不要なデータは無しでattributeのみのデータ構造になります。
## 変更点のみ・・・
console.log(task1.toJSON());
## 結果
Object {title: "do it!", completed: true}
completed:true
title:"do it!"
__proto__:Object
※エラーなどが出た場合は、ソースを見直しましょう。
