REVIEW（12/10/15）

　「OrangeBits Compiler」は、「WebMatrix」に「LESS」「Sass/SCSS」「CoffeeScript」のリアルタイム変換（コンパイル）機能を追加する拡張機能。「WebMatrix」v2.0に対応するフリーソフトで、「WebMatrix」の“拡張機能ギャラリー”からインストール可能。“WebMatrix Gallery”からもダウンロードできる。

　近年、Webサイト・Webアプリのデザインはますます高度化し、スタイルシート（CSS）やスクリプト（JavaScript）のサイズは肥大化の一途をたどっている。にも関わらず、CSSやJavaScriptは全体の見通しや再利用性を考慮したソースコードの記述が比較的困難で、大規模な開発にはあまり向いていない。

　そのような弱点を克服するため、さまざまな拡張メタ言語が考案されてきた。CSSにおける「LESS」や「Sass/SCSS」、JavaScriptにおける「CoffeeScript」が有名で、先日、Microsoftによって発表された「TypeScript」もそのような言語の一種だと言える。

　このような言語は大規模開発だけでなく、個人レベルで利用しても非常に便利。たとえば「LESS」を利用すれば、CSSで“変数”“ネスト（入れ子）”“ビルトイン関数”“ミックスイン（Mixins）”などが利用できるようになる。

　変数を利用すれば、CSSのあちこちで利用されている色やサイズといった値を1カ所にまとめて定義しておけるので、あとから値を変更したいといった場合にも対応が容易。また、ネストを利用すれば冗長になりがちなCSSのソースコードをより簡潔に表現できる。まずは、このような自分が使ってみて便利だと思える機能から少しずつ学習していけばよいだろう。

　そのほかにも、演算子やビルトイン関数を利用した簡単な値の計算は、要素の幅やマージンを算出したり、テーマカラーから明るさや彩度を変えたバリエーションを作る場合に便利。また、スタイルを関数のように定義しておけるミックスインは、ベンダープレフィックス（-moz-や-webkit-など）がついたスタイルをまとめておくのに役立つ。これらが使いこなせれば、複雑なCSSであっても驚くほどシンプルに記述できるはずだ。

　記述した「LESS」ファイル（.less）は、保存時に「OrangeBits Compiler」がバックグラウンドで自動的にCSSファイル（.css）へ変換してくれる。HTMLで利用する場合は、この自動変換されたCSSファイルを“link”タグで関連づければよい。「Sass/SCSS」や「CoffeeScript」も同様にして利用可能。このようなコンパイル処理はサーバーやクライアント（Webブラウザー）で実行されることが多いが、開発時に処理してしまえばそのどちらにも負担をかけずに済む。

　そのほかにも、CSS/JavaScriptのMinify（空白・改行などを削除するなどして軽量化すること）や、JPEG/PNGイメージの画質を落としてファイルサイズを縮小する最適化機能も備える。ファイルサイズを抑えれば、サーバー負荷の改善やWebページの表示にかかる時間の短縮が期待できるというわけだ。