Backbone.js とは JavaScriptフレームワークです。 http://backbonejs.org/ Backboneをはじめて利用するにあたってハマったポイントと対策に JSフレームワークについての感想を簡単に書いてみました。 ハマってみるのも醍醐味かもしれませんが、時間の無駄とも言わざる得ないので 同じように困った方のためになればいいなぁ、と自戒を込めて記録しようと思います。 ちなみにエラーメッセージはちゃんと出るんですが、どこで起きてるエラーなのか 突き止めるのに時間が掛かったりします。 エラーメッセージに慣れてくると「あ、これ見たことあるエラーだ」とハマる時間も減ります。 ◯エラーメッセージと対策 ※開発中はChromeでも確認していたので、Chromeのエラーメッセージとなります。 ※凡ミスだらけですが、ご了承ください。 ・Uncaught TypeError:

Web サービスにリッチな UI を実装したいけど、jQuery だけだとコードがスパゲッティになりそうなので、JavaScript の MVC フレームワークを使うことにしました。候補は Backbone.js と Knockout.js の2つ。どちらも最近はてブで注目を浴びましたね。 Backbone.js はあの 37signals がモバイル版 Basecamp で使った実績があります。一方、Knockout.js は .NET 開発者にはおなじみ(?) の MVVM パターンで開発できるといいます。どちらを使おうか迷いましたが、「依存している underscore.js が便利そう」というズレた理由で、今回は Backbone.js を選択。 手を動かさないと覚えない人間なので、サンプルを作ることにしました。作るのは TODO アプリ。サンプルの題材としては定番ですね。Back

Backbone使ってみるメモ。まだあんまりよくわかってないんだなー。 よくわからないならコードを読めばいいじゃない、という事で、公式で提供されているTodoアプリのコードを読んでみました。 ソース 公式のサンプル。 Backbone.js Todos todos.js いわゆるTodo管理ツールなんだけど、情報をHTML5のLocalStorageに持つようになっている。つまりブラウザを閉じても内容を記憶している。 JSファイル HTMLから読み込んでいるのは以下。 json2.js jquery-1.7.1.js underscore-1.3.1.js backbone.js backbone-localstorage.js todos.js Backbone.jsはUnderscore.jsとjQueryないしZepto.jsが必須。またLocalStorageを使うためのBackb

クライアントサイドMVCフレームワークをもっと勉強したい。 今僕は#Favtileというサービスを作っています。 Twitterのお気に入り機能のためのツールです。 そこではクライアントサイド・サーバーサイド共にCoffeeScriptで書いており、Spine.jsを使っています。 Spine.jsを使いはじめた理由? CoffeeScriptが好きだからです。Spine.jsはCoffeeScriptで書かれていますから。 でも他にもJavaScriptのMVCフレームワークはいっぱいあります。 有名だと思うのでBackbone.jsをやります。 有名だと情報が多いので無名のフレームワークよりも勉強しやすいという考えです。 Backbone.jsのサンプルのTodoアプリを読みながらドキュメントを引いて調べていきます。 http://documentcloud.github.com/ba

Backbone.js Advent Calendar 4日目 参加はこちらから! http://atnd.org/events/22017 Backbone.jsはunderscore.jsというものに(唯一)依存しており，利用する場合はunderscore.jsもロードしてやらなければなりません． ではこのunderscore.jsとは何なのかというと，配列操作やオブジェクト処理に便利な関数群を提供するライブラリです．ざっくり言うと配列や連想配列などがRubyっぽい形で操作できるようになります． 使い方 underscore.jsはロードすると_を定義します．使い方は以下の2通りです． _を関数として利用する 例: _.each(array, function(element) { ... }); オブジェクト指向的につかい，対象オブジェクトをラップしてメソッドを利用する 例: _(a

閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） Backbone.js入門の最終回は Router と History です。 Backbone.js入門 「MVC」で述べたように、URL が変更された時に発生する popstate または hashchange イベントを監視してルーチンを起動するのが Router の役目です。History は Router の裏方で頑張る実体で、直接操作することはほとんどありません。 URL が変更された時にアクセスされるのが Router なので、Rails 的な MVC の枠組みで言えばコントローラと言えますし、伝統的な MVC で言えば全てのアンカーとブラウザの進退ボタンを

閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） Backbone.js入門シリーズも佳境に差し掛かってきました。 View と Model の連携は既に取り上げたので、今回は特に Collection と View Model との連携に主眼を当てて記述したいと思います。 View と Collection の連携 復習の意味も込めて、View と Model の連携方法をもう一度記述すると、大枠として次のようになります。 // モデルの定義 Hoge = Backbone.Model.extend({}); // ビューの定義 HogeView = Backbone.View.extend({ events: { "

閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） 今回は Collection です。 特に難しいことはなくて、複数の Model を扱うためのオブジェクトです。間違っても MVC の C ではないです。 基本的な使い方 真新しさは特にありません。強いていうなら、model に何モデルの集まりを表すものかを指定するくらいです。 var Blog = Backbone.Model.extend({}); var BlogList = Backbone.Collection.extend({ model: Blog });

閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） 今日のテーマは View と Model の連携です。 基本的なパターン 例えばブログサービスを作っているとします。 おそらく Blog というモデルや、それを表示するページのビューを作ることになると思いますが、記事の全文を表示するビューや複数の記事をリスト形式で表示するビュー、編集ビューなどなど、一つのモデルに対して複数のビューが存在するのが一般的ではないでしょうか。 このように View と Model は基本的に 多対一 の関係になっています。 そのため、Model の属性が変更されたら、複数の View に変更を通知・反映しなければなりません（でなければユーザはシ

閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。例えばこの記事の内容でいうと、validateに失敗したときに発生するイベントは'error'から'invalid'に変更されています。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） 今日のテーマは Model です。 MVC に関する回で Backbone.js における MVC は Rails などの WAF における MVC よりは伝統的な MVC に近い というようなことを書きました。 しかしながら、モデルに関して言えばどちらの場合も大差ありませんから、気分が楽です。 Rails におけるモデルである ActiveRecord が OR マッパーとしての役割を持っていたり、データのバリデーション機能を持っていた

閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。例えばこの記事の内容でいえば、$elプロパティなどが追加されています。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） Backbone.js Advent Calendar もようやく折り返し地点。 そんな節目のエントリで取り上げるのが Backbone.js プログラミングでの最重要登場人物の一人である View です。 前回のエントリで Backbone.js では View が各種の処理を起動するということを説明しました。 今回は View を使って、イベントハンドリングを行う方法について主に解説していこうと思います。 View と DOM tree View の役割は大きく分けて2つあります。 特定の DOM

閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） 予定では View の日ですが、当初の予定を変更して、今回は Backbone.js における MVC について解説したいと思います。 なお、今回の内容は、私の認識方法の紹介であり、異なる考え方をする人もいると思います。 とりあえず大事なことは「Rails の MVC と同じものだと考えてはいけない」ということです。 Backbone.js と MVC Ruby on Railsに代表される MVC アーキテクチャを採用した WEB アプリケーションフレームワーク (WAF) に慣れ親しんでいる人にとって、MVC という単語は馴染み深いものだと思います。 しかしながら、本

閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。この記事でいえば、bindは無くなり、現在ではonやlistenToが使われています。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） ネタ切れ感が否めないBackbone.js Advent Calendarですが、今回から何回かに分けて懇切丁寧な入門記事を書いていこうと思います。 以下のように書き進めていく予定です。 Events View Model ViewとModelの連携 Collection ViewとModelとCollectionの連携 RouterとHistory なおここで扱うBackbone.jsのバージョンは0.5.3です。 Backbone.jsのドキュメントを開くとまず最初に解説されているの

Backboneを使うときの参考情報たち Advent Calendarがネタ切れの折、最終日が冴えない小ネタで終わるよりはマシかということでリストアップしてみた。 日本語リソース では早速、日本語のリソースから。古い情報はリストから外しているので、いくらか偏りがあるかも。悪しからず。 ビギナー向けにまとまったの CodeGrid - フロントエンドに関わる人々のガイド Backbone.js Advent Calendar 2011 - Qiita CodeGridで連載中のBackbone入門が、ちょうどリアルタイムに更新されているビギナー向け情報でおすすめ。ただし有料。去年のAdvent Calendarも丁寧でおすすめ。 enja-oss/Backbone · GitHub JavaScript MVCフレームワーク Backbone.jsのコメント付きソースコード日本語訳が公開

開発生産性のために効率が必要なら、ヒトよりもシステムやプロセスを観察したい Posted: 2024-08-06 Updated: 2024-08-06 #開発生産性

URLYou can post either your article on Qiita or your blog post. About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)