Ruby/Rubyの基礎知識

Slimテンプレートエンジンを使ってHTMLを出力する(2ページ目)

HTMLテンプレートエンジンであるSlimを紹介します。ERBやHamlとの機能や文法を比較し、RailsアプリにSlimテンプレートを使用する方法を解説します。

橋本 拓也

執筆者:橋本 拓也

Rubyガイド

Slimの文法

Slimの文法の特徴は、コードの簡潔さと様々なニーズに応える柔軟性です。以下、簡単な例から始まり、文法のカスタマイズまで紹介します。

何もないところにおもむろに記述した単語は、HTMLタグとみなされます。

タグの内容が複数行にわたるときは、インデントを下げてその中に記述します。

テキストを記述するためには行頭に|(パイプ)を置く必要があることに注意してください。こうしないと<現在時刻>という斬新なタグが生成されてしまいます。

もしくは可読性が低くならなければ、RubyのStringのように#{}で式を埋め込むことも可能です。

次に、前ページの例でも見たとおり、タグの後に.(ドット)を置くことでclass属性を付与することができます。同様に#がid属性になります。これらはjQueryのDOMセレクタと同じなので使ったことのある人には覚えやすいのではないかと思います。

なお出力結果のHTMLは見やすいように適当に改行していますが、実際はSlimは改行・スペースのないべたっとしたHTMLを出力するので留意しておいてください。

また、タグを省略してclass, idの記法を使うとdiv要素になります。一応div要素を明示的に書くことも出来ます。

属性(attributes)は、属性名="値"という記法でタグの後にスペースを入れて記述します。その他、RubyのHashを使ったHaml的な書き方もあります。

上の3種類の書き方はすべて、等しいHTMLに変換されます。

出力しないロジックは-を、評価結果を出力する場合は=を、HTMLエスケープしないで出力する場合は==をそれぞれRubyコードの前に付けます。

また、複数行に渡るRubyコードをviewに埋め込むために、ruby:のあとにインデントを下げてRubyコードを書くことが出来ます。

その他、同様にしてjavascript:, css:, coffee:, markdown:なども埋め込むこともできます。

次のページでは、Slimのカスタマイズ方法と、RailsアプリケーションでSlimを使う方法を紹介します。

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます