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

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

ただいまの
回答率

90.47%

  • Backbone.js

    48questions

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

  • Underscore.js

    37questions

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

  • jade

    35questions

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

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 1,352

HSG

score 29

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

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

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

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

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

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

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


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

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

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

とかいかがでしょう
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

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 16:18

    ありがとうございます!

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

    Jadeも気になります!

    キャンセル

0

jadeを薦めます。静的なhtmlファイルの生成というのが利用目的であれば。

ejs (nodejs)
slim (ruby)
jade (nodejs)

後者になるほど略語が多く、表現が簡潔になりますが、htmlに慣れた人間であれば違和感があるので、学習コストが必要です。
ただ、その分強力で、例えばjadeであればコンテンツの外側だけ定義したあと、中側だけ書けばhtmlをバンバン量産できるようになるので、静的html量産と言うのであれば、slimかjadeになるでしょう。

下記は単純なgruntでのjadeの利用方法です。

tree . -L 1
# .
# ├── package.json
# ├── gruntfile.js
# ├── _outer.jade
# └── inner.jade

package.json
{
  "name": "jade-task",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-jade": "^0.15.0"
  }
}

gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    jade: {
      options: {
        pretty: true,
        data: {
          title: 'hello jade!',
          items: [
            {title:'foo',description:'Lorem ipsum dolor sit amet',url:'#'},
            {title:'bar',description:'Lorem ipsum dolor sit amet',url:'#'},
            {title:'baz',description:'Lorem ipsum dolor sit amet',url:'#'},
            {title:'beep',description:'Lorem ipsum dolor sit amet',url:'#'},
            {title:'boop',description:'Lorem ipsum dolor sit amet',url:'#'},
          ]
        }
      },
      source: {
        expand: true,
        cwd: '.',
        src: '**/!(_)*.jade',
        dest: 'dist',
        ext: '.html'
      }
    } 
  });

  grunt.loadNpmTasks('grunt-contrib-jade');

  grunt.registerTask('default', ['jade']);
};

_outer.jade
doctype html
html
  head
    meta(charset="UTF-8")
    title= title
  body
    header
      h1= title

    main
      yield

    footer
      | 2015 foo-bar-baz All right reveresd

inner.jade
include _outer.jade
  each item in items
    section
      h2= item.title
      p= item.description

      footer
        a(href=item.url)

タスクを実行すると、以下のhtmlがdist/inner.htmlとして生成されます。

npm install
# node_modules
# ├── grunt
# └── grunt-contrib-jade

grunt
# Running "jade:source" (jade) task
# >> 1 file created.
# Done, without errors.

tree dist
# dist
#└── inner.html

dist/inner.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>hello jade!</title>
  </head>
  <body>
    <header>
      <h1>hello jade!</h1>
    </header>
    <main>
      <section>
        <h2>foo</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <footer><a href="#"></a></footer>
      </section>
      <section>
        <h2>bar</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <footer><a href="#"></a></footer>
      </section>
      <section>
        <h2>baz</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <footer><a href="#"></a></footer>
      </section>
      <section>
        <h2>beep</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <footer><a href="#"></a></footer>
      </section>
      <section>
        <h2>boop</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <footer><a href="#"></a></footer>
      </section>
    </main>
    <footer>2015 foo-bar-baz All right reveresd</footer>
  </body>
</html>

タスクはこちらの記事(【jade】テンプレートエンジンjadeを使ってみるメモ - 導入編(gruntからのjadeコンパイルでhtml変換) - tweeeetyのぶろぐ的めも)を参考にしました。
ちなみに、ejsjadeの創案者はTJ Holowaychuk氏です

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/31 16:22

    ありがとうございます!

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • Backbone.js

    48questions

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

  • Underscore.js

    37questions

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

  • jade

    35questions

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