Sarabande.jp

Backbone.js: イベントハンドラを指定する

Wed, 15 May 2013 01:48:57 +0900

Backbone.js においてイベントハンドラは events プロパティで指定する。イベントの観測対象となる要素のセレクターは el プロパティもしくはイベントのあとに記述する。

<div id="result">
  <button id="mybutton">クリックしてください</button>
</div>

<script type="text/javascript">
var AppView = Backbone.View.extend({

  el: "#result",

  events: {
    "click #mybutton": "clicked"
  },

  clicked: function() {
    console.log("クリックされました");
  },

});

var App = new AppView;
</script>

Backbone.js: モデルとビューの連携について

Wed, 15 May 2013 00:47:45 +0900

Q&A によるとモデルとビューのあいだの参照方法は複数存在する。直接のポインターを使い、ビューとモデルが一対一で対応させる(model.view と view.model)。ビューの生成と組織化を調整する中間的な「コントローラー」オブジェクトを用意する方法もある。イベントによるアプローチを好む人もおり、メソッドを直接呼び出す代わりに常にイベントを発動させる。

Backbone.js: モデルのデフォルトを指定する

Wed, 15 May 2013 00:41:37 +0900

defaults プロパティを使って、プロパティのデフォルトを指定することができる。デフォルトの値はインスタンス生成の際に指定されなかったプロパティに対して使われる。

var Meal = Backbone.Model.extend({
  defaults: {
    "main": "焼き肉定食",
    "dessert": "アイスクリーム"
  }
});

var order = new Meal;
var order2 = new Meal({'main': 'カレーライス'});

// 焼き肉定食
console.log(order.get('main'));
// カレーライス
console.log(order2.get('main'));

Backbone.js: テンプレートを使う

Wed, 15 May 2013 00:02:00 +0900

Underscore.js に template メソッドが用意されているので、さっそく使ってみよう。ビューに template メソッドを用意しておけば、テンプレートを別のものに切り替えたときに、修正する箇所を減らすことができる。

var AppView = Backbone.View.extend({

  el: '#result',

  initialize: function() {
    this.render();
  },

  template: _.template("Hello <%= name %>"),

  render: function(){
    this.$el.html(this.template({ name:'masaki' }));
    return this;
  }
});
 
var App = new AppView;

Backbone.js: Hello World

Tue, 14 May 2013 13:07:00 +0900

Backbone.js で Hello World を行う。最小限必要なことは Backbone.View　の extend メソッドを使って initialize メソッドと render メソッドを定義することおよび、ビューのインスタンスを生成することである。

initialize メソッドはビューのインスタンスを生成する際に実行されるメソッドである。今回は render メソッドの実行を指定した。el プロパティはビューのなかにおける DOM 要素(element)の表現である。$el は jQuery によって処理済みの DOM 要素である。jQuery が使えるので、el にはセレクターを指定することができる。

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

<div id="result">
</div>

<script type="text/javascript">
var AppView = Backbone.View.extend({

  el: '#result',

  initialize: function() {
    this.render();
  },

  render: function(){
    this.$el.html('hello World');
  }
});
 
var App = new AppView;
</script>

Underscore.js: テンプレートにおいてリストを生成する

Tue, 14 May 2013 12:22:38 +0900

each メソッドを使う。リストの項目は1つのプロパティに配列として渡す。

var list = "<% _.each(menu, function(item) { %> <li><%= item %></li> <% }); %>";

console.log(
  _.template(list, { menu : ['塩ラーメン', 'とんこつラーメン', '醤油ラーメン']})
);

Underscore.js: テンプレートを利用する

Tue, 14 May 2013 12:04:23 +0900

Underscore.js には template メソッドが用意されている。Backbone.js は Underscore.js に依存するので、このメソッドをそのままテンプレートのために使うことができる。変数識別のための区切り文字は ERB と同じものが採用されているが、 _.templateSettingsを使って変更することもできる。イコール(=)記号の代わりにマイナス(-)記号を使えば変数に escape メソッドが適用される。ただし、マイナス記号は見わけずらいので、escape メソッドを直接呼び出したほうがわかりやすいだろう。

var compiled = _.template("Hello ");
var compiled2 = _.template("Hello ");

console.log(
  // Hello Masaki
  compiled({ name : 'Masaki' }),
  // Hello &lt;b&gt;Masaki&lt;&#x2F;b&gt;
  compiled2({ name : '<b>Masaki</b>' })
);

Underscore.js: 関数であるプロパティから値を得る

Tue, 14 May 2013 11:21:31 +0900

プロパティが関数の場合、値を得るには関数を実行する必要があるが、_.defaults メソッドを使えば、あたかも通常のプロパティのように値を得ることができる。

var order = { main: 'カレーライス', dessert: function(){ return 'アイスクリーム'; }};

// アイスクリーム
console.log(
  order.dessert(),
  order.dessert.apply(),
  _.result(order, 'dessert')
);

Underscore.js: プロパティのデフォルトを指定する

Tue, 14 May 2013 11:00:00 +0900

変数のデフォルトを指定するには三項演算子が便利であるが、オブジェクトの複数のプロパティのデフォルトを指定するには Underscore.js の defaults メソッドが便利である。defaults メソッドの第1引数はオブジェクトで、第2引数はデフォルトのオブジェクトである。

var defaults = { main: "カレーライス", dessert: "アイスクリーム" };

// { main: 'カレーライス', dessert: 'アイスクリーム' }
_.defaults({}, defaults)); 

// { main: 'オムライス', dessert: 'アイスクリーム' }
_.defaults({ main: "オムライス" }, defaults);

JavaScript: assert と assertEqual のコードスニペットを用意する

Mon, 13 May 2013 23:52:00 +0900

「ステートフル JavaScript」は assert および assertEqual メソッドを自前で定義してサンプルコードのさまざまな箇所で使っている。自前で定義すれば、テストフレームワークを使わなくてすむので、サンプルコードを試しやすくなる。

var assert = function(val, msg) {
  if (!val) {
    throw(msg || (val + "は真ではありません"));
  }
}

var assertEqual = function(val1, val2, msg) {
  if (val1 !== val2) {
    throw(msg || (val1 + "と" + val2 + "は等しくありません"));
  }
}

教育目標を明確に説明できないだろうか？

Sun, 12 May 2013 01:38:32 +0900

プログラミングの学習に関して、技能の比重が大きいので、読書によって何を得られるのか期待できることをもっと明確に説明できないだろうか。書籍全般に言えることであるが、それぞれの本がどのような教育目標を掲げ、どのような効果が得られるのかを明記したものはほとんど見られない。逆にきちんと示すことができれば、書籍の売り上げにも役立つのではないだろうか。

近年、研修効果測定に関する書籍が相次いで出版されている。amazon で検索すると「はじめての教育効果測定」(2007)、「教育効果測定の実践」(2012年)「研修効果測定の基本」(2013年)といった書籍が見つかる。

教育学の分野ではより効果的な教授方法の研究が日夜続いている。

はてなキーワードによれば、インストラクショナルデザインは最も効果的かつ効率的な教育を設計・開発するための方法論であり、教育の場においては、学習者の自由度を保ったままで高い学習効果が生じることを意図して、具体的な計画を立てることである。 Wikipedia によれば、インストラクショナルデザインは「人はいかに学ぶか」「学習とは何か」という問に対峙し、より良い学習の環境を総合的にデザインすることを目指している。

Amazon で調べるとさまざまなサイトで名前が挙げられているガニェの「インストラクショナルデザインの原理」、ケラーの「学習意欲をデザインする―ARCSモデルによるインストラクショナルデザイン」といった書籍が見つかる。

演繹よりも帰納のほうがわかりやすい

Sat, 11 May 2013 21:37:00 +0900

数学や物理のようにプログラミング言語の教科書において、一般的なルールや考え方を説明してから、そのルールを具体的な問題に適用するというやりかたは広く行われている。しかし、よくある問題は準備段階の説明が長すぎることだ。初心者の段階では、記憶できる情報はかぎられているので、具体的な練習に取り組むころには忘れてしまう。それよりも身近でよく見かける問題を示した上で、それを解くために必要最小限の知識を確認し、問題を解いてみせる。より高度な問題に取り組むための一般的な考え方を述べるほうが記憶に残りやすいのではないだろうか。数学や物理学の大学受験の教科書では典型的な書き方であるが、大学以降の教科書になるととたんにそのやりかたが忘れ去られてしまうのは何とも不思議なことである。

説明に不要なコード、コピペして動かないコードはなるべく教科書に使うべきではない

Sat, 11 May 2013 20:44:57 +0900

プログラミング言語の教科書において、不満なことは、現実的であるということを示すためなのか、ある機能の説明において、不要なコードが記載されていることが多い。しかし、説明に不要なコードは初心者の集中力をそらしてしまうので、掲載すべきではないし、またかぎられた誌面の空間をムダづかいしていることになる。

フレームワークやライブラリ解説書でないかぎり、言語の標準ではないライブラリやフレームワークを使わない動かないコードも避けるべきである。読者が確認する手間が増えるので、検証されない可能性が高くなるし、教科書のテストコードの量も増やすことになる。

教科書を書く上では、できるかぎり、モデル化を心がけるべきである。モデル化とは問題の本質的な部分を抽出して、議論しやすくすることである。数学や物理ではよく見られる手法であり、プログラミング言語も数学の影響を大きく受けているのであるが、教科書になると、どういうわけか数学のやり方が忘れ去られてしまう。

情報のフィルタリング、基本学習をこまめにやる、複数の概念を同時並行に操作する練習を心がける

Sat, 11 May 2013 06:38:00 +0900

初心者の段階では何が必要な情報なのか判断できず、どうでもよい情報を過剰に集めてしまう。またスキルが向上して、情報の処理能力が向上すると、要求水準をどんどん高くしてしまうことがある。

初心者の段階では、最初から効率よく情報を集めるというスタイルをやろうとすると、上達の妨げになるので、たいていのことはムダになることを承知の上でいろいろ試してみる。

わからないことはこまめに調べ、Twitter などに投稿してみる。基本的な説明やかんたんなコードをコピペして記録を続けてゆくと、そのうち、断片的な知識の貼り合わせから、一定の文章やコードが書けるようになる。それまで他人のやりかたをそのまままねてみる。

一定水準のスキルを超えると、学習時間と得られる投資が見合わなくなることがだんだん見えてくるので、そのあたりで、自分がなにを勉強すべきか、判断基準を設けるとよいかもしれない。

初心者の段階では基本操作の1つ1つの負担が大きく、少し概念操作するだけで、集中力が切れてしまう。対策としては、少し練習しては記録して言語化するということをこまめにやる。一定の経験があると、新しい分野を学ぶときに、以前の分野と同じようにコードや文章を書こうとしようしてしまい、スキルに釣り合わない要求を自らに課してしまうことがある。対策としては、

書籍だけ読んで勉強することの問題は複数の概念を同時並行に操作するトレーニングが不足しがちなので、自分でトレーニング方法を考案してみる。どの複数の概念の組み合わればよいのかは、さまざまなものの見方があるので、それが自分自身の個性になる。組み合わせに関して、自分がしっくりくる物語を語れるようになることを心がける。

複数の概念を同時並行に操作する際において、理解の弱い概念が足を引っ張り、学習を進めることができないことが多い。その場合、理解の弱い概念操作について、より適切なトレーニング方法を考えてみるとよいだろう。

Backbone.js: jQuery 関連の変更について

Sat, 11 May 2013 06:09:09 +0900

0.9.0: ビューに新しいプロパティが追加されました。$el はビュー要素へのキャッシュ済みの jQuery (もしくは Zepto) 参照です。setElement はビューの el を手動で設定する代わりに使うべきです。このメソッドは view.el と view.$el の両方を正しく設定し、新しい DOM 要素にイベントを再度デリゲートを行います。

0.9.9: $.ajax のデフォルト利用をオーバーライドするために Backbone.ajax フックが追加された。AJAX の機能が時代遅れであるなら、サーバーとのコミュニケーションのために望ましいメソッドをセットします。

Backbone が使う DOM 操作と Ajax 呼び出しを設定するには、setDomLibrary の代わりに Backbone.$ = … を使います。

Backbone.js: イベントの変更について

Sat, 11 May 2013 05:50:00 +0900

手元の書籍のコードとはだいぶ変わってしまっていたので、チェンジログから抜粋することにした。抜粋した内容はすべてではないことに注意。

0.5.2 で bind メソッドはコールバック関数の this を第3引数で指定できるようになった。

0.5.3 でビューの events プロパティを関数、オブジェクトリテラルで定義できるようになった。これによってプログラミングによるイベントの定義や継承がかんたんになる。

0.9.0 で model.on(“change:name change:age”, …) のように複数のイベントを指定して発動させることができるようになった。 bind と unbind メソッドは jQuery に on と off に改名された。

コレクションの add と remove イベントの範囲において、追加されるもしくは削除されるモデルのインデックスは options.index を通じて利用できるようになった。

undelegateEvents がビューに追加された。これによって設定したイベントデリゲーションをすべて手動で削除できる。

0.9.9 で listenTo と stopListening メソッドが追加された。view.remove() は view.stopListening() を自動的に呼び出す。 Backbone オブジェクトは Events を継承するようになり、グローバルバスとして使うことができるようになった。 once メソッドがサポートされた。jQuery の one および Node.js の once メソッドのアイディアに追随したことになる。また、jQuery スタイルのイベントマップスタイル (obj.on({click: action})) をサポートするようになった。

0.9.10 で Backbone.history の発動に加えて route イベントが発動されるようになった。

1.0 で listenToOnce を追加した。

教科書の設計について

Thu, 09 May 2013 02:57:41 +0900

自分が学んだことを今後どのようにまとめてゆけばよいのかについて、PHP の教科書を例に考える。

概念を学んでから最終的にアプリケーションをつくるのではなく、最初につくるべきアプリケーションの要件や機能を示した上で、概念を学んでゆく。個別の課題はできるだけ最終成果のアプリケーションにつながるようにすべきである。重要であるがアプリケーションをつくる上で必須ではない項目は書かないか、最後の補足としてまとめる。

アプリケーションをつくる際にはマイクロフレームワークを使う。素の PHP を書いた上でマイクロフレームワークを使ったコードのリファクタリングしてもよいだろう。マイクロフレームワークを導入する前にテンプレートエンジンの導入を示したほうがわかりやすいだろう。テンプレートエンジンに最小限のロジックしか求めないので、Mustache がよいかもしれない。教科書の説明に必要な最小限のマイクロフレームワークにすれば、フレームワークの学習負担を減らすことができる。

データの保存に関しては、データベースよりも JSON 形式のテキストにすれば SQL および noSQL データベースのセットアップが不要になるので、練習しやすくなる。データベースを使うのであれば SQLite3 がよいだろう。デフォルトで PHP に搭載されているからだ。

学習において SQL を使わないメリットはフィルタリングの操作を PHP で書く必要があるので、配列関数のトレーニングになる。また SQL に慣れてしない人が SQL でつまずく問題を減らすことができる。もっとも、高度なフィルタリングを考えると、高階関数とクロージャの学習が必要になるので、ここでつまずく可能性がある。

アプリができれば、今度は異なるプログラミングパラダイムに切り替えるために、別のフレームワークに置き換えることも考えられる。

最小限でも実用的なアプリをつくるためには PHP だけでなく、HTML5、JavaScript の学習が必要になる。

バリデーションに関して、PHP、HTML5、JavaScript を統一的に学ぶ必要がある。

JavaScript の部分の実装に関して、素の JavaScript、jQuery、MVC フレームワークの選択肢がある。

教科書の方針としては jQuery を使ったコードから MVC フレームワークを使ったコードにリファクタリングすることである。

DOM、イベント、Ajax の学習について手際よくまとめる必要がある。

PHP と JavaScript を並行して使うために、クロージャを使ったイベント駆動のプログラミングについては PHP にも説明が必要だろう。

配列関数の分類について

Thu, 09 May 2013 02:02:00 +0900

CRUD(Create、Read、Update、Delete)、一階関数か高階関数かどうか、デフォルトとカスタマイズ方法の3つの分類を挙げることができる。

script タグの src 属性で相対 URL を指定することについて

Tue, 07 May 2013 23:45:22 +0900

cndjs.com のサイトにおいてライブラリの URL の記述において HTTP プロトコルが省略されていたので、正しい書き方なのか stackoverflow を調べたら、RFC 3986 において相対的な URL として認められているとのことであった。ただし、Mac OSX において HTTP サーバーを立ち上げずに、ファイルシステムから HTML ファイルをブラウザーで表示させるとファイル内の相対パスとして解釈されてしまうので、ローカル環境での開発を考慮すると、省略はしないほうがよいだろう。

JavaScript: 配列から空の要素を削除する

Tue, 07 May 2013 22:43:00 +0900

JavaScript の配列から空の要素(falsy な値)を削除するには filter メソッドを使う。これは PHP の array_filter と似たようなふるまいである。stackoverflow の「Remove empty elements from an array in Javascript」を参考にした。falsy と truthy に関しては以前記事を書いた。

var array = [, 0, false, null, NaN, undefined, ''];
console.log(array.filter(Boolean));
console.log(array.filter(function(elem) { return elem; }));