Help us understand the problem. What is going on with this article?

速習テンプレート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対応してるエディタが少ないのが辛いところ
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away