20140413 - kyosen/developing-backbone.js GitHub Wiki

活動概要

  • 日時: 2014年04月13日(日) 13:25〜
  • 参加者: 井谷、伊藤(司会)、辻(記録)、矢野、米田
  • 欠席者: 乙村
  • 内容: Backbone.jsアプリケーション開発ガイド 1,2,3章

1章 イントロダクション

1.1 MVCとは

  • なし

1.2 Backbone.jsとは

  • なし

1.3 JavaScriptのMVCフレームワークが必要になるとき

  • なし

1.4 Backbone.jsを検討するべき理由

  • なし

1.5 本書の構成

  • なし

2章 MVC

2.1 MVCとは

  • Front Controller を ルーター と呼ぶのは一般的か?(辻)

    • Ruby on Rails はそう呼ぶ。Play Framework もそう呼ぶ。(伊藤)
    • Spring は Dispatcher と呼んでいる。(伊藤)
    • Struts は ActionServlet か ActionController だったような。(米田)
  • モデルが永続化を行うことが多くなっているのか?(辻)

    • 最近の Framework は Ruby on Rails を真似しているので、Active Record パターンが多い。(伊藤)
    • J2EE の JPA は違うやり方をしている。(伊藤)
    • サービスもモデルに含めることが多い。(伊藤)
  • SPA は何のメリットがある?(辻)

    • 開発者視点で見たときにメリットがある。(矢野)
      • セッションの状態をクライアントに持つという考え方。サーバサイドがセッションを持たなくなるのでスケールアウトがしやすくなる。(伊藤)
    • サーバサイドでログが取りにくくなるのでは?(伊藤)
      • ログをとりたいときにクライアントからサーバに情報を送れば解決できそう。(伊藤)
  • p15 script type の template とは何の機能か?(伊藤)

    • text/template はブラウザが解析できるものではない。後でアプリで使うためにあるのでは?(矢野)
    • http://dotinstall.com/lessons/basic_backbonejs/22408 の解説参照。
    • type を記載しないと javascript として解釈されるため、type を記述している。
  • p15 このソースコードを動作させる場合、Javascript は demo.js に書けばよい?(辻)

    • そのとおり。
  • p15 <%= と <- はどう違う?(米田)

    • <%= はエスケープなし。(伊藤)
    • <- はエスケープあり。(伊藤)
  • p15 タイトルの <%- title %> が、原書(Webページ)では <%= title %> になっている。(矢野)★

    • <- の方がエスケープされるので安全なのでは?(伊藤)
    • <%= を使うときはどんなときか?(井谷)
      • p15 <%= completed ? 'checked="checked"' のケースは必要。"" がエスケープされると困るので。(伊藤)
  • Javascript のプロパティ名を定義するときに "" で囲む必要はないのか?(伊藤)

    • 必要なし。ただし、空白が入る場合、. # が入る場合、予約語の場合は、"" は必要。(辻)
    • JSON 文字列にした場合は必要。(矢野)
  • jQuery の # と . の表記について(伊藤)

    • は id を指す。id は HTML の文法上、ユニークなもの。

    • . は class を指す。
  • p21 MV* の * はどういう意味か?(伊藤)

      • の部分は何でもよいことを意味している。ワイルドカードの意味。MVVM とかでもOK。(辻)
    • Angular では MVW といっており、W は What ever (なんでもよい)の意味。(矢野)
  • Backbone で言っている View は Controller の方が近いのではないかと感じた(伊藤)

    • View というと表示の部分だけを行うイメージ。

2.2 MVCのメリット

  • 付録A は次回の読む範囲とする

2.3 機能一覧

  • なし

3章 Backbone.jsの基礎

3.1 セットアップ

  • JavaScript を作成するときのエディタに何を使う?(米田)

    • sakura エディタ(米田、伊藤)
    • xyzzy (井谷)
    • emacs (矢野)
    • Eclipse。自動補完はしてくれた。 (辻)
  • <script> タグは body に書くのがはやり?(伊藤)

    • パフォーマンスを早めるのであれば、css は head に、script は body に書くのがよい。(矢野、伊藤)
  • 各 Javascript ライブラリを http で取得する書き方をすると、閉鎖環境のときに困る(伊藤)

  • 各 Javascript の min はどういう意味か?(辻)

    • コメントや空白をなくしたもの。min ではないものと機能的に同一。ロード時間を短縮するため。(伊藤)
    • 開発では min ではないものを使い、リリース時は min を使用する。(伊藤)

3.2 モデル

  • Javascript で大文字、小文字の使い分けはどうしている?(伊藤)

    • 大文字は クラス、 小文字 は変数 だと思われる。(矢野)
    • Backbone や Model は何故大文字?(伊藤)
      • Backbone や Model はクラスだと思う。p58 にその記載あり。(辻)
      • Model は Backbone の内部クラスか。(伊藤)
    • p36 の Person は小文字始まりの方がよいのではないか?(伊藤)
  • Backbone クラスは、jQuery の $ と同じようなもの。(辻)

    • Javascript は変数は基本的にグローバル変数として定義される。各フレームワークで1つのグローバル変数を定義してその中にいろいろ変数を定義していくのが一般的な作り方。(辻)
    • underscore.js の _ も同じ。(伊藤)
  • UML を使って描いた方がわかりやすそう。(伊藤)

  • Model.set は、「値を渡す場合」、「名前+値の場合」、「名前+値 オプションの場合」の3種類あるがどのように実装をしているのだろうか?(伊藤)

      var attr, attrs, unset, changes, silent, changing, prev, current;
      if (key == null) return this;

      // Handle both `"key", value` and `{key: value}` -style arguments.
      if (typeof key === 'object') {
        attrs = key;
        options = val;
      } else {
        (attrs = {})[key] = val;
      }

      options || (options = {});
  • Backbone のソースコードは長くないので読むことは可能(伊藤)

    • 1060 行程度。(井谷)
  • complete と completed はどう違う?(伊藤)

    • complete にも形容詞として完了したという意味がある(伊藤)
  • Javascript での == と === の違いは?(伊藤)

    • == は変換を書けて同一。 1 と "1” が同一になる。
    • === は厳密な比較。
  • extend は、実際には新しい関数(コンストラクタのようなもの)を定義している。(井谷)

    • new に渡しているのは関数(コンストラクタ)になる。(井谷)
    • extend は Backbone のキーワード。new と prototype は Javascript のキーワード。(矢野)
  • p34 の console.log(!Person.hasChanged()) のコードについて(辻)★

    • 結果のコメントが true となっているが、実際は false になる。(辻)
    • 原文では ! がない。(井谷)
    • 3.2.2.3 の本文で記載している確認事項とコードが不一致。(矢野)★
  • p34 の hasChanged() はどこでリセットされるのか?(伊藤)

    • どこかはわからないが、リセットはできそう。(矢野)
  • p34 の 3.2.2.3 の直接のアクセスについて(井谷)

    • 「JSON表現であることが多いのですが、他の形式が使われることもある」とあるが他の形式とは?(井谷)
      • 他のフレームワークが処理しているところだから、このような書き方になっているのでは?(伊藤)
  • p37 this.on("invalid", function(model, error) { のところ(辻)

    • invalid イベントが発生したときに、model と error を引数にとるコールバック関数が必要となるということ。(伊藤)

3.3 ビュー

  • p39 のコードのプロパティの最後に , があるが、必要なのか?(伊藤)

    • IE 8 以前だとエラーになる。(米田)
    • ECMAScript5 の仕様では問題なし(最後に,を入れることが許される)。ECMAScript3 では最後に, を入れることは許されない。(矢野)
  • p39 e1: '#footer' はどこを指している?(辻)

    • p77 にfooter の id がある(伊藤)
  • p40 3.3.2.2 のコードでボタンは表示できるのか?(辻)

    • ボタンの View を作成しているだけで表示はされないのでは?(伊藤)
  • p40 $el と $() はどこで定義されている?(辻)

    • Backbone の中で el 変数は DOM を参照するように定義されている。(伊藤)
    • グローバルな $() は jQuery で定義されている関数。(伊藤)
    • view 配下の $el と $() 関数は Backbone で定義されているもの。内部で jQuery の $() 関数を使用している。 (伊藤)
  • p43 最下部の this.model.bind(’change', _.bind(this.render, this)); はどういう意味か?(伊藤)

    • _.bind(this.render, this) の左側は view オブジェクトのrender 関数で、右側の this はレシーバ。右側の this のコンテキストで、左側の render を呼び出す関数を返す。(矢野)
    • 左側の this.render の this は必要か?(伊藤)
  • p44 の「カリー化は可能です」というのはどういう意味か?(伊藤)

    • 部分適用の間違いだと思われる。Github では部分適用と記載されている。(米田)
      • _.bind only works on one method at a time, but effectively binds a function to an object so that anytime the function is called the value of this will be the object. _.bind also supports passing in arguments to the function in order to fill them in advance - a technique known as partial application.
      • Underscore.js の bind の説明をみると、「 bind (function, object, *argument)」となっている。 *argument を指定することで、function の部分適用ができるということを指しているのでは(米田)

3.4 コレクション

  • p45 Collection の add メソッドには注意が必要。デフォルトでは、同じ id は追加されない。(伊藤)

    • {merge:true} をオプションとして追加すると、上書きできる。(伊藤)
    • id の重複は許されないということ?(辻)
      • p46 にidAttribute で何を id にするか設定し、それによって決まる(矢野)
    • id がなくても追加できるのか?(伊藤)
      • 追加できる。モデルの作成時に内部的に cid が自動で振られる。(矢野)
  • p50 「引数を指定せずに clear を呼び出すと」 というのは reset の間違いか?★

    • そのとおり。

3.5 RESTに基づく永続化

  • サーバを立てなくても動作確認できるのか?(辻)

    • できない。
  • Collection がリポジトリ的な役割をしているように感じる(伊藤)

  • REST とは何か?(辻)

    • HTTP の GET(参照)、POST(新規作成)、DELETE(削除)、PUT(更新)を用いてオブジェクトライフサイクルを管理するような仕組みのことを言う。(伊藤)
  • p57 PATCH形式の HTTP とは何か?(辻)

    • PUT はオブジェクトを送信してそのまま置き換える。(伊藤)
    • PATCH は部分的に情報を送付して置き換える。(伊藤)

3.6 イベント

  • p61 の ourObject.trigger("dance", 'ダンス', "5分") の引数は、doAction の関数の引数と一致している必要があるか?(辻)

    • trigger で多くの引数を渡すことも可能。多い場合は、無視される。(伊藤)
  • p62 View.remove() とは何か?(伊藤)

    • View が持っている DOM 要素の破棄とイベントの破棄を行う(伊藤)
  • p63 の view.listenTo(b, 'all', function() { } の2回目は1回目を上書きすることになるのか?(辻)

    • 上書きではなく追加されている。(矢野)
    • remove() は登録されているものをすべて削除することになる。(矢野)
  • p63 の events: { 'click [type="checkbox"]' の ’’ の中は何表記か?(辻)

    • CSS の書き方。(伊藤)
  • p63 の一番最後のコードの this.$el.click はどう解釈する?(辻)

    • this.$el が jQuery のオブジェクトを返す。click はjQuery のメソッドになる。(伊藤)

3.7 ルーター

  • ルーターを機能させるには、Backbone.history.start() が必要という理解でよいか?(辻)
    • そのとおり。(矢野)

3.8 同期用API

  • PUT や DELETE に対応していない場合のケースを記述している(伊藤)
    • PUT や DELETE は form タグでは使えない。Ajax から送信することができる。Ajax はブラウザの機能。(伊藤)
    • サーバ側は、アプリケーションサーバやフレームワークが対応していないと使えない。(伊藤)

3.9 依存先ライブラリ

  • なし

3.10 まとめ

  • なし

次回の予定

  • 05/11(日)
  • 4章、付録A
  • 必ず写経してくること!
    • 写経できない部分でもサンプルの意味を理解する
⚠️ **GitHub.com Fallback** ⚠️