Edited at

速習テンプレートSlim(HTML作成編)

More than 5 years have passed since last update.


テンプレートエンジンSlimを使ってスマートにHTMLを作成する

昨日うちの事務所で開催したagatsuma.survive#02の中でSlimの説明が思ったよりも好評だったので改めてまとめてみます。

このエントリでは Slimを使ってHTMLを作成する ことだけを目的としているため、動的にSlimでゴニョゴニョするような話は出て来ません。HTMLの代替にSlimを使う、といった主旨の内容です。プログラムの話も出て来ませんが、残念ながらコマンドラインを少し使います。


Slim とは?


  • 拡張子は .slim

  • view の構文を本質的な部品まで減らすことを目指したテンプレート言語

  • Ruby製のテンプレートエンジン

  • 高速, 軽量

  • インデント重要


用途


  • Railsプロジェクトのテンプレート

  • Sinatra(Padorino)のテンプレート

  • HTMLの代替(個人的には)


SlimでHTMLを作成するメリット


  • タイプ数が減る

  • HTML に比べ見通しが良い

  • 実はそんなに難しくない


Slim環境の用意

SlimはRubyのgemとして配布されています。Rubyが入れてあれば、コマンドラインからgemをインストールするだけです。

gem install slim

もしRubyが入っていない場合には、頑張って入れてください。Mac/LinuxであればRVMやrbenvといった便利なツールがあります。

gemのインストールが完了したら次のコマンドを実行しましょう。

slimrb --help

slimrbコマンドのオプション一覧が表示されれば問題ありません。

先述のコマンドのとおり、Slimで使うコマンドはslimrbです。SlimをHTMLに変換するには次のコマンドを叩きましょう。

slimrb -p path/to/sample.slim > path/to/converted_sample.html

-pはslimrbコマンドのオプションで読みやすいHTML(改行有り)を出力してくれます。


Slimの書き方

まず、次のHTMLとSlimを比較してみましょう。


sample.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Sample File</title>
</head>
<body class="sample">
<div id="contents">
<h1>Sample File</h1>
<img alt="yterajima" src="http://www.e2esound.com/images/yterajima.jpg" />
<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト
テキストテキストテキスト</p>
</div>
</body>
</html>


sample.slim

doctype html

html
head
meta charset="utf-8"
title Sample File
body.sample
#contents
h1 Sample File

img src="http://www.e2esound.com/images/yterajima.jpg" alt="yterajima"

p テキストテキストテキスト

p
| テキストテキストテキスト
テキストテキストテキスト


Slimはインデントを用いてHTMLの入れ子を表現します。このインデントの深さは自由に決めることができます。今回はRubyらしく2スペースで書いています。


Slimの簡単な覚え方


  1. 通常のHTMLから <, >, /> を取り除く

  2. doctype

  3. テキストと | (パイプ)の扱い

  4. コメント


1. 通常のHTMLから<, >, />を取り除く

これは読んでそのままです。例に上げたsample.slimの10行目、imgタグを見てください。

<img alt="yterajima" src="http://www.e2esound.com/images/yterajima.jpg" />

<!-- Slimの場合

img src="http://www.e2esound.com/images/yterajima.jpg" alt="yterajima"

-->

何が変わったかと言えば, <と/>が無くなっただけです。他のタグでも同様に書き直すとSlimとしてパースすることができます。

また、idとclassを表すショートカットとして、CSSの表記のように #. が使用できます。デフォルトではこのショートカットだけで表記した場合、div id="", div class=""になります。


2. doctype

sample.slimの1行目、doctype htmlはHTML文書のドキュメントタイプを表しています。この表記方法についてはSlimのREADME(日本語版)にまとめてあるので参照してください。XML宣言を記述することも可能です。


3. テキストと | (パイプ)の扱い

HTMLのタグの中に書く通常のテキストの扱いには若干のルールがあります。

まず、簡単なものはタグの後にスペースを置いて表記する方法です。sample.slimであればh1タグの

後や最初のpタグの後に続く書き方です。

h1 Sample File

p テキストテキストテキスト

スペース後のテキストがそのままHTMLタグの中身になります。少々ややこしいのは複数行のテキストを書く場合です。その場合には | を使います。

p

| テキストテキストテキスト
テキストテキストテキスト

p
|
テキストテキストテキスト
テキストテキストテキスト

|以降にある文字列、インデントされた文字列はすべてテキストとして扱われます。


4. コメント

Slimのコメントには変換後出力されるコメントとされないコメントの2種類があります。

/ このコメントは変換後表示されない

/! このコメントは変換後HTMLコメントになる


まとめ

HTMLの作成のみを目的とするなら、この程度のことを覚えれば実用できるかなと思います。その他の機能の詳細やRubyコードの扱いについては日本語版READMEを参照してください。


その他


  • Sass/Scss, Less等のCSSプリプロセッサと組み合わせる場合にはMiddlemanを使うと便利です。

  • syntax対応してるエディタが少ないのが辛いところ