Tech Sketch Bucket of Technical Chips by TIS Inc.

HamlとSlimをMiddleman上で比較する

Pocket

昨今の開発ではHTMLをそのまま記述するのではなく、簡潔に記述する為のテンプレートエンジンを利用することが多いと思います。今回はHamlとSlimというテンプレートエンジンを、Middlemanという開発サーバーツールを利用して比較していきます。

HamlとSlimとは?

haml.jpgslim.jpg

HamlSlim はHTMLを生成するためのテンプレートエンジンです。
HTMLをそのまま記述するのと比べ、インデントや簡略構文によって簡潔な記述が行えるのが特徴です。

HamlはRuby On Railsなどのプロジェクトで利用している方も多いと思いますが、Slimは聞きなれない方もいるのではないでしょうか?
※Ruby On Railsで利用するにはそれぞれ、 haml-railsslim-rails というgemを追加する必要があります

以下でHamlとSlimについて、サンプルコードを用いて比較していきます。
また、今回比較するに際して Middleman というツールを開発用のローカルサーバとして利用します。

Middlemanとは?

Middlemanは、静的なWebサイト作成に便利な機能を提供するコマンドラインツールです。
有志の方 によって日本語ドキュメント化されていますので、気になった方はそちらをご参照ください。

Middlemanガイド(日本語版)

今回は詳細な説明は省きますが、middlemanには様々なテンプレートエンジンへの対応、静的ファイルへのビルド、css,jsのminify、プレビューサーバなど便利な機能が揃っています。
Haml/Slim, CoffeeScript , Sass などを利用して静的サイトを構築する場合は効果が高そうですし、利用する価値有りでしょう。

middleman.jpg

環境の準備

まずはMiddlemanのインストールから行います。
※MiddlemanのインストールにはRubyとRubyGemsが必要です。

Middlemanのインストール

インストールが完了すると以下のコマンドが使えるようになります。

  • middleman init : 新規プロジェクトのスケルトン作成
  • middleman server : プレビューサーバ起動
  • middleman build : 静的サイトのビルド

プロジェクトの作成

比較用に新規プロジェクトのスケルトンを作成します。

プロジェクトを作成すると、以下の構成が出来上がります。

表示の確認

スケルトンが作成されたので、現在の状態をMiddlemanのプレビューサーバの機能を使い確認してみます。

  • プレビューサーバの起動
http://localhost:4567 にアクセスすると、以下が表示されることが確認できます。

middleman_is_watching.jpg

比較の為にHaml,Slim用のファイルを作成、修正

テンプレートを利用せずにスケルトンを作成すると、デフォルトのテンプレートエンジンであるERBで作成されます。
ERBは、Rubyのスクリプトが書けること以外はほぼそのままのHTMLです。

今回は記法を比較する為に自身でHaml、Slim用のファイルを作成し、以下の通りの構成にしました。

また、slimを利用する為にgemをインストールする必要があります。
以下の通りGemfileに依存関係を追加し、bundle installしました。
※執筆時点でのslimの最新バージョンは1.3.6です

テンプレートエンジンの比較

全体的な記法の違いをざっくりとまとめましたので、以下でHamlとSlimの記法の違いを比較してみてください。
上段が記法で、下段がサンプルになります。
この後、サンプルコードを元にもう少し詳しく説明をしていきます。





Haml
Slim
タグ
%
記号不要
%h1 h1
id,class
指定
id:"#" class:"."
id:"#" class:"."
#content .p Hoge #content .p Hoge
属性
{}, ()
{}, (), [], 無し
%input{:type=>"text", :disabled=>false} %input(type="text" disabled) input{type="text" disabled=false} input(type="text" disabled) input[type="text" disabled=false] input type="text" disabled=false
閉じタグ
なし
/
/
img src="image.png"/ img src="image.png"/
テキスト
記号不要
|
%p How are you? p | How are you?
コメント
/, -#
/!, /
/ このコメントはHTMLコメントとして出力されます -# このコメントは出力されません /! このコメントはHTMLコメントとして出力されます / このコメントは出力されません
フィルタ
:
:
:ruby puts "Hello Ruby!" ruby: puts "Hello Ruby!"
コードの
実行
-
-
- if articles.empty? No inventory - if articles.empty? | No inventory
DOCTYPE
!!!
doctype
!!! XML !!! 5 !!! !!! Mobile doctype xml doctype html doctype transitional doctype mobile


まずはレイアウトファイルから比較していきます。
レイアウトは全てのテンプレートに共通するような処理を記述します。
サンプルコードのレイアウトファイルは、生成された状態からそれぞれのフォーマットに合わせ修正した程度です。

少ない記述量ですが、ERBファイルと比べHamlやSlimは余計な括弧や閉じタグが無く簡潔に記述出来ているのが分かると思います。

Hamlは%で始まるタグと半角空白2つのインデントが重要な意味を持ちます。
インデントによってタグの終端を判断する為、閉じタグの記述が不要になります。
SlimはHamlから%を抜いたような記法です。Hamlと同様に半角空白2つのインデントに意味を持ちます。

DOCTYPE宣言はHamlでは"!!!"で、Slimでは"doctype"と記述します。

その他、HamlとSlimとではプロパティの設定の仕方やイコールの数が異なっています。
Hamlのプロパティの設定方法はRubyのHashの形式になっており、普段からRubyを使用している人にとっては馴染みやすいのではないでしょうか。

ちなみに、インデントには注意が必要ですが、HamlもSlimも文中にHTMLを記述することも可能です。

以下で、もう少し具体的な記法の違いをサンプルコードを元に見ていきます。
ERB、Haml、Slimのそれぞれで、ほぼ同様のコードを記述しています。

ERB

  • "---"で囲まれた部分はYAMLです。レイアウトファイルでデータを読込、titleを表示します
  • "<%"、"<%="、"%>"で囲まれた部分はRubyのコードです
    • Ruby部分のコードでは、Hashのmonthsが空でなければHashのキーと値を全て表示する処理を行なっています
  • Javascript部分は、ul#fruitsにli要素を"いちご"という値で追加する処理を行なっています

表示確認

erb_sample.png

Haml

  • タグを省略するとdivになるので、.welcomeは

に変換されます

  • %div.welcomeと記述しても同様に変換されます
  • Hamlではclassは"."で、idは"#"で指定します
  • コメントの記法は2種類あり、"/"を記述した場合はHTML生成時にコメントとして出力され、"-#"と記述した場合はHTML生成時にコメントとして残りません
  • アンカータグは、%a(href='http://hoge.com/' title='Hoge')リンク文字 の形式で記述します
    • リンクにする文字を改行して記述したい場合は、以下のように"<"を末尾に追加します
  • rubyやjavascriptなどを記述したい場合は、Filterを利用します。:ruby、:javascriptと記述することで、それぞれの言語で記述することが出来るようになります
  • 先頭に"-"を付けることでコードの実行、評価を行うことができます

表示確認

haml_sample.png

Slim

  • Slimのclass、id指定はHamlと同様です
  • Hamlと同様コメントの記法は2種類あり、"/!"を記述した場合はHTML生成時にコメントとして出力され、"/"と記述した場合はHTML生成時にコメントとして残りません
  • アンカータグは、a href="http://hoge.com" title='Hoge' リンク文字 の形式で記述します
    • Hamlと比較し、括弧も少なく記述できます
  • コードの実行、評価は、Hamlと同様に先頭に"-"を付けることで可能です

表示確認

slim_sample.png

まとめ

ここまでHamlとSlimの記法について比較してきましたが、筆者はSlimの方が%を書かないで済む分好みです。
ただ、執筆時点でのgithub上のstarとforkの数はHamlの方が若干優勢ですし、感覚的にもHamlの方がドキュメントや情報が多いように感じます。

starfork
Haml
Slim


個人的な意見ですが、とにかく短い記述量で書きたい方にはSlim、実績やドキュメントの豊富さを重視するのであればHamlが良いように思います。

HamlやSlim以外にも、node.js向けのJadeや、SlimをPython向けに作成したPlimなど、様々なテンプレートエンジンが存在し、生のHTMLを記述する機会が減ってきています。
既にERBやHTMLで書いてしまっている場合でも以下の様な変換サイトがありますので、利用してみるのも手です。

今回紹介したテンプレートエンジンの記法にはそれぞれ大きな差異はありません。Hamlを覚えればSlimにもすぐ馴染めると思いますし、その逆も同様だと思います。
まだHamlやSlimなどのテンプレートエンジンを利用したことの無い方は、この機会に利用をはじめてみてはいかがでしょうか。

エンジニア採用中!私たちと一緒に働いてみませんか?