1. SIS Lab
  2. >
  3. Blog
  4. >
  5. テンプレートエンジン?eRuby、Haml/Sass、Slimってなによ?

テンプレートエンジン?eRuby、Haml/Sass、Slimってなによ?

更新日:2018.07.28 作成日:2011.12.15

いろいろ紛らわしい、名前が多いから調べてみた。

eRubyって?

JavaでいうJSP, それがRubyだとeRuby

  • eRuby: 任意のテキストファイルに Ruby スクリプトを埋め込む書式の仕様
  • eruby: 前田修吾さん作の eRuby の C による実装
  • ERB: 関将俊さん作の eRuby の Ruby による実装
  • ERb: ERB が標準添付になる前のバージョン (ERb と ERbLight があった)

標準添付ライブラリ紹介 【第 10 回】 ERB

Haml/Sassって?

Haml

HamlはHTMLを生成するためのマークアップ言語。

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

Sass

SassはCSSを生成するためのメタ言語。

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Slimって?

Hamlをもっと簡潔にしたもの。みたい。

doctype html
html
  head
    title Slim Core Example
    meta name="keywords" content="template language"

  body
    h1 Markup examples

    div id="content" class="example1"
      p Nest by indentation

      == yield

      - unless items.empty?
        table
          - for item in items do
            tr
              td = item.name
              td = item.price
      - else
        p
         | No items found.  Please add some inventory.
            Thank you!

    div id="footer"
      | Copyright 〓 2010 Andrew Stone

    = render 'tracking_code'

    javascript:
      $(content).do_something();

テンプレートシステム

ちなみにYAMLは?

YAML (YAML Ain’t Markup Language) とは、構造化されたデータを表現するためのフォーマット。

ちなみにSlim3は?

GoogleAppEngineに最適化されたJavaフレームワーク

ほんと紛らわしいよね?

スポンサーリンク

Related contents

TECH

2011.12.14

InstagramのAPIを叩く

TECH

2017.06.25

[Ruby]mapメソッドの省略記法

TECH

2017.06.24

[Ruby]Moduleの使い方

TECH

2016.06.05

google-api-ruby-clientからGoogle Adsense Management APIを操作する方法

TECH

2016.02.10

slack-apiを利用してRubyからSlackへメッセージとファイルをポストする方法

TECH

2015.03.27

数世代バージョンを持つファイル名から最新版以外を抽出する

TECH

2014.12.13

Jekyllのタグとカテゴリを整理するために、一覧表示するWebアプリ(個人用)をつくった

TECH

2013.05.18

sqlite3-rubyを使ってSQLite3ファイルからの検索結果をHashとして読み込む