「試して学ぶ Backbone.js 入門」を試してみた

今日は少し時間が捻出できたので,はてブの [*あとで読む] に溜まってた Backbone.js のエントリーを試してみた.

実際に試してみると,エントリーの記載内容に少し不足してるところがあって,フォローがないと初学者では読み進めていけない気がしたので,個人的に気になった部分をピックアップして補足してみたいと思う.全般的に素晴らしいエントリーで,とても勉強になりました(※まだ全5回終わってないけどw).

試して学ぶ Backbone.js 入門のまとめ - Taste of Tech Topics
試して学ぶ Backbone.js入門 | JavaScript | Developers AppKitBox
試して学ぶ Backbone.js入門2 | JavaScript | Developers AppKitBox
試して学ぶ Backbone.js入門3_Developers AppKitBox | JavaScript | Developers AppKitBox
試して学ぶ Backbone.js入門4_Developers AppKitBox | JavaScript | Developers AppKitBox
試して学ぶ Backbone.js入門5_Developers AppKitBox | JavaScript | Developers AppKitBox

試して学ぶ Backbone.js 入門1

環境構築のところ

はじめに Backbone.js と依存するライブラリ群などをダウンロードして,環境構築すると書いてあるけど,GitHub でプロジェクト全体が公開されてるので,muraken720/bb-crud を git clone してしまえば良い.入門1だけなら自分で構築しても変わらないけど,どちらにしろ入門2では必要になるので,あらかじめこの段階で取り込んでおく.あとは index.html を Chrome で開いて,デベロッパーツールを起動すればOK(僕は Chrome で試してます).

$ git clone git@github.com:muraken720/bb-crud.git
$ open bb-crud/public/index.html 

typoあり

次に Backbone.js で Model を継承するところのコードに1つ typo があった.defaults オブジェクトの name キーのデフォルト値をブランク文字列にするという意味なので,ダブルクォーテーションの閉じ忘れを以下のように直してあげる.

defaults: {
    "name": "",
    "age": 0,
    "updateTime": new Date()
},

ちなみに,コードをコピペして実行するのであれば,複数行ガッとコピペして実行してしまえば良いけど,もし1行ずつ入力して勉強したいのであれば,Chrome のコンソールで Alt + Enter を使うと改行できるので,これで複数行の入力できるようになるはず.

試して学ぶ Backbone.js 入門2

Node.js+MongoDB のサンプルアプリ?

エントリーの冒頭でいきなり補足が出てきて,Node.js+MongoDB のサンプルアプリをローカルで実行できる前提で進めます,みたいに書かれている.ただ恐らくこの記事で学ぶ人の中には初学者も多いだろうし,Node.js+MongoDB って言われてもわからない人もいるだろうし,ここで挫折してページを離脱する人がいると思う.

ということで,環境構築の方法はいろいろあると思うけど,Mac上でこのサンプルアプリを起動するまでの手順をまとめておく.

  • Node.js + Express をインストールする
$ brew install node
$ sudo npm install -g express
$ npm install -d
  • MongoDB をインストールする
$ brew install mongodb
$ ln -sfv /usr/local/opt/mongodb/*.plist ~/Library/LaunchAgents
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist
  • サンプルアプリを起動する
$ node bb-crud/server.js
Express server listening on port 3000 in development mode
  • サンプルアプリにアクセスする

http://localhost:3000/ にアクセスして,ページが表示されれば,問題なし.コンソールの方で,HTTPリクエストのログが出てるはず.入門2は,この URL で試すことが前提になってるので,入門1 のまま index.html で試していると,エラーになる.

typoあり

まぁラベルの typo だし実行には問題ないけど,結構気になったので書いておくと,BefroeBeforetypo です.

console.log("Before fetch memo: " + JSON.stringify(memo));

試して学ぶ Backbone.js 入門3 以降

まだ試してないので後日更新する!