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月までの期間です。現在から過去5年間の期間だとこうなります。
z
Haml
HTML Abstraction Markup Language の略で HTML のテンプレートエンジンです。要は HTML を簡単に書けますよってことです。Ruby のフレームワークの一部として利用できるのが便利らしいです。今のところ使わないのでこれ以上書きません。ただ Haml は後で紹介する Sass の記法の元になってたりします。
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 です。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月までの期間の人気度の動向です。過去5年間はこちらのリンクから確認できます。
Sass
Syntactically Awesome Stylesheets の略で、CSS ファイルを作ってくれるプリプロセッサです。別の言語（Sass の場合は CSS）を生成する言語、いわゆるメタ言語です。Ruby で実装されているので gem でインストールします。CSS では普通のプログラミング言語のように変数を使ったりループを使ったりネスト（入れ子にすること）させたりということはできません。でも Sass ならそれができます。Sass のコンパイラをプラグインとしてエディタにインストールしておくと、Sass ファイルを保存するたびに CSS ファイルを勝手に作ってくれます。ミックスインと継承がとっても強力で便利です。あと // で１行コメント文が付けれる というのがめっちゃありがたいです。
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月までの期間の人気度の動向です。過去5年間はこちらです。；
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 かな。