やっぱり○○が好き（フロントエンド）

最近はBabelやSass案件ばかりですが、個人的にはもっと速く開発できる選択肢があると思っているので、そのまとめ。

Sass → Stylus

• 公式

1. 透過的に変数とミックスインが使える（もちろん非透過的にも使える）
2. gulp不要でnpm scriptだけでAuto Prefixingが行える（kouto-swiss併用）
3. タイプ数が一番少ない
4. Ruby由来ではなくNode発祥（作者はExpressの人）

Sassに比べるとエディタの補完機能が弱いけど、トータルで見た場合の時間的な差がばかにならないくらい大きい。（自分比）

stylus

@import "components/*"

.foo
  clear fix
  line-height narrow

Babel → Coffee

• 公式

1. コンパイルに際してサポートブラウザを引き上げたりすることがない（自分たちがサポートしたいブラウザを自由に選べる）
2. セミコロンが要らない
3. 後置ifやunless文が利用でき、読みやすいコードが書ける
4. ファットアローだけではなく、シングルアローも使える
5. 結局みんなES5を出力している

とっととJS（ES5）を納品して、Coffee飲みに行きたい

coffee

unless isNessesary then return

doSomething = ()->
  console.log('No need semi-colons')

HTML手書き → Pug

• 公式

1. 記述量が半分で済む
2. 閉じタグ忘れとかのドジがない
3. 出力時の拡張子を変更できる（.tx他）
4. 変数とミックスインが使えるので、プログラマブル
5. 複雑なHTMLを静的に出力できるので、SEOに強い

もとはJadeだったのに、改名を余儀なくされてかわいそう

pug

- var $ = "block"

input(type="checkbox" class=$+"__element" name="foo" value="1")

以上です

出力結果を担保するので、手段はその時その時で最短なもので走り去りたい。コンパイル先を同一階層の同名出力にしておけば、後日これらをなかったことにもできる。uglify前のHTMLとJSとCSSを残しておけば、未来の担当者がリバースエンジニアリングもできる。

爆速で改修できるのに、ノロノロ運転もったいない