質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Backbone.js

Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。

jade

Jade(ジェイド)は、Hamlに影響を受けて開発されたJST(JavaScript Templates)のひとつです。Node.jsで動かすことができます。

Underscore.js

Underscore.jsは、JavaScriptのためのユーティリティライブラリです。JavaScriptの関数・配列、オブジェクトを扱う際に度々発生する処理がメソッドとしてまとめられています。他のライブラリに依存しないため、稼働中のアプリケーションにも導入可能です。

Q&A

2回答

3024閲覧

おすすめテンプレートエンジン

HSG

総合スコア41

Backbone.js

Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。

jade

Jade(ジェイド)は、Hamlに影響を受けて開発されたJST(JavaScript Templates)のひとつです。Node.jsで動かすことができます。

Underscore.js

Underscore.jsは、JavaScriptのためのユーティリティライブラリです。JavaScriptの関数・配列、オブジェクトを扱う際に度々発生する処理がメソッドとしてまとめられています。他のライブラリに依存しないため、稼働中のアプリケーションにも導入可能です。

0グッド

2クリップ

投稿2015/09/22 05:24

編集2022/01/12 10:55

の紹介ではございません。

現在 jsテンプレートエンジンの導入を考えていますが、

・学習コスト 低い
・5〜10ページ程度のサイト構築
・ある程度(それぞれだと思いますが)融通が利くやつ

で考えているんですが、下記のどれがよさそうでしょうか。

■EJS
■Jade
■backborn
■Handlebars
■Mustache
■Underscore
■JsRender
■Hogan

精査しきれていないので、テンプレートエンジンから外れてるものもあるかもです。
ECTなんか、ETCっぽくてどうかなと思いつつ、実際検証するとエラー箇所が見えそうで見えなくて辛かったり。

あと、gulpじゃなくgruntなんかで簡単に動いたりすると惚れます。

---追記---
みなさま回答いただけないんで、、、
とりあえず個人的解決を。

チームに導入の敷居はあるが、バリバリカスタマイズするなら
・gruntとECT

チームに導入の敷居が低くて、且つ簡単な要素でページを大量に作るなら
・gruntとエクセルデータとMustache

とかいかがでしょう

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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のぶろぐ的めも)を参考にしました。
ちなみに、ejsjadeの創案者はTJ Holowaychuk氏です

投稿2015/10/31 06:58

編集2015/10/31 07:00
horse_n_deer

総合スコア452

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HSG

2015/10/31 07:22

ありがとうございます! なるほどですね!Jade人気ですね。 ファイル構成や繰り返し箇所の構文などECTと似た感じなんですね。 Jadeの記法が楽そうで良いですね! 深くググってみます!
guest

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

raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HSG

2015/10/31 07:18

ありがとうございます! なるほどですね!AngularJSはバリデートくらいしかやったことないので、無知のReactと共に知識を深めてみようと思います! Jadeも気になります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問