Ruby製のテンプレートエンジン『Slim』に今更ながら入門してみたのでメモする

こんにちは！

最近隣のエンジニアやいつかどこかの記事でSlimやばい的なことを聞いた気がするのでじゃぁやるか！って完全にノリで今回Slimに入門してみます。

そもそもSlimとは？？

Ruby製のテンプレートエンジン。
軽くて速く、また習得するのも容易。

Slimをやるときにとりあえず覚えておくといいのは

  • 拡張子は.slim
  • インデントの深さで入れ子構造を表現する
  • 通常のHTMLから, >, />を取り除くと基本OK

それでは実際のコードを見てみましょう。

とその前にSlimをインストールしましょう。

gem install slim

今回検証に使った環境は以下です。

  • Ruby・・・2.1.0
  • Gem・・・2.2.0
  • Slim・・・2.0.2

以下がSlimのサンプルコードです

doctype html
html
  head
    title Slim Example
    meta name="keywords" content="slim example"

  body
    h1 Slim Example

    #content
      p Test Case

    - until users.empty?
      table#users
        - for user in users
          tr
            td.name = user.name
            td.age = user.age
    - else
      p Not found.

これが変換されると以下のようになります。




  Slim Example
  


  
Slim Example
  
  

    
Test Case

    

      

        Tagami
        23

それでは1つずつ理解していきましょう。

基本的には, >, />をなくした形

head内にあるmetaとかを見ればわかると思いますが、基本は<, >, />をなくした形です。

あとCSSの記述方法(idの指定とかclassの指定とか)も使うことが出来るのがこの例でわかると思います。
ちょっと覚えなければならないのがRubyのsyntaxを使用したいときです。

Rubyのsyntaxを使いたい場合は -(ハイフン) を使用する

例の中に条件分岐やループ文があったと思うのですが、Rubyのsyntaxを使いたい場合は-(ハイフン)を使ったあと半角スペースを1つあけてRubyを書いていけば動きます。

- until users.empty?
      table#users
        - for user in users
          tr
            td.name = user.name
            td.age = user.age
    - else
      p Not found.

関数や変数を呼び出したいときは =(イコール) を使用する

上のコードのループ文内で=(イコール）を使っている部分は変数内の値を呼び出しています。

ここまでわかればとりあえず実践で使えるはず！<>書かなくていいのでめっちゃ楽！！

最後に

たったこれだけ覚えるだけでも相当便利なのですが、Slimにはもっと便利な機能が詰まっているので、もし興味がある方は公式ドキュメントを見ていただけると幸せになれると思います！

関係ないけどここでSASS本を

name=”amazletlink” target=”_blank” rel=”noopener noreferrer”>Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

posted with amazlet at 14.02.05
平澤 隆 森田 壮
インプレスジャパン
売り上げランキング: 48,416
Amazon.co.jpで詳細を見る

関連記事: