Sass, Haml, CoffeeScript… あらゆるテンプレートエンジンを自動変換する便利ツール『Prepros』

Webサイトを作るとき、HTMLとCSSファイルを直接弄ってコーディングしてますか？それはもしかすると、テンプレートエンジンを使ってもっと楽をするべきかもしれませんよ。

■テンプレートエンジンとは

HTML, CSS, JavaScript等をはじめとした、プログラミング言語のソースコードを、本来よりも短い記述で表現し、開発の効率を高めることができるものの事です。

例えば、僕がこのブログのリニューアルテーマをコーディングする時に使っているJadeエンジンでは…

このような、よくあるHTMLのソースコードを

こんな感じで、かなり簡略化して記述することができます。

 テンプレートエンジンを使えば、ただ単にソースコードを簡略化するだけではなく、変数を代入したり、繰り返し処理をしたり、計算処理をしたりといった様々な恩恵を得ることができます。

■テンプレートエンジンの敷居

テンプレートエンジンには様々な種類があります。書き方はもちろん、導入方法もコンパイルも、エンジンそれぞれの使い方に合わせなければなりません。HTMLやCSSの記述を効率化したいのに、そのためのコンパイル作業が面倒だったら本末転倒です。

■そこでおすすめしたいのが『Prepros』

Preprosは、各テンプレートエンジンのソースコード（***.jade、***.sass）を自動で監視し、HTMLやCSSに自動変換してくれるという優れもの。

フリーで、Windows、Mac両方に対応していて、難しい事前処理も一切無し。インストールして、監視したいプロジェクトを指定するだけです。

凄いことに、Sass, LESS, Stylus, Jade, Haml, Slim, CoffeeScript, LiveScript, Javascript, Markdown など、主要なテンプレートエンジンを網羅しています。

さらに、自動ブラウザリロード機能まで付いているので、ライブコーディングのような事もできます。

 UIもシンプルでクールなので、ドキュメントなどを使わなくても、少し触るだけで使い勝手がわかると思います。

より効率の良い開発のために、是非とも検討してみてください。

公式サイト: Prepros（ダウンロードはこちらから）

※この記事は著者の参加する共同ブログ campus-note.com からの引用です。