の紹介ではございません。
現在 jsテンプレートエンジンの導入を考えていますが、
・学習コスト 低い
・5〜10ページ程度のサイト構築
・ある程度(それぞれだと思いますが)融通が利くやつ
で考えているんですが、下記のどれがよさそうでしょうか。
■EJS
■Jade
■backborn
■Handlebars
■Mustache
■Underscore
■JsRender
■Hogan
精査しきれていないので、テンプレートエンジンから外れてるものもあるかもです。
ECTなんか、ETCっぽくてどうかなと思いつつ、実際検証するとエラー箇所が見えそうで見えなくて辛かったり。
あと、gulpじゃなくgruntなんかで簡単に動いたりすると惚れます。
---追記---
みなさま回答いただけないんで、、、
とりあえず個人的解決を。
チームに導入の敷居はあるが、バリバリカスタマイズするなら
・gruntとECT
チームに導入の敷居が低くて、且つ簡単な要素でページを大量に作るなら
・gruntとエクセルデータとMustache
とかいかがでしょう
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
**jadeを薦めます。**静的なhtmlファイルの生成というのが利用目的であれば。
後者になるほど略語が多く、表現が簡潔になりますが、htmlに慣れた人間であれば違和感があるので、学習コストが必要です。
ただ、その分強力で、例えばjadeであればコンテンツの外側だけ定義したあと、中側だけ書けばhtmlをバンバン量産できるようになるので、静的html量産と言うのであれば、slimかjadeになるでしょう。
下記は単純なgruntでのjadeの利用方法です。
bash
1tree . -L 1 2# . 3# ├── package.json 4# ├── gruntfile.js 5# ├── _outer.jade 6# └── inner.jade
package.json
json
1{ 2 "name": "jade-task", 3 "devDependencies": { 4 "grunt": "^0.4.5", 5 "grunt-contrib-jade": "^0.15.0" 6 } 7}
gruntfile.js
javascript
1module.exports = function(grunt) { 2 grunt.initConfig({ 3 jade: { 4 options: { 5 pretty: true, 6 data: { 7 title: 'hello jade!', 8 items: [ 9 {title:'foo',description:'Lorem ipsum dolor sit amet',url:'#'}, 10 {title:'bar',description:'Lorem ipsum dolor sit amet',url:'#'}, 11 {title:'baz',description:'Lorem ipsum dolor sit amet',url:'#'}, 12 {title:'beep',description:'Lorem ipsum dolor sit amet',url:'#'}, 13 {title:'boop',description:'Lorem ipsum dolor sit amet',url:'#'}, 14 ] 15 } 16 }, 17 source: { 18 expand: true, 19 cwd: '.', 20 src: '**/!(_)*.jade', 21 dest: 'dist', 22 ext: '.html' 23 } 24 } 25 }); 26 27 grunt.loadNpmTasks('grunt-contrib-jade'); 28 29 grunt.registerTask('default', ['jade']); 30};
_outer.jade
jade
1doctype html 2html 3 head 4 meta(charset="UTF-8") 5 title= title 6 body 7 header 8 h1= title 9 10 main 11 yield 12 13 footer 14 | 2015 foo-bar-baz All right reveresd
inner.jade
jade
1include _outer.jade 2 each item in items 3 section 4 h2= item.title 5 p= item.description 6 7 footer 8 a(href=item.url)
タスクを実行すると、以下のhtmlがdist/inner.html
として生成されます。
bash
1npm install 2# node_modules 3# ├── grunt 4# └── grunt-contrib-jade 5 6grunt 7# Running "jade:source" (jade) task 8# >> 1 file created. 9# Done, without errors. 10 11tree dist 12# dist 13#└── inner.html
dist/inner.html
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>hello jade!</title> 6 </head> 7 <body> 8 <header> 9 <h1>hello jade!</h1> 10 </header> 11 <main> 12 <section> 13 <h2>foo</h2> 14 <p>Lorem ipsum dolor sit amet</p> 15 <footer><a href="#"></a></footer> 16 </section> 17 <section> 18 <h2>bar</h2> 19 <p>Lorem ipsum dolor sit amet</p> 20 <footer><a href="#"></a></footer> 21 </section> 22 <section> 23 <h2>baz</h2> 24 <p>Lorem ipsum dolor sit amet</p> 25 <footer><a href="#"></a></footer> 26 </section> 27 <section> 28 <h2>beep</h2> 29 <p>Lorem ipsum dolor sit amet</p> 30 <footer><a href="#"></a></footer> 31 </section> 32 <section> 33 <h2>boop</h2> 34 <p>Lorem ipsum dolor sit amet</p> 35 <footer><a href="#"></a></footer> 36 </section> 37 </main> 38 <footer>2015 foo-bar-baz All right reveresd</footer> 39 </body> 40</html>
タスクはこちらの記事(【jade】テンプレートエンジンjadeを使ってみるメモ - 導入編(gruntからのjadeコンパイルでhtml変換) - tweeeetyのぶろぐ的めも)を参考にしました。
ちなみに、ejsとjadeの創案者はTJ Holowaychuk氏です
投稿2015/10/31 06:58
編集2015/10/31 07:00総合スコア452
0
テンプレートエンジンという括りにしていいのかわかりませんが、AngularJSまたはReactはどうでしょうか?
AngularJS
HTMLをそのままテンプレートとして使用します。どういうことかというと、HTML部分は本当にそのまま表示できるHTMLです。変数などにして動的に変えたい部分や繰りかえしなどの操作がある要素に、{{...}}
で囲ったり、属性などを付与し、ロジックがあるJavaScriptから操作していきます。View部分のHTMLがJavaScriptから完全に分離されているため、テンプレートのHTMLだけでデザインが確認できるというのが利点です。
React
各要素をコンポーネントとして、JavaScript上で動的にHTMLを構築するというものです。なんかが変わる度に構築していたら遅くなるのではと思うかも知れませんが、そこはうまい工夫をしているので通常のDOM操作よりも極端に遅いなんて事は無く、場合によっては早いことがあります。HTMLのタグとかはJSXというものを使うことで、HTMLのように書くことができます。
※ JSXは必須ではありません。また、JSXはBabelに含まれており、公式にBabelを使うことが推奨されています。
なお、上二つとは別に選ぶなら、個人的にはJadeをお勧めしておきます。<...>
といちいちタグ書いたり、書き忘れそうな終了タグに注意しなくてもいいのはかなりの利点です。Jadeは他言語にもライブラリが揃っており、移植や流用がしやすいというのもあります。
投稿2015/10/31 02:39
総合スコア21733
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/31 07:22