あるとイイね！なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。ただし、残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換（コンパイル）するための開発環境が必要です。そこで「CodePen」の出番ですよキミィ！CodePenなら開発環境なしでこれらの代替言語をお手軽体験できるんです！片っ端から体験した記事を下記にまとめます。それではいってみまSHOW！
【目次】
- 【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め
- 【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め
- 【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め
- まとめ
【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め
まず最初にCodePenで設定を変更する方法を解説しています。
※参考：CodePenはこちら
https://codepen.io
CodePenではHTMLの代替言語として「Emmet」「Haml」「Markdown」「Slim」「Pug」に対応しており、その記法の違いと感想を書きました。
なお、「Emmet」「Markdown」はHTMLテンプレートエンジンではありません。Emmetはテキストエディタによく搭載されている拡張機能で、Markdownはブログによく設定されている拡張機能です。
- Emmet：テキストエディタの拡張機能。コードが書きやすい
- Markdown：ブログの拡張機能。文章が書きやすい。*1
「Haml」「Slim」「Pug」がHTMLテンプレートエンジンです。
- Haml：先発テンプレートエンジン（Ruby環境）
- Slim：Hamlよりシンプル。（Ruby環境）
- Pug：Hamlよりシンプル。（Node.js環境）
※参考：【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め - クモのようにコツコツと
【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め
お次はAltCSS。CSSをシンプルにする代替言語です！
CodePenでは「LESS」「SCSS」「Sass」「Stylus」「PostCSS」に対応しており、その記法の違いと感想を書きました。
ざっくりまとめると下記のような感じです。
- CSSと似た書き方でより便利に書きたい→LESS、SCSS。
コンパイルをNodeで行いたい→LESS。
いや、Rubyで行いたい→SCSS。 - コンパイルはRuby。さらに書き方も全てRubyライクでスタイリッシュに行きたい！→Sass
- いろんな書き方をフレキシブルに混在させたい。 →Stylus
または他の人が作ったCSSを修正することになった。→Stylus - 次世代CSSがどのような書き方になるか体験したい。 →PostCSS
- みんなが作った豊富なプラグインを体験したい（jQueryやWordPress的なシェア文化）→PostCSS
詳しくはこちらをどうぞ！
※参考：【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め - クモのようにコツコツと
【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め
最後、AltJSを見ていきまShow！JSをシンプルにする代替言語たちです。
CodePenでは「CoffeeScript」「LiveScript」「TypeScript」「Babel」に対応しており、その記法の違いと感想を書きました！
ざっくりまとめるとこんな感じ。
- Rubyライクに書きたいよ→ CoffeeScript
- さらに関数型を駆使したいよ→ LiveScript
- JSライクでいいけど型を厳密にしたいよ。classも定義したいよ→ TypeScript
- ブラウが最新ESに対応するまで待ちきれないよ→ Babel
詳しくはこちらをどうぞ！
※参考：【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め - クモのようにコツコツと
まとめ
全体に共通する要点は下記だと思う。
- Rubyっぽく書きたいか？
- フロント言語っぽい書き方のまま楽がしたいか
前者はサーバサイドがバックボーンなエンジニアさんが「新しい書式の学習コスト無しにフロントエンドをいじりたい」という需要から生まれたんじゃないかな？
WebデザイナーにとってはRuby記法は逆に学習コストになる。ただ、将来サーバサイドでRybyでWebアプリを作ってみたい人は逆にここで慣れていくと入りやすいのかもしれないですね！
便利な代替言語たちですが実際に使おうと思うと、その前に開発環境の構築が必要です。そのため、ついつい腰が重くなってしまう人は多いと思う。（そう、私もだw）
まずはCodePenで経験をしてみて「うん、これは環境構築してでも採用する価値があるな！」と感じたらガッツリ取り組むのがいいと思います。
それではまた！
*1:このはてなブログもマークダウン対応！楽チンです♪
