SassやLESSを覚えたことでCSSはいい感じに書いているのにHTMLはEmmetでガリガリ書いていたので、もうちょっと良いやり方に変えたいしそろそろHamlかJadeあたり覚えようかなと思っていました。その矢先、こっちの方が良いよということでSlimを教えてもらい、実際使ってみたところ良いなと思ったので紹介します。

Slimって？

HTMLのテンプレートエンジンと言われるもの。RubyのフレームワークであるRailsを書く時にHTML部分をこれで書いたりするらしい。

特徴や書き方

とにかくシンプルに書ける

HTMLだと開始タグがあって閉じタグがあってみたいな書き方をしますが、Slimは開始タグのみ書けば良くなります。(開始タグの < もナシ)

DOCTYPE html
html lang="ja"
head
  meta charset="UTF-8"
  title Slimの書き方
  meta name="viewport" content="width=device-width, initial-scale=1.0"
  meta name="description" content=""
  link rel="stylesheet" href="style.css"
body
  header#global-header
    nav
      ul
        li
          a href="#" ナビゲーションの項目
        li
          a href="#" ナビゲーションの項目
  main
    / divは書かなくてもclassやidだけで出力されます
    /! コメントアウトは!を付ければHTMLにも出力されます
    .contents
      h2 ココは見出し
      p ココは段落です。
      p
       | 複数行になる場合の書き方は
         こう書きます。
  script src="js/script.js"

基本的には開始タグの<と閉じタグを無くすだけでslimのコードになります。分かりやすいし書きやすいですね。

途中にRubyのコードが書ける

コードの途中でRubyのコードを挟むことが出来るため、複数個用意するものはループ処理でやると楽です。

例えばリストやナビゲーションの項目なんかだと、

nav#global-nav
  ul
    - 5.times {
    li.list-item
      a href="#" ナビゲーションの項目
    - }

と書くとrubyのコードで挟んだ4行目〜5行目のリストタグとアンカータグが5組出力されます。

他のループの方法で配列を上手く使ってナビゲーションの項目を変えるようにすればもっと楽になるかもしれません。

WordPressのループ部分を作る際に1つ作ってあとはループで出せばテーマ化する際にも楽で良いなと思いました。

導入するとこれが嬉しい

HTMLを書く速度をあげられる

パッと見閉じタグや開始タグの < が減るので、少し記述量が減ります。

Emmet(Ver. 1.1)から対応しているらしく、Emmetで展開しながら書くとミスも少なく且つ速く書くことが出来ます。

参考：Emmetの次期バージョンv1.1(Beta)の新機能がスゴい | REFLECTDESIGN

閉じタグの数を確認する手間が省ける

閉じタグが無いことで通常ネストして弓状になるコードが階層を意識して見れる形になるため、編集がしやすく、どこかの塊を消したことでよくあるdivの閉じタグの数が合わないなんて事を防げます。

ちょっと面倒な部分

SassやLESSと同じくSlimもHTMLにするためにはコンパイルが必要です。その為対応しているコンパイラが必要になります。

導入が楽なのでオススメはPrepros

僕はgulp(ruby-slimを使用)にタスクを追加して使っています。

躓いた部分

階層を間違えて出力されない

Slimを書く際はインデントに注意する必要があり、半角スペース2個開けて下の階層のタグを書いていきます。これを間違えるとコンパイルしてもエラーが起こり何も出力されません。

Rubyのコードを入れる場合なんかも同じで、Rubyの処理で影響を与えたい範囲と同じ高さに書く必要があるようです。(上のRubyのコードが書けるを参考にしてください。)よく1つ上の階層に書いてしまい原因が分からず悩みました。

HTML内にCSSやJavascriptのコードを書く方法が分からない

書く量が少ない場合、わざわざ別ファイルにちょろっと書いて読み込むより、HTMLに書いた方が楽だったり読み込みない分早いかなと思ったのですが、いざ書いてみると上手く出力出来ず、結局別ファイルに書いて読み込むことに落ち着きました。

Slimを使って更にやりやすいコーディング環境を作っちゃいましょう！