クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事)

あるとイイね!なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。ただし、残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換(コンパイル)するための開発環境が必要です。そこで「CodePen」の出番ですよキミィ!CodePenなら開発環境なしでこれらの代替言語をお手軽体験できるんです!片っ端から体験した記事を下記にまとめます。それではいってみまSHOW!

【目次】

【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め

まず最初にCodePenで設定を変更する方法を解説しています。

※参考:CodePenはこちら
CodePen - Front End Developer Playground & Code Editor in the Browser

CodePenではHTMLの代替言語として「Emmet」「Haml」「Markdown」「Slim」「Pug」に対応しており、その記法の違いと感想を書きました。

なお、「Emmet」「Markdown」はHTMLテンプレートエンジンではありません。Emmetはテキストエディタによく搭載されている拡張機能で、Markdownはブログによく設定されている拡張機能です。

Haml」「Slim」「Pug」がHTMLテンプレートエンジンです。

  • Haml:先発テンプレートエンジン(Ruby環境)
  • Slim:Hamlよりシンプル。(Ruby環境)
  • Pug:Hamlよりシンプル。(Node.js環境)

※参考:【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め - クモのようにコツコツと

idr-zz.hatenablog.com

【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
  • みんなが作った豊富なプラグインを体験したい(jQueryWordPress的なシェア文化)→PostCSS

詳しくはこちらをどうぞ!

※参考:【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め - クモのようにコツコツと

idr-zz.hatenablog.com

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 事始め - クモのようにコツコツと

idr-zz.hatenablog.com

まとめ

全体に共通する要点は下記だと思う。

  • Rubyっぽく書きたいか?
  • フロント言語っぽい書き方のまま楽がしたいか

前者はサーバサイドがバックボーンなエンジニアさんが「新しい書式の学習コスト無しにフロントエンドをいじりたい」という需要から生まれたんじゃないかな?

WebデザイナーにとってはRuby記法は逆に学習コストになる。ただ、将来サーバサイドでRybyでWebアプリを作ってみたい人は逆にここで慣れていくと入りやすいのかもしれないですね!

便利な代替言語たちですが実際に使おうと思うと、その前に開発環境の構築が必要です。そのため、ついつい腰が重くなってしまう人は多いと思う。(そう、私もだw)

まずはCodePenで経験をしてみて「うん、これは環境構築してでも採用する価値があるな!」と感じたらガッツリ取り組むのがいいと思います。

それではまた!

*1:このはてなブログもマークダウン対応!楽チンです♪