こんにちは!
最近隣のエンジニアやいつかどこかの記事で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メタ言語
posted with amazlet at 14.02.05
平澤 隆 森田 壮
インプレスジャパン
売り上げランキング: 48,416
インプレスジャパン
売り上げランキング: 48,416