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本を

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
平澤 隆 森田 壮
インプレスジャパン
売り上げランキング: 48,416

tagamidaiki.comの著者が教えるプログラミングスクール – class Tech(クラステック)

更新情報はFacebookページで!

ブログの更新、読んで役立つ他ブログの記事などを更新しています。




関連のある記事


カテゴリーRuby