Skip to content

Instantly share code, notes, and snippets.

@froop froop/js-template-memo.md
Last active Apr 13, 2019

Embed
What would you like to do?
JavaScript テンプレートエンジン vs DOM 直接操作

JavaScript テンプレートエンジン vs DOM 直接操作

Backbone.js とかで JavaScript で MVC してるサンプルとかを読んでいると、 HTML の可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、 サーバー側と違ってクライアント側では DOM 操作ができるので、わざわざテンプレートエンジン使ってテキストベースでやるよりも、 DOM を jQuery で直接操作した方が分かりやすいんじゃないかと思った。

デザイナーが HTML、プログラマー が JavaScript と担当者を分ける場合には便利なのかな。

[追記] テンプレートエンジンにはテキストベースのもの (Underscore.js template, Mustache など) だけではなく、DOM ベースのもの (PURE, Transparency など) もあるようなので、その場合は当てはまらない。なので、当記事はテキストベースのテンプレートエンジンについての記述。

[追記] 同様の考察

テンプレートエンジン方式

HTML ファイル内に非表示要素で動的テンプレートを用意し、必要になったら取得してテキストとして編集する。

HTML

<script type="text/template" id="item-template">
  <div class="view">
    <label><%- title %></label>
    <input 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 ファイル内に非表示要素で静的テンプレートを用意し、必要になったら clone() して DOM 要素として編集する。

HTML

<div id="item-template" class="template">
  <div class="view">
    <label class="title"></label>
    <input class="done" type="checkbox" />
  </div>
</div>

CSS

.template {
  display: none
}

JavaScript

var $item = $('#item-template .view').clone();
$('.title', $item).text(model.get('title'));
$('.done', $item).prop('checked', model.get('done'));
this.$el.empty().append($item);

テンプレートエンジンの利点

HTML と JavaScript が疎結合になる

インターフェイスが名前+値の集合のみとなるため、JavaScript が HTML を意識する必要がなくなる。 そのため、デザイン変更の影響が JavaScript に波及することが少なくなり、独立して作業しやすい。

作業分担を柔軟にできる

HTML と JavaScript という技術単位で担当者を分ける場合、DOM 操作方式だと HTML 担当は静的要素のみとなるが、 テンプレートエンジン方式だと動的要素も HTML 担当に寄せられる。

JavaScript がシンプルになる

HTML を煩雑にした代償としてなので、全体としての差し引きをどう考えるか。 また、DOM 操作方式でも jQuery を直接使わずにライブラリ化すれば同程度にシンプルにできそう。

-> 試してみた https://github.com/froop/jquery-dom-tmpl

-> それ目的のライブラリも既にいろいろあった

単体テストがしやすい

テキストベースで DOM に依存しないため、ブラウザ環境がなくもテストできる。 -> 結果テキストを解析する手間を考えると、結局は DOM に変換した方が楽な気がする

テンプレートエンジンの欠点

特殊な文法を理解する必要

コードに新たな文法を追加することになり、理解する手間が増える。
デザイナーとプログラマーを分けている場合には、デザイナーが文法を覚える必要があるが、 それならいっそ JavaScript を覚えた方が将来につながるし良いかも...?

HTML コーディング時の確認がしづらい

HTML に異物が混じるので、コーディング時に HTML 単体をブラウザで表示しての確認がしづらい。

ライブラリへの依存

ライブラリの導入が必要だが、未だデファクトスタンダードと呼べるものがなく、不安定な土台に依存する危険がある。

実行速度が遅い

毎回テキストから要素を生成するので、clone 方式がページ表示時に1度だけなことと比較するとだいぶ遅そう。

言語の機能性が低い

機能に乏しい独自言語を使って分岐とか繰り返しとかを制御するくらいなら、 JavaScript + jQuery の方が多機能で便利だし、IDE の支援もある。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.