froop · November 13, 2019 04:56 · Jun 3, 2013 · May 15, 2013 · May 14, 2013 · May 13, 2013
diff --git a/js-template-memo.md b/js-template-memo.md
@@ -1,7 +1,7 @@
 JavaScript テンプレートエンジン vs DOM 直接操作
 ====================
 
-Backbone.js とかで Web ブラウザ 内の JavaScript で MVC してるサンプルとか読んでいると、
+Backbone.js とかで JavaScript で MVC してるサンプルとかを読んでいると、
 HTML の可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、
 サーバー側と違ってクライアント側では DOM 操作ができるので、わざわざテンプレートエンジン使ってテキストベースでやるよりも、
 DOM を jQuery で直接操作した方が分かりやすいんじゃないかと思った。
@@ -95,14 +95,14 @@ HTML を煩雑にした代償としてなので、全体としての差し引き
 
 ### 単体テストがしやすい
 テキストベースで DOM に依存しないため、ブラウザ環境がなくもテストできる。
--> 結果テキストを解析する手間考えると、結局は DOM に変換した方が楽な気がする
+-> 結果テキストを解析する手間を考えると、結局は DOM に変換した方が楽な気がする
 
 
 テンプレートエンジンの欠点
 --------------------
 
 ### 特殊な文法を理解する必要
-コーディングに新たな文法を追加することになり、理解する手間がかかる。  
+コードに新たな文法を追加することになり、理解する手間が増える。  
 デザイナーとプログラマーを分けている場合には、デザイナーが文法を覚える必要があるが、
 それならいっそ JavaScript を覚えた方が将来につながるし良いかも...?
 
@@ -113,8 +113,8 @@ HTML に異物が混じるので、コーディング時に HTML 単体をブラ
 ライブラリの導入が必要だが、未だデファクトスタンダードと呼べるものがなく、不安定な土台に依存する危険がある。
 
 ### 実行速度が遅い
-毎回テキストから要素を生成するので、ページ表示時に1度だけであとは clone する方式と比較するとだいぶ遅そう。
+毎回テキストから要素を生成するので、clone 方式がページ表示時に1度だけなことと比較するとだいぶ遅そう。
 
 ### 言語の機能性が低い
-機能に乏しいテンプレート独自の言語を使って分岐とか繰り返しとかを制御するくらいなら、
+機能に乏しい独自言語を使って分岐とか繰り返しとかを制御するくらいなら、
 JavaScript + jQuery の方が多機能で便利だし、IDE の支援もある。
diff --git a/js-template-memo.md b/js-template-memo.md
@@ -12,9 +12,12 @@ DOM を jQuery で直接操作した方が分かりやすいんじゃないか
 ([Underscore.js template](http://underscorejs.org/#template), [Mustache](http://mustache.github.io/) など)
 だけではなく、DOM ベースのもの
 ([PURE](http://beebole.com/pure/), [Transparency](https://github.com/leonidas/transparency) など)
-があるようなので、その場合は当てはまらない。なので、以下はテキストベースのテンプレートエンジンについての記述。
+もあるようなので、その場合は当てはまらない。なので、当記事はテキストベースのテンプレートエンジンについての記述。
 
-[追記] 同様の考察 -> Micro Templates Are Dead... forget about it. http://blog.nodejitsu.com/micro-templates-are-dead
+[追記] 同様の考察
+
+* Micro Templates Are Dead... forget about it. http://blog.nodejitsu.com/micro-templates-are-dead
+* Template Engines - Sendhil's Cyber Home http://codingarchitect.wordpress.com/2012/10/22/template-engines/
 
 
 テンプレートエンジン方式
@@ -92,15 +95,15 @@ HTML を煩雑にした代償としてなので、全体としての差し引き
 
 ### 単体テストがしやすい
 テキストベースで DOM に依存しないため、ブラウザ環境がなくもテストできる。
--> テキストを解析する手間考えると、結局は DOM に変換した方が楽な気がする
+-> 結果テキストを解析する手間考えると、結局は DOM に変換した方が楽な気がする
 
 
 テンプレートエンジンの欠点
 --------------------
 
 ### 特殊な文法を理解する必要
 コーディングに新たな文法を追加することになり、理解する手間がかかる。  
-HTML と JavaScript の担当者を分けている場合には、HTML 担当のデザイナーが文法を覚える必要があるが、
+デザイナーとプログラマーを分けている場合には、デザイナーが文法を覚える必要があるが、
 それならいっそ JavaScript を覚えた方が将来につながるし良いかも...?
 
 ### HTML コーディング時の確認がしづらい

diff --git a/js-template-memo.md b/js-template-memo.md
@@ -9,7 +9,7 @@ DOM を jQuery で直接操作した方が分かりやすいんじゃないか
 デザイナーが HTML、プログラマー が JavaScript と担当者を分ける場合には便利なのかな。
 
 [追記] テンプレートエンジンにはテキストベースのもの
-([Underscore.js の _.template()](http://underscorejs.org/#template) や [Mustache](http://mustache.github.io/) など)
+([Underscore.js template](http://underscorejs.org/#template), [Mustache](http://mustache.github.io/) など)
 だけではなく、DOM ベースのもの
 ([PURE](http://beebole.com/pure/), [Transparency](https://github.com/leonidas/transparency) など)
 があるようなので、その場合は当てはまらない。なので、以下はテキストベースのテンプレートエンジンについての記述。
@@ -78,12 +78,12 @@ HTML と JavaScript という技術単位で担当者を分ける場合、DOM
 テンプレートエンジン方式だと動的要素も HTML 担当に寄せられる。
 
 ### JavaScript がシンプルになる
-HTML を煩雑にした代償としてなので、全体としての足し引きをどう考えるかだが。
-また、DOM 操作方式でも jQuery を直接使わずにライブラリ化すれば同程度にシンプルにできそうな気も。
+HTML を煩雑にした代償としてなので、全体としての差し引きをどう考えるか。
+また、DOM 操作方式でも jQuery を直接使わずにライブラリ化すれば同程度にシンプルにできそう。
 
--> 試してみた https://github.com/froop/jquery-clone-template
+-> 試してみた https://github.com/froop/jquery-dom-tmpl
 
--> それ目的のライブラリも既にあった
+-> それ目的のライブラリも既にいろいろあった
 * PURE: http://beebole.com/pure/
 * Transparency: https://github.com/leonidas/transparency
 * weld: https://github.com/hij1nx/weld
@@ -92,6 +92,7 @@ HTML を煩雑にした代償としてなので、全体としての足し引き
 
 ### 単体テストがしやすい
 テキストベースで DOM に依存しないため、ブラウザ環境がなくもテストできる。
+-> テキストを解析する手間考えると、結局は DOM に変換した方が楽な気がする
 
 
 テンプレートエンジンの欠点

diff --git a/js-template-memo.md b/js-template-memo.md
@@ -1,6 +1,13 @@
 JavaScript テンプレートエンジン vs DOM 直接操作
 ====================
 
+Backbone.js とかで Web ブラウザ 内の JavaScript で MVC してるサンプルとか読んでいると、
+HTML の可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、
+サーバー側と違ってクライアント側では DOM 操作ができるので、わざわざテンプレートエンジン使ってテキストベースでやるよりも、
+DOM を jQuery で直接操作した方が分かりやすいんじゃないかと思った。
+
+デザイナーが HTML、プログラマー が JavaScript と担当者を分ける場合には便利なのかな。
+
 [追記] テンプレートエンジンにはテキストベースのもの
 ([Underscore.js の _.template()](http://underscorejs.org/#template) や [Mustache](http://mustache.github.io/) など)
 だけではなく、DOM ベースのもの
@@ -9,13 +16,6 @@ JavaScript テンプレートエンジン vs DOM 直接操作
 
 [追記] 同様の考察 -> Micro Templates Are Dead... forget about it. http://blog.nodejitsu.com/micro-templates-are-dead
 
-Backbone.js とかで Web ブラウザ 内の JavaScript で MVC してるサンプルとか読んでいると、
-HTML の可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、
-サーバー側と違ってクライアント側では DOM 操作ができるので、わざわざテンプレートエンジン使ってテキストベースでやるよりも、
-DOM を jQuery で直接操作した方が分かりやすいんじゃないかと思った。
-
-デザイナーが HTML、プログラマー が JavaScript と担当者を分ける場合には便利なのかな。
-
 
 テンプレートエンジン方式
 --------------------

diff --git a/js-template-memo.md b/js-template-memo.md
@@ -7,6 +7,8 @@ JavaScript テンプレートエンジン vs DOM 直接操作
 ([PURE](http://beebole.com/pure/), [Transparency](https://github.com/leonidas/transparency) など)
 があるようなので、その場合は当てはまらない。なので、以下はテキストベースのテンプレートエンジンについての記述。
 
+[追記] 同様の考察 -> Micro Templates Are Dead... forget about it. http://blog.nodejitsu.com/micro-templates-are-dead
+
 Backbone.js とかで Web ブラウザ 内の JavaScript で MVC してるサンプルとか読んでいると、
 HTML の可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、
 サーバー側と違ってクライアント側では DOM 操作ができるので、わざわざテンプレートエンジン使ってテキストベースでやるよりも、
@@ -78,12 +80,15 @@ HTML と JavaScript という技術単位で担当者を分ける場合、DOM
 ### JavaScript がシンプルになる
 HTML を煩雑にした代償としてなので、全体としての足し引きをどう考えるかだが。
 また、DOM 操作方式でも jQuery を直接使わずにライブラリ化すれば同程度にシンプルにできそうな気も。
+
 -> 試してみた https://github.com/froop/jquery-clone-template
 
 -> それ目的のライブラリも既にあった
-
 * PURE: http://beebole.com/pure/
 * Transparency: https://github.com/leonidas/transparency
+* weld: https://github.com/hij1nx/weld
+* plates: https://github.com/flatiron/plates
+* distal http://code.google.com/p/distal/
 
 ### 単体テストがしやすい
 テキストベースで DOM に依存しないため、ブラウザ環境がなくもテストできる。

diff --git a/js-template-memo.md b/js-template-memo.md
@@ -1,9 +1,16 @@
 JavaScript テンプレートエンジン vs DOM 直接操作
 ====================
 
+[追記] テンプレートエンジンにはテキストベースのもの
+([Underscore.js の _.template()](http://underscorejs.org/#template) や [Mustache](http://mustache.github.io/) など)
+だけではなく、DOM ベースのもの
+([PURE](http://beebole.com/pure/), [Transparency](https://github.com/leonidas/transparency) など)
+があるようなので、その場合は当てはまらない。なので、以下はテキストベースのテンプレートエンジンについての記述。
+
 Backbone.js とかで Web ブラウザ 内の JavaScript で MVC してるサンプルとか読んでいると、
 HTML の可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、
-わざわざテンプレートエンジン使ってテキストベースでやるよりも DOM を jQuery で直接操作した方が分かりやすいんじゃないかと思った。
+サーバー側と違ってクライアント側では DOM 操作ができるので、わざわざテンプレートエンジン使ってテキストベースでやるよりも、
+DOM を jQuery で直接操作した方が分かりやすいんじゃないかと思った。
 
 デザイナーが HTML、プログラマー が JavaScript と担当者を分ける場合には便利なのかな。
 
@@ -71,7 +78,12 @@ HTML と JavaScript という技術単位で担当者を分ける場合、DOM
 ### JavaScript がシンプルになる
 HTML を煩雑にした代償としてなので、全体としての足し引きをどう考えるかだが。
 また、DOM 操作方式でも jQuery を直接使わずにライブラリ化すれば同程度にシンプルにできそうな気も。
--> https://github.com/froop/jquery-clone-template
+-> 試してみた https://github.com/froop/jquery-clone-template
+
+-> それ目的のライブラリも既にあった
+
+* PURE: http://beebole.com/pure/
+* Transparency: https://github.com/leonidas/transparency
 
 ### 単体テストがしやすい
 テキストベースで DOM に依存しないため、ブラウザ環境がなくもテストできる。

diff --git a/js-template-memo.md b/js-template-memo.md
@@ -71,6 +71,7 @@ HTML と JavaScript という技術単位で担当者を分ける場合、DOM
 ### JavaScript がシンプルになる
 HTML を煩雑にした代償としてなので、全体としての足し引きをどう考えるかだが。
 また、DOM 操作方式でも jQuery を直接使わずにライブラリ化すれば同程度にシンプルにできそうな気も。
+-> https://github.com/froop/jquery-clone-template
 
 ### 単体テストがしやすい
 テキストベースで DOM に依存しないため、ブラウザ環境がなくもテストできる。

diff --git a/js-template-memo.md b/js-template-memo.md
@@ -54,7 +54,7 @@ HTML ファイル内に非表示要素で静的テンプレートを用意し、
     var $item = $('#item-template .view').clone();
     $('.title', $item).text(model.get('title'));
     $('.done', $item).prop('checked', model.get('done'));
-    this.$el.append($item);
+    this.$el.empty().append($item);
 
 
 テンプレートエンジンの利点

diff --git a/js-template-memo.md b/js-template-memo.md
@@ -75,10 +75,6 @@ HTML を煩雑にした代償としてなので、全体としての足し引き
 ### 単体テストがしやすい
 テキストベースで DOM に依存しないため、ブラウザ環境がなくもテストできる。
 
-### サーバー側とテンプレートを共用できる
-DOM に依存しないため、HTML の生成をサーバー側でもクライアント側でもどちらでもできる。
-⇒ニーズある？
-
 
 テンプレートエンジンの欠点
 --------------------

diff --git a/js-template-memo.md b/js-template-memo.md
@@ -1,11 +1,11 @@
-JavaScript テンプレートエンジン vs DOM
+JavaScript テンプレートエンジン vs DOM 直接操作
 ====================
 
-backbone.js とかで Web ブラウザ 内の JavaScript で MVC してるサンプルとか読んでいると、
+Backbone.js とかで Web ブラウザ 内の JavaScript で MVC してるサンプルとか読んでいると、
 HTML の可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、
-わざわざテンプレートエンジン使ってテキストベースでやるよりも DOM を jQuery で操作した方が分かりやすいんじゃないかと思った。
+わざわざテンプレートエンジン使ってテキストベースでやるよりも DOM を jQuery で直接操作した方が分かりやすいんじゃないかと思った。
 
-デザイナーとプログラマーで担当を分ける場合には便利なのかな。
+デザイナーが HTML、プログラマー が JavaScript と担当者を分ける場合には便利なのかな。
 
 
 テンプレートエンジン方式
@@ -17,7 +17,7 @@ HTML ファイル内に非表示要素で動的テンプレートを用意し、
     <script type="text/template" id="item-template">
       <div class="view">
         <label><%- title %></label>
-        <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
+        <input type="checkbox" <%= done ? 'checked="checked"' : '' %> />
       </div>
     </script>
 
@@ -30,7 +30,7 @@ HTML ファイル内に非表示要素で動的テンプレートを用意し、
     }));
 
 
-DOM 操作方式
+DOM 直接操作方式
 --------------------
 HTML ファイル内に非表示要素で静的テンプレートを用意し、必要になったら clone() して DOM 要素として編集する。
 
@@ -39,7 +39,7 @@ HTML ファイル内に非表示要素で静的テンプレートを用意し、
     <div id="item-template" class="template">
       <div class="view">
         <label class="title"></label>
-        <input class="toggle" type="checkbox" />
+        <input class="done" type="checkbox" />
       </div>
     </div>
 
@@ -53,7 +53,7 @@ HTML ファイル内に非表示要素で静的テンプレートを用意し、
 
     var $item = $('#item-template .view').clone();
     $('.title', $item).text(model.get('title'));
-    $('.toggle', $item).prop('checked', model.get('done'));
+    $('.done', $item).prop('checked', model.get('done'));
     this.$el.append($item);
 
 

diff --git a/js-template-memo.md b/js-template-memo.md
@@ -53,7 +53,7 @@ HTML ファイル内に非表示要素で静的テンプレートを用意し、
 
     var $item = $('#item-template .view').clone();
     $('.title', $item).text(model.get('title'));
-    $('.toggle', $item).attr('checked', model.get('done'));
+    $('.toggle', $item).prop('checked', model.get('done'));
     this.$el.append($item);
 
 
@@ -92,7 +92,7 @@ HTML と JavaScript の担当者を分けている場合には、HTML 担当の
 HTML に異物が混じるので、コーディング時に HTML 単体をブラウザで表示しての確認がしづらい。
 
 ### ライブラリへの依存
-ライブラリの導入が必要だが、未だデファクトスタンダードと呼べるものがなく、不安定な基礎に依存する危険がある。
+ライブラリの導入が必要だが、未だデファクトスタンダードと呼べるものがなく、不安定な土台に依存する危険がある。
 
 ### 実行速度が遅い
 毎回テキストから要素を生成するので、ページ表示時に1度だけであとは clone する方式と比較するとだいぶ遅そう。

diff --git a/js-template-memo.md b/js-template-memo.md
@@ -10,7 +10,7 @@ HTML の可変部分はテンプレートエンジンの使用が推奨されて
 
 テンプレートエンジン方式
 --------------------
-HTML ファイル内に非表示要素でテンプレートを用意し、必要になったら取得してテキストとして編集する。
+HTML ファイル内に非表示要素で動的テンプレートを用意し、必要になったら取得してテキストとして編集する。
 
 ### HTML
 
@@ -32,7 +32,7 @@ HTML ファイル内に非表示要素でテンプレートを用意し、必要
 
 DOM 操作方式
 --------------------
-HTML ファイル内に非表示要素でテンプレートを用意し、必要になったら clone() して DOM 要素として編集する。
+HTML ファイル内に非表示要素で静的テンプレートを用意し、必要になったら clone() して DOM 要素として編集する。
 
 ### HTML
 
@@ -61,12 +61,12 @@ HTML ファイル内に非表示要素でテンプレートを用意し、必要
 --------------------
 
 ### HTML と JavaScript が疎結合になる
-インターフェイスが名前+値の集合のみとなるため、JavaScript が HTML の構造を意識する必要がなくなる。
-そのため、デザイン変更の影響が JavaScript に波及することが少なくなり、独立した作業がしやすい。
+インターフェイスが名前+値の集合のみとなるため、JavaScript が HTML を意識する必要がなくなる。
+そのため、デザイン変更の影響が JavaScript に波及することが少なくなり、独立して作業しやすい。
 
 ### 作業分担を柔軟にできる
-デザイナーとプログラマーで分担して作業する場合、DOM 操作方式だとデザイナーの担当は静的部分のみとなるが、
-テンプレートエンジン方式だと動的部分もデザイナーの担当に寄せられる。
+HTML と JavaScript という技術単位で担当者を分ける場合、DOM 操作方式だと HTML 担当は静的要素のみとなるが、
+テンプレートエンジン方式だと動的要素も HTML 担当に寄せられる。
 
 ### JavaScript がシンプルになる
 HTML を煩雑にした代償としてなので、全体としての足し引きをどう考えるかだが。
@@ -84,7 +84,9 @@ DOM に依存しないため、HTML の生成をサーバー側でもクライ
 --------------------
 
 ### 特殊な文法を理解する必要
-コーディングに新たな文法を追加することになり、理解する手間がかかる。
+コーディングに新たな文法を追加することになり、理解する手間がかかる。  
+HTML と JavaScript の担当者を分けている場合には、HTML 担当のデザイナーが文法を覚える必要があるが、
+それならいっそ JavaScript を覚えた方が将来につながるし良いかも...?
 
 ### HTML コーディング時の確認がしづらい
 HTML に異物が混じるので、コーディング時に HTML 単体をブラウザで表示しての確認がしづらい。
@@ -95,6 +97,6 @@ HTML に異物が混じるので、コーディング時に HTML 単体をブラ
 ### 実行速度が遅い
 毎回テキストから要素を生成するので、ページ表示時に1度だけであとは clone する方式と比較するとだいぶ遅そう。
 
-### 言語の利便性が低い
+### 言語の機能性が低い
 機能に乏しいテンプレート独自の言語を使って分岐とか繰り返しとかを制御するくらいなら、
 JavaScript + jQuery の方が多機能で便利だし、IDE の支援もある。
diff --git a/js-template-memo.md b/js-template-memo.md
@@ -1,13 +1,16 @@
 JavaScript テンプレートエンジン vs DOM
 ====================
 
-backbone.js とかで JavaScript ベースで MVC してるサンプルとか読んでいると、
-HTMLの可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、
-わざわざテンプレートエンジン使ってテキストベースでやるよりも DOM を直接操作した方が分かりやすいんじゃないかと思った。
+backbone.js とかで Web ブラウザ 内の JavaScript で MVC してるサンプルとか読んでいると、
+HTML の可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、
+わざわざテンプレートエンジン使ってテキストベースでやるよりも DOM を jQuery で操作した方が分かりやすいんじゃないかと思った。
+
+デザイナーとプログラマーで担当を分ける場合には便利なのかな。
+
 
 テンプレートエンジン方式
 --------------------
-HTML ファイル内に script タグ等でテンプレートを用意し、必要になったらテキストとして取得して編集する。
+HTML ファイル内に非表示要素でテンプレートを用意し、必要になったら取得してテキストとして編集する。
 
 ### HTML
 
@@ -27,9 +30,9 @@ HTML ファイル内に script タグ等でテンプレートを用意し、必
     }));
 
 
-DOM 直接方式
+DOM 操作方式
 --------------------
-HTML ファイル内に非表示要素でテンプレートを用意し、必要になったら DOM 要素のまま clone して編集する。
+HTML ファイル内に非表示要素でテンプレートを用意し、必要になったら clone() して DOM 要素として編集する。
 
 ### HTML
 
@@ -49,25 +52,49 @@ HTML ファイル内に非表示要素でテンプレートを用意し、必要
 ### JavaScript
 
     var $item = $('#item-template .view').clone();
-    $('label.title', $item).text(model.get('title'));
-    $('input.toggle', $item).attr('checked', model.get('done'));
+    $('.title', $item).text(model.get('title'));
+    $('.toggle', $item).attr('checked', model.get('done'));
     this.$el.append($item);
 
 
-テンプレートエンジンのデメリット
+テンプレートエンジンの利点
+--------------------
+
+### HTML と JavaScript が疎結合になる
+インターフェイスが名前+値の集合のみとなるため、JavaScript が HTML の構造を意識する必要がなくなる。
+そのため、デザイン変更の影響が JavaScript に波及することが少なくなり、独立した作業がしやすい。
+
+### 作業分担を柔軟にできる
+デザイナーとプログラマーで分担して作業する場合、DOM 操作方式だとデザイナーの担当は静的部分のみとなるが、
+テンプレートエンジン方式だと動的部分もデザイナーの担当に寄せられる。
+
+### JavaScript がシンプルになる
+HTML を煩雑にした代償としてなので、全体としての足し引きをどう考えるかだが。
+また、DOM 操作方式でも jQuery を直接使わずにライブラリ化すれば同程度にシンプルにできそうな気も。
+
+### 単体テストがしやすい
+テキストベースで DOM に依存しないため、ブラウザ環境がなくもテストできる。
+
+### サーバー側とテンプレートを共用できる
+DOM に依存しないため、HTML の生成をサーバー側でもクライアント側でもどちらでもできる。
+⇒ニーズある？
+
+
+テンプレートエンジンの欠点
 --------------------
 
 ### 特殊な文法を理解する必要
 コーディングに新たな文法を追加することになり、理解する手間がかかる。
 
 ### HTML コーディング時の確認がしづらい
-HTML に異物が混じるので、コーディング時に単体でブラウザで表示しての確認がしづらい。
+HTML に異物が混じるので、コーディング時に HTML 単体をブラウザで表示しての確認がしづらい。
 
-### ライブラリの導入が必要
-未だデファクトスタンダードと呼べるものがなく発展途上なので、不安定な基礎に依存する危険がある。
+### ライブラリへの依存
+ライブラリの導入が必要だが、未だデファクトスタンダードと呼べるものがなく、不安定な基礎に依存する危険がある。
 
 ### 実行速度が遅い
 毎回テキストから要素を生成するので、ページ表示時に1度だけであとは clone する方式と比較するとだいぶ遅そう。
 
-### 言語の利便性
-テンプレートの独自文法よりも、JavaScript で jQuery した方がずっと便利。JavaScript なら IDE の支援もあるし。
+### 言語の利便性が低い
+機能に乏しいテンプレート独自の言語を使って分岐とか繰り返しとかを制御するくらいなら、
+JavaScript + jQuery の方が多機能で便利だし、IDE の支援もある。
diff --git a/js-template-memo.md b/js-template-memo.md
@@ -22,8 +22,8 @@ HTML ファイル内に script タグ等でテンプレートを用意し、必
 
     var template = _.template($('#item-template').html());
     this.$el.html(template({
-      title : model.get('title')
-      done : model.get('done'),
+      title : model.get('title'),
+      done : model.get('done')
     }));
 
 

diff --git a/js-template.md → js-template-memo.md b/js-template.md → js-template-memo.md
@@ -2,7 +2,7 @@ JavaScript テンプレートエンジン vs DOM
 ====================
 
 backbone.js とかで JavaScript ベースで MVC してるサンプルとか読んでいると、
-HTMLの可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html)、
+HTMLの可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、
 わざわざテンプレートエンジン使ってテキストベースでやるよりも DOM を直接操作した方が分かりやすいんじゃないかと思った。
 
 テンプレートエンジン方式
@@ -29,7 +29,7 @@ HTML ファイル内に script タグ等でテンプレートを用意し、必
 
 DOM 直接方式
 --------------------
-HTML ファイル内に非表示要素でテンプレートを用意し、必要になったら DOM 要素のまま取得して clone する。
+HTML ファイル内に非表示要素でテンプレートを用意し、必要になったら DOM 要素のまま clone して編集する。
 
 ### HTML
 
@@ -68,3 +68,6 @@ HTML に異物が混じるので、コーディング時に単体でブラウザ
 
 ### 実行速度が遅い
 毎回テキストから要素を生成するので、ページ表示時に1度だけであとは clone する方式と比較するとだいぶ遅そう。
+
+### 言語の利便性
+テンプレートの独自文法よりも、JavaScript で jQuery した方がずっと便利。JavaScript なら IDE の支援もあるし。
diff --git a/js-template.md b/js-template.md
@@ -0,0 +1,70 @@
+JavaScript テンプレートエンジン vs DOM
+====================
+
+backbone.js とかで JavaScript ベースで MVC してるサンプルとか読んでいると、
+HTMLの可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html)、
+わざわざテンプレートエンジン使ってテキストベースでやるよりも DOM を直接操作した方が分かりやすいんじゃないかと思った。
+
+テンプレートエンジン方式
+--------------------
+HTML ファイル内に script タグ等でテンプレートを用意し、必要になったらテキストとして取得して編集する。
+
+### HTML
+
+    <script type="text/template" id="item-template">
+      <div class="view">
+        <label><%- title %></label>
+        <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
+      </div>
+    </script>
+
+### JavaScript
+
+    var template = _.template($('#item-template').html());
+    this.$el.html(template({
+      title : model.get('title')
+      done : model.get('done'),
+    }));
+
+
+DOM 直接方式
+--------------------
+HTML ファイル内に非表示要素でテンプレートを用意し、必要になったら DOM 要素のまま取得して clone する。
+
+### HTML
+
+    <div id="item-template" class="template">
+      <div class="view">
+        <label class="title"></label>
+        <input class="toggle" type="checkbox" />
+      </div>
+    </div>
+
+### CSS
+
+    .template {
+      display: none
+    }
+
+### JavaScript
+
+    var $item = $('#item-template .view').clone();
+    $('label.title', $item).text(model.get('title'));
+    $('input.toggle', $item).attr('checked', model.get('done'));
+    this.$el.append($item);
+
+
+テンプレートエンジンのデメリット
+--------------------
+
+### 特殊な文法を理解する必要
+コーディングに新たな文法を追加することになり、理解する手間がかかる。
+
+### HTML コーディング時の確認がしづらい
+HTML に異物が混じるので、コーディング時に単体でブラウザで表示しての確認がしづらい。
+
+### ライブラリの導入が必要
+未だデファクトスタンダードと呼べるものがなく発展途上なので、不安定な基礎に依存する危険がある。
+
+### 実行速度が遅い
+毎回テキストから要素を生成するので、ページ表示時に1度だけであとは clone する方式と比較するとだいぶ遅そう。