HamlだのMarkdownだのSlimだのJadeだのSassだのSCSSだのLESSだのStylusだのCoffeeScriptだのLiveScriptだのTraceurだの一体なんなのよ!?

長いタイトルですがつまりそういうことです。主にCODEPENで使えるHTML/CSS/JavaScriptのテンプレートエンジンとかプリプロセッサとか軽量プログラミング言語とかをまとめてみました。後半尻すぼみになってる感は否めません。

【2015年12月23日追記】

Googleトレンドの使い方を間違ってた部分があったので1年ぶりに訂正しました。トレンドも2015年11月までの最新にしてみました。

HTML関連

人気順

いきなりですがGoogleのトレンドを調べてみました。最初にこれを頭に入れておくと良いんじゃないかと思います。2010年10月から2015年11月までの期間です。

Haml

HTML Abstraction Markup Languageの略でHTMLのテンプレートエンジンです。要はHTMLを簡単に書けますよってことです。Rubyのフレームワークの一部として利用できるのが便利らしいです。今のところ使わないのでこれ以上書きません。ただHamlは後で紹介するSassの記法の元になってたりします。

Markdown

軽量マークアップ言語です。ものすごくお世話になってます。このブログはHexoっていう静的サイトジェネレーターを使ってますが、Hexoでは投稿記事をMarkdownで書きます。この記事もMarkdownで書いてます。例えばこんな感じです;

### [Markdown](http://ja.wikipedia.org/wiki/Markdown)
 
軽量マークアップ言語です。ものすごくお世話になってます。このブログは[Hexo](http://hexo.io)っていう静的サイトジェネレーターを使ってますが、Hexoでは投稿記事をMarkdownで書きます。この記事もMarkdownで書いてます。例えばこんな感じです;

###のところがh3タグになります。[]()の最初の[]の中に何か文字を、次の()にアドレスを入れるとリンクを貼ることができます。aタグに早変わりってわけです。めっちゃ便利です。QiitaにQiita – Markdown記法 チートシート – Qiitaっていう投稿があるので、書き方を忘れたときに見るとほぼほぼ解決します。

Slim

RubyのHTMLテンプレートエンジンです。これも手間なくHTMLファイルがつくれますよっていうやつです。Hamlと同様に、単にHTMLを簡便に書くためにじゃなくてRubyと組み合わせて使わないとありがたみがないと思います。

Jade

HamlやSlimはRubyのHTMLテンプレートエンジンですが、JadeはJavaScriptのNode.jsで実装されたテンプレートエンジンです。なのでインストールするときはRubyのgemじゃなくてnpmです。Node.jsが出てからはサーバサイドもJavaScriptで開発できるようになったので、どうせ覚えるならHamlやSlimよりJadeかなぁというのが個人的な感想です。

GitHubのリポジトリの説明にあるサンプルコードはこんな感じです;

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple templating language with a
        strong focus on performance and powerful features.

これがHTMLになると

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Jade is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

に生まれ変わります。Jadeのファイル拡張子は.jadeです。そのままですね。

EJS

ついでにEJSです。Embedded JavaScriptの略で、これもNode.jsのHTMLテンプレートエンジンです。Hexoがビルトインで提供しているテンプレートエンジンの一つで、あともう一つはSwigです。一応HexoではプラグインをインストールするとHamlとJadeにも対応するようになってます。基本的にはHTMLと同じ書き方をしますが、<% %>で囲まれたに部分JavaScriptを書くとそれを実行してくれて、<%= %>でJavaScriptを囲むとその実行結果をHTMLに加えてくれます。

おまけ

HTMLのテンプレートエンジンは色々ありますが、基本的にはRubyやJavaScriptと組み合わせて使わないと威力を発揮しないと思います。単にHTMLを速く楽に書きたい、というのであればEmmetというプラグインをエディタにインストールするのが最善だと思います。Coda 2もvimもSublimeTextもEmmnetプラグインがちゃんとあります。昔はZen Codingという名前だったそうです。

例えばvimでHTMLを書く場合、emmnet-vimをインストールしていると

div>ul>li

と書いた後に<Ctrl+Y>,(Ctrlキーを押しながらYを押してそのあとにカンマを入力する)と打つと

<div>
  <ul>
    <li></li>
  </ul>
</div>

が一瞬で表示されます。emmnetだけで作業が3倍速くなります。赤い彗星になれます。

CSS関連

人気順

HTMLのテンプレートエンジンと同様、2010年10月から2015年11月までの期間の人気度の動向です;

Sass

Syntactically Awesome Stylesheetsの略で、CSSファイルを作ってくれるプリプロセッサです。別の言語(Sassの場合はCSS)を生成する言語、いわゆるメタ言語です。Rubyで実装されているのでgemでインストールします。CSSでは普通のプログラミング言語のように変数を使ったりループを使ったりネスト(入れ子にすること)させたりということはできません。でもSassならそれができます。Sassのコンパイラをプラグインとしてエディタにインストールしておくと、Sassファイルを保存するたびにCSSファイルを勝手に作ってくれます。ミックスインと継承がとっても強力で便利です。あと//で1行コメント文が付けれるというのがめっちゃありがたいです。

Sassには書き方が2通りあります。ブラケット{}のありなしとセミコロン;ありなしです。ブラケットもセミコロンもつけない場合は.sassという拡張子をつけます。ブラケットとセミコロンをつけて見た目をCSSに近づけたものは.scssという拡張子をつけます。scssという拡張子がついてるのにブラケットとセミコロンをつけていないとコンパイルエラーになります。

SCSS

Sassの説明ですでにでてきましたが、Sassの機能をもたせつつなおかつ見た目をCSSに近づけたSassの記法です。Sassy CSSの略らしいです。普通SassというとこのSCSSを指します。ネットでググるとたいてい「Sass (SCSS)」とか「Sass (主にSCSS)」って感じで書かれたりします。

WikipediaにあるSCSSの例がこれです;

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}
 
li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

これをコンパイルすると

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}
 
li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}

に生まれ変わります。SCSSだとtable.h1の中にtd.lnがネストされて書かれているのがわかると思います。これは実際使ってみるとめちゃめちゃ便利です。SCSSで書くのを覚えると素のCSSで最初から書くとか勘弁してくれってなります。

LESS

Sassと対をなすCSSプリプロセッサです。SassがSCSSを導入するきっかけになったものらしいです。基本的にはSassと同じように変数、ネスト、ミックスイン等が使えます。//での一行コメントもあります。一番の大きな特徴はJavaScriptで実装されているために、Node.jsが入っていればサーバサイドでも使えて、なおかつJavaScriptを使ってクライアントサイドで動的にCSSを生成できる点です。動的にCSSを生成するとその分処理が重くなるのでそういう使い方をする場面は限られるかもしれませんが。

公式ページに載っているサンプルです;

@base: #f938ab;
 
.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

コンパイルするとこれになります;

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

SCSSだと変数に$をつけますが、LESSだと@をつけます。

Stylus

SassやLESSと同じくCSSのメタ言語、CSSプリプロセッサです。Node製なのでnpmでインストールします。SassやLESSよりも後発なのでその分イイトコ取りしてあって機能は豊富です。第3の選択肢ってところでしょうか。

JavaScript関連

人気順

2010年10月から2015年11月までの期間の人気度の動向です;

CoffeeScript

ここまでくるとCoffeeScriptが何者なのか想像できると思います。そうです、コンパイルすることでJavaScriptファイルを作れる軽量言語です。ファイル拡張子は.coffeeです。functionが矢印で置き換えられたり、インデントで構造を表現したりします。例えば

$(document).ready(function() {
  // 初期化のためのコード
});

はCoffeeScriptで書くと

$(document).ready ->
  # 初期化のためのコード

みたいになります。

LiveScript

書いてもどうせ人気ないので書きません。CoffeeScriptを拡張した感じ、らしいです。

Traceur

Google謹製のトレーサーコンパイラです。簡単にいうと、未来から来たJavaScriptです。せっかく覚えるならCoffeeScriptやLiveScriptよりこのTraceurがいいんじゃないかと思います。traceur-compiler 入門 – from scratchあたりを読むと雰囲気がつかめるんじゃないでしょうか。

2015年12月23日追記

去年は何もわからず『せっかく覚えるならTraceurがいいんじゃないか』みたいなことを書いてましたが、何もわからずによくもまぁこんなことを書いてたなぁと反省してます。2015年12月現在ならやっぱりBabelでES2015(ES6)じゃないでしょうか。ES2015で導入されたアロー関数式

Array.from( ( elm, idx, arr ) => {
    ...
});

でthisのレキシカルな束縛もできるようになりましたし、今更CoffeeScriptを覚えるありがたみってほとんどないんじゃないかと思います。

あと、Angular2(AngularJSの次期バージョン)を使っていくのならTypeScriptは欠かせなくなるような気がします。AngularのドキュメントもTypeScriptがメインみたいな扱いになっていますから。

まとめ

HTMLとCSSに関してはRubyと組み合わせるならSlimとSCSSを、JavaScriptと組み合わせるならJadeとLESSでって感じなんでしょうか。 ~~あとは今のうちにTraceurをちょこちょこ覚えていけばいいのかな。~~ JavaScriptに関してはES2015と、Angular使うならTypeScriptかな。