@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

第4回.js系開発技術勉強会 #techbuzz に行ってきました

event javascript

今回もメモを投下しておきます。

入門enchant.jsでゲームを作ろう

資料 → -入門- enchant.js でゲームを作ろう

はじめようBackbone.js

資料 → はじめよう Backbone.js

  • 目的
    • Backbone.jsがどんなものかわかる
    • Backbone.jsのメリデメがわかる
    • 聞いたからと言ってすぐに出来るようになるわけではない
    • 他のフレームワークの比較は作ってない
  • Backbone.js
    • JavaScriptのMVCフレームワーク
    • 大規模開発で効果を発揮する
    • 割りと知名度は高い
    • RailsやCacePHPなどとは異なる
    • オブザーバーパターン
    • JavaScriptはイベントを関しするイベント駆動プログラミング
    • Backboneではオブジェクトの状態変化も観察する

ーMVC

    • View
      • DOMの監視と操作
    • Model
      • データの取得、保存、更新、削除
    • Collection
      • Modelの集合、Controllerではありません。
    • Router
      • URLを監視する
    • History
      • Routerの履歴を監視する
    • Controllerと言うオブジェクトは存在しません
    • M:Model, Collection
    • V: View
    • C: Router, History
    • MとVが大事
  • 具体的
    • ViewがModelとColletionを監視する
    • ユーザがクリックなどの操作でイベントを発生させると、Viewが反応する
    • 反応したViewがModelへ処理を移譲する
    • Modelが通信などを行う
    • Modelが状態変化すると、Viewが状態変化を監視しているので、表示処理などを行う
    • Collectionは？
      • 一覧を扱うのがCollectionになります。
      • ModelとCollectionで相互に関しする感じになります。
  • ここまでのまとめ
    • Viewが、ユーザ、Model、Collectionのイベントを監視する
    • データを取得更新すると、Viewがイベントを動かす
  • デモとソースの解説
    • WEBAPIを叩いて、週間天気を表示する
    • jQuery, underscore.js, Backbone.jsを読み込む。
      • Backbone.jsはunderscore.jsに依存しているので必要
      • underscore.js単体で使っても便利
    • ・・・Viewで使う
    • 作ったViewとModelのJavaScriptを読み込む
    • 最後に、ModelとViewを実体化する
  • Model
    • defaults で初期値を設定する
    • url: で APIのURLを定義
    • sync: JSONPの設定をするためにオーバーライドしている
    • parse: syncの直後にparseが呼ばれる
      • データを整形する
      • returnしたデータがModelの属性になる
  • View
    • el: にHTMLの要素を指定する。
    • events で監視イベントを設定する、 イベントとどこ？を設定
    • initialize: 初期化を行う
      • listenToでモデルを監視する
      • model のchangeイベントを監視し、this.renderを呼び出す。
    • this.model.set(値, {slint: true});
      • 第2引数のsilentは、モデルに値を設定するとchangeイベントが発生してしまうが、発生させないようにするため
  • 最後に
    • BackboneJSでは大規模開発で有効なので、このデモくらいであれば使わない方が早いですよ。

はじめて学ぶ enchant.jsゲーム開発

はじめて学ぶ enchant.jsゲーム開発