2012/11/14に開催された「なんでもないただの先端技術勉強会(仮)」にて、Backbone.jsの概要説明に使ったスライドです。

2012/11/14に開催された「なんでもないただの先端技術勉強会(仮)」にて、Backbone.jsの概要説明に使ったスライドです。
閲覧上の注意 この記事で対象としているバージョン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 などにあります。 (追記ここまで) 今日のテーマは 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は結構古いので注意してください。この記事でいえば、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入門 「Events」 Backbone.jsの
AS3ライクに記述できるJavaScriptゲームライブラリです。(ライセンスはMIT License) ダウンロード - https://github.com/DeNADev/Arctic.js <html> <head> <script type="text/javascript" src="js/arctic.js"></script> <script type="text/javascript" src="js/game.js"></script> </head> <body> <canvas id="canvas"></canvas> </body> </html> (function() { // arcGameクラスを継承したメインクラス var Main = arc.Class.create(arc.Game, { // コンストラクタ(必要なら引数を指定) initial
第7回 みゆっき☆Think 「本気で学ぶJavaScript」 [解説・講座] 2011年9月2日に放送した、第7回 みゆっき☆Think 「本気で学ぶJavaScript」の生放送動画です。【出演...
初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 どうもこんにちは、フレッシュさに定評のない新入社員のtek_kocです。 初めてのお仕事として「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。 JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、2週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。 ということで、Titanium Mobileで試しにアプリ開発をしてみた感想を書いてみました。 そもそもTitanium Mobileとは? Titanium Mobileとは、Appcelerator社によるスマートフォン対応アプリケーションの開発環境です。 iPhoneやiPad、Androidを
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです(例えば、「ログが必要だよね」など)。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
JavaScriptはプロトタイプベースのオブジェクト指向言語で、 PHPやJava、C++などのクラスベースのオブジェクトとは 特徴や書き方が大きく異なります。 今回は、PHPでオブジェクト指向開発の経験がある人向けに、 JavaScriptでのオブジェクト指向プログラミングの書き方を解説します。 サンプルはすべてそのまま実行できるので、 FirebugなどのJavaScriptコンソールで実行して 挙動を確かめながら読み進めるとわかりやすいかと思います。 JavaScript の特徴 すべてがオブジェクト JavaScriptは完全なオブジェクト指向言語であり、 すべての型の変数、関数はオブジェクトです。 (プロパティやメソッドを持つ)
現在73エントリー。新たな基礎文法最速マスター記事を見つけ次第随時追加していきます。 リンク切れしているものはURLを記載しておくので、Internet Archive Wayback Machineなどで過去の履歴を閲覧してみてください。 基礎文法最速マスター ActionScript 3.0(http://blog.livedoor.jp/takaaki_bb/archives/51374100.html) awk(http://gauc.no-ip.org/awk-users-jp/blis.cgi/awk_fastest) Bash Brainf*ck(http://d.hatena.ne.jp/shunsuk/20100130/1264842323) Bシェルスクリプト(http://chaichan.web.infoseek.co.jp/src/BSH.htm) C++0x C
2011年はサーバサイド JavaScript の年! サーバサイド JavaScript の本命は node.js! ということで割と普通のウェブアプリケーションを node.js で作るためのチュートリアルを書いてみました。WebSocket とか新しめの話題は結構見ますが、PHP とかで普通のウェブアプリ作ってる人向けのチュートリアルとかあんま見ないような気がしたので、って感じです。 チュートリアルの内容ですが、コード量が少なめで機能的にも分かりやすそうなモノということで、短縮 URL ウェブアプリケーションを作ってみることにしました。bit.ly とか t.co とか nico.ms みたいなアレです。短縮 URL のデータは MySQL に保存します。 結構長文になっちゃったので、先に目次置いときます。 node.js のインストール npm (Node Package Mana
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く