フロントエンドなプリプロセッサ・テンプレートエンジンまとめ

はじめに

最近は業務においても生のhtmlやcssを書く機会が少なくなりました。また、JavaScriptもいわゆるaltjs系といわれるものが次々に開発されています。

また、以前はサーバ・サイドのフレームワークのテンプレート・エンジンとして使用されることがほとんどだったものも、今ではスタティックなサイトやアプリケーションを生成するジェネレータに多く取り入れられていたりします。

このエントリーは、そのようなテンプレート・エンジンや、プリプロセッサ、alternate javascriptを大胆にもいっしょくたにまとめた、自分向けのメモです。

がっつり試したものもあれば、やんわりと触っただけのものもありますが、リストアップしてみたいと思います。

テンプレート・エンジン / マークアップ言語

jade

Jade

Node Template Engine

jadeは、Hamlに影響を受けてつくられたテンプレート・エンジン / マークアップ言語です。 NodeのMVCフレームワーク、expressの現在の標準テンプレートエンジンでもあります。

インストールと基本的な使い方

インストールするにはNodeが必要です。 Nodeをインストール後、npmを使ってjadeをインストールします。

npm install -g jade

jadeはインデントで階層を表現します。 例えば、次のような書き方です。

!!!
html
  head
    body
      div#test

      ul
        for item, index in ['one','two','three']
            li(id="content-#{item}") List#{item}

これを拡張子に.jadeをつけて保存します。そしてコンパイル・コマンドを叩きます。

jade index.jade

上記のように、オプションなしでコンパイル行うと、同階層にindex.htmlが生成されます。

<!DOCTYPE html><html><head><body><div id="test"></div><ul><li id="content-one">Listone</li><li id="content-two">Listtwo</li><li id="content-three">Listthree</li></ul></body></head></html>

その際は、改行やスペースを削除して圧縮された状態で出力されます。--prettyオプションをつけてコンパイルすると圧縮なしで出力されます。

また、ファイル監視の機能もあり、--watchオプションをつけると監視モードに入ります。 これはファイルが保存されたタイミングでコンパイルが実行されます。

参考リンク

Haml

Haml

Beautiful,DRY,well-indented,clear markup:tempting haiku.

htmlを生成するためのマークアップ言語です。フレームワーク上でのテンプレートエンジンとしても使われます。 インデントと簡略構文を使って表現するのが特徴です。インストールするにはRubyが必要です。

基本的な使い方

hamlを書く上で重要なのはインデントです。例えば下記のように記述したものを保存します。拡張子は.hamlです。

!!!
%html
  %head
    %body
      %div#test

      %ul
        -(1..10).each do |i|
            %li(id="content-#{i}") List#{i}

コンパイル・コマンドを打ちます。htmlコマンドにコンパイルするファイルと出力するファイルを指定するだけです。

haml test.haml test.html

すると

<!DOCTYPE html>
<html>
<head>
  <body>
    <div id='test'></div>
    <ul>
      <li id='content-1'>List1</li>
      <li id='content-2'>List2</li>
      <li id='content-3'>List3</li>
      <li id='content-4'>List4</li>
      <li id='content-5'>List5</li>
      <li id='content-6'>List6</li>
      <li id='content-7'>List7</li>
      <li id='content-8'>List8</li>
      <li id='content-9'>List9</li>
      <li id='content-10'>List10</li>
    </ul>
  </body>
</head>
</html>

sassも使えます

%head
  :sass
    $color : green
    $width : 100%
    div#success
      :width $width
      :color $color

%div#success
  %p success

すると

<head>
  <style>
    div#success {
      width: 100%;
      color: green; }
  </style>
</head>
<div id='success'>
  <p>success</p>
</div>

コマンドひとつでコンパイルされます。

ただし、実際に使用して開発をする場合は、コンパイラツールが搭載されているフレームワークや、ツールを使用しながら、自動コンパイルをしつつ確認していくことが多いかと思います。

インデントの数は揃っていれば指定がないようですが、自分てきには半角スペース2つくらいがちょうど良いと感じました。

ライセンス

ライセンスはMITライセンスです。

Liquid

Liquidは、jekyllなどに使用されているテンプレートエンジンです。 PHPのテンプレートエンジン、smartyのような記法を使用することができます。

{{変数名}}

{{% if hoge %}}
    foo
{{% endif %}}

mustache

Mustache

名前は「口ひげ」という意味で、PUNCHのデフォルトのテンプレートエンジンです。

ロジックレステンプレートと書いてある通り、非常にシンプルです。また様々な言語での実装が用意されています。

参考リンク

handlebars

Handlebars

mustacheと互換性があるテンプレートエンジンで、フレームワークmeteorで使用されているテンプレートエンジン。

参考リンク

marked

markdownパーサです。

インストールと基本的な使い方

npmでインストールします。Nodeをインストール後、実行してください。

npm install -g marked

コンパイル

markdownで記述されたファイルを用意します。ここではtest.mdという名前で保存しました。

# this is Mamoida's Blog

## markdown

- 1
- 2
- 3

markedコマンドでコンパイルします。-oオプションで出力ファイルパスを指定します。

marked test.md -o test.html

コンパイルされました。

<h1>this is Mamoida&#39;s Blog</h1>
<h2>markdown</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

参考リンク

mdpress

Mdpress

マークダウンをプレゼンテーションファイルに変換してくれるツールです。

インストールと基本的な使い方

Rubyをインストール後、gemでインストールします。

gem install mdpress

マークダウンファイルを用意して、コンパイルします。

# this is Mamoida's Blog

## markdown

- 1
- 2
- 3 

mdpress test.md

testディレクトリが生成され、html、css、javascriptのファイルが生成されました。

参考リンク

CSSプリプロセッサ

sass

Sass

style with attitude

おそらくもっとも利用者の多いであろう(あくまで自分の予想です)CSSプリプロセッサ。 特にSCSSは既存のcssがそのまま使えるため、一番導入しやすいものではないかと思います。

インストール

Rubyをインストール後、gemを使ってインストールします。

gem install sass

記法

2013年5月現在Sassはバージョン3で、Sass記法とSCSS記法があり、それぞれ拡張子が.sassと.scssになります。

以前のバージョンのsass記法、現在のバージョンのsass記法、SCSS記法はそれぞれ書き方が違うのですが、SCSS従来のCSSの書き方に近い感じで、もともとCSSをさわっていた人は入りやすいような気がします。

フレームワーク・ライブラリ

フレームワーク的な機能満載のcompassや、軽量なmixinライブラリとしてBourbonなどがあります。

参考リンク

LESS

Less

The dynamic stylesheet language.

モダン・ブラウザ、またはNode、Rhinoで動作するCSSプリプロセッサです。 Twitter Bootstrapが使っていることでも有名です。

インストールと基本的な使い方

Nodeのnpmでインストールします。

npm install -g less

プリコンパイルする

拡張子をlessにして保存します。

@color:red;

body{
    color:@color;
}

.min-height(@height){
    min-height:@height;
    height:!important;
    height:@height;
}

#header{
    .min-height(180px);
}

lesscコマンドにlessファイルパス、出力ファイルパスを渡します。

lessc style.less style.css

コンパイルされました。

body {
  color: #ff0000;
}
#header {
  min-height: 180px;
  height: !important;
  height: 180px;
}

ブラウザで使う場合

htmlファイルからlessファイルにリンク、less.jsを読み込みます。(サンプルはjadeのコンパイル前です)

!!!
head
    link(rel="stylesheet/less",href="test.less")
    script(src="less-1.3.3.min.js")
body
    #header
        h1 this is header
    #content
        p content

lessファイルの読み込みにはXHRを利用しているようなので、Webサーバ上でしか動作しません。 余談ですが、SublimeText2のSublimeServerを使うとお手軽にWebサーバを立ち上げられます。

参考リンク

Stylus

Stylus

Expressive,dynamic,robust CSS

{}をつけたSCSSのような記法、インデントをつけた記法など、非常に柔軟な記法がサポートされています。

インストールとコンパイル方法

インストールはNodeのnpmで行います。

npm install stylus

コンパイルはstylusコマンドでおこないます。

stylus test.styl

拡張子はstylかstylusになります。

非常に柔軟

例えば、ひとつのファイルの中の記法が混ぜこぜのバラバラのファイル

// test.styl

color-text = #999
color-main = #ff0000

body
    color color-text
    border 1px solid color-main

#container{
    color:color-text
}

#footer
    color color-main

h1
    text-decoration none

こんなファイルでも、stylusだとコンパイルが通ります。 stylusコマンドでコンパイルをしてみると

stylus test.styl

ちゃんとできました。

body {
  color: #999;
  border: 1px solid #f00;
}
#container {
  color: #999;
}
#footer {
  color: #f00;
}
h1 {
  text-decoration: none;
}

ライブラリ

Stylusに対応したライブラリとして、nibがあります。

参考リンク

ROOLE

Roole

A language that compiles to CSS

JavaScript製のCSSプリプロセッサ。Nodeでも、ブラウザでも動くようです。

インストールと基本的な使い方

ブラウザで使用する場合は通常のscriptタグで使用します

<script src="/path/to/roole.js"></script>

Nodeの場合はnpmです。

npm install roole -g

コマンドラインでプリコンパイルする例

例として、下記のように記述して保存します。拡張子は.rooです。

body{
    color:red;

    h1{
        font-size:20px;
    }
}

コンパイルはrooleコマンドでおこないます。

roole style.roo

コンパイルされました。

body {
    color: red;
}
    body h1 {
        font-size: 20px;
    }

ブラウザでダイナミックにコンパイルする例

htmlにroole.jsを読み込みます。(例はJadeでのコンパイル前です)

!!!
head
    link(rel="stylesheet/roole",href="style.roo")
    script(src="roole.js")

body
    h1 This is test
    p test test

ただし、rooファイルの読み込みにXHRを使っているようですので、Webサーバ上で実行しないと確認できません。 また、読み込むまでの間、一瞬、スタイルが効いていない状態が見えてしまいますので、プリコンパイルのほうが良いのかと感じました。

参考リンク

alternate javascript

CoffeeScript

CoffeeScript

DocumentCloudのJeremy Ashkenas氏によって開発された言語。

インデント型の構文です。

インストールとHello

Nodeをインストールしたら、npmを使ってインストールします。

nom install -g coffee-script

Hello的なものです。こちら拡張子をcoffeeにして保存します。 = ->は関数を表します。

hello = ->
    console.log "Hello World!"

hello()

引数を渡すときは、、、

hello  = (msg) ->
    console.log msg

hello('Ha Ha Ha')

JSにコンパイルせず実行する場合はオプションなしでcoffeeコマンドを使います。

coffee hello.coffee

コンパイルする場合は-c、または–compileオプションをつけます。

coffee -c hello.coffee

コンパイルされました。

// Generated by CoffeeScript 1.6.2
(function() {
  var hello;

  hello = function() {
    return console.log("Hello World!");
  };

  hello();

}).call(this);

参考リンク

TypeScript

Typescript

Starts from JavaScript, Ends with JavaScript

Microsoftが開発したaltjsです。静的型付けをしてくれます。 また、JavaScriptのスーパーセットなので、既存のJSからの移植がしやすい、またJavaScriptを知っていれば学習しやすい(と思っています)言語です。

インストールはNodeのnpmです。

npm install -g typescript

クラス生成の例です。拡張子は.tsにして保存します。

class Dog{
    x:number = 0;
    name:string;

    constructor(name:string){
        this.name = name;
    }

    walk(){
        this.x += 2;
        console.log(this.x);
    }
}

var taro = new Dog('taro');
taro.walk();

tscコマンドを使うとコンパイルできます。-eオプションをつけてコンパイルするとシェルで即時に実行されます。また-sourcemapオプションをつけるとソースマップが出力されます。

tsc dog.ts -e // 2
tsc dog.ts -sourcemap // dog.js.mapが出力される

デフォルトでは同階層にJavaScriptのファイルが出力されます。

var Dog = (function () {
    function Dog(name) {
        this.x = 0;
        this.name = name;
    }
    Dog.prototype.walk = function () {
        this.x += 2;
        console.log(this.x);
    };
    return Dog;
})();
var taro = new Dog('taro');
taro.walk();

TypeScript playgroundではブラウザ上でTypeScriptを試すことができます。

参考リンク

JSX

JSX

a faster,safer,easier JavaScript

DeNAが開発したaltjsです。Javaの構文に似ているクラス、インターフェイスなどの機能をもつオブジェクト指向で、静的型付けです。 大規模な開発に向いている仕様となっているようです。

拡張子はjsxです。

ちなみにAdobeのPhotoshopなどをスクリプティングするJavaScriptファイルの拡張子もjsxですが、おそらく別物かと思います。。。。

インストールとHello

Nodeのnpmでインストールできます。

npm install -g jsx

Helloしてみるとこうなります。

class _Main{
    static function main(args : string[]) : void{
        log 'Hello World';
    }
}

コンパイル

JavaScriptにコンパイルするにはjsxコマンドを使います。 –enable-source-mapオプションをつけるとソースマップも出力されます。

jsx --output test.js test.jsx
jsx --enable-source-map --output test.js test.jsx

参考リンク

Dart

Dart

A new language, with tools and libraries, for structured web app engineering

Googleによって開発されたaltjsです。クラスベースのオブジェクト指向でオプショナル静的型付けなどなどが特徴です。またJavaScriptにコンパイルする際にコードが最適化されるようです。

インストール

公式サイトから各OS用のファイルがダウンロードできます。 コマンドラインツールのDart SDKDart EditorDartium(ChromiumにDart VMが入ったもの)などが梱包されています。

コンパイル

まずはDart SDKのdart2jsにパスを通します。 拡張子をdartにしてプログラムを書きます。 以下、コンソールにHelloするだけのプログラムです。

main() {
    var msg = 'Hello World'; 
    print('$msg dart'); 
}

コンパイルしてみます。

dart2js test.dart

コンパイルされると、out.jsという、元の書いた量のわりに、めっちゃ長いファイルが出力されます。 またout.js.mapという名前でソースマップファイルも同時に出力されます。

参考リンク

HAXE

Haxe

One language,every where

HAXEが開発した汎用的なプログラミング言語です。標準化が中止されたECMAScript4(ActionScript3で実装されているもの)に類似しています。JavaScriptのみならず、Adobe FlashやJava、PHPなど様々な言語にコンパイルすることができます。

インストールとHello

公式サイトからインストーラがダウンロードできます。

エントリーポイントになるクラスをつくります。拡張子はhxにして保存します。

class Hello{
    static function main(){
        trace("Hello World");
    }
}

コンパイル用のhxmlファイルを作成します。ここではcompile.hxmlとしました。

-main Hello
-js Hello.js

hxmlファイルのパスを指定してhaxeコマンドを叩くとコンパイルされます。

haxe compile.hxml

参考リンク

まとめ

。。。てか、npmやgemでインストールするものが多かったですねー。

まさに、フロントエンド・エンジニア(ex マークアップ・エンジニア)の目を向けるべき技術の範囲がどんどん広くなっているような気がします。

(この先深くさわったり、いじいじしたものは、ぼちぼち追加・加筆していきたいと思います。)

参考記事