コラム

CTC教育サービス・ホーム　＞　コラム　＞　Ruby ＆ Rails　＞　第27回　続・altERBで楽々Railsコーディング！　～Slimの紹介～

Ruby ＆ Rails

CTC 教育サービス

[IT研修]注目キーワード Python UiPath(RPA) 最新技術動向 Microsoft Azure Docker Kubernetes

第27回　続・altERBで楽々Railsコーディング！　～Slimの紹介～ (藺藤卓実) 2016年8月

こんにちは、藺藤です。

前回のコラムではHTMLテンプレートエンジンの「Haml」を紹介しました。　HamlをERBの
代わりに使うと簡潔な記述でHTMLを作成できます。（="altERB"）

今回はその続きとして、もう一つのテンプレートエンジンである「Slim」を紹介します。(*1) (*2)　Slimを使うことで、HTMLの記述が簡潔になります。　SlimはHTMLに特化しているため、Ruby標準のERBを使うのに比べ、格段にコーディング量が少なくなります。　また、SlimはRuby製ですのでRubyコードとの親和性も高いです。

初めにSlimを簡単に紹介します。　次にSlimの導入方法を説明します。　その後、実際に動かしながらSlimの文法を説明してゆきます。　最後にRailsでの利用方法や、ちょっぴり便利な機能に触れたいと思います。

今回は以下の環境で動作確認しています。

CentOS 6.5
Ruby 2.1.4 x64
Slim 3.0.6
Rails 4.2.6
Redcarpet 3.3.4

Slimとは

SlimのREADMEから、Slimがどのようなものなのかを端的に表す次の文章を引用します。(*3)

"Slim は不可解にならないように view の構文を本質的な部品まで減らすことを目指したテンプレート言語です。標準的な HTML テンプレートからどれだけのものが削除できるか確かめるところから始まりました。(<, >, 閉じタグなど) 多くの人が Slim に興味を持ったことで, 機能性は発展し, 柔軟な構文をもたらしました。"

「Slim」という名が示す通り、本質的ではない部分をHTMLからカットし、すっきりさせた言語ということのようです。

どれくらい"スリム"になるのか、実際にSlimコードの例を示します。

[level.html.slim]
select#level
  option[value="1"]  Info
  option[value="2"]  Warn
  option[value="3"]  Error

これは次のようなHTMLに変換されます。

[level.html]
<select id="level">
  <option  value="1">
    Info
  </option>
  <option  value="2">
    Warn
  </option>
  <option  value="3">
    Error
  </option>
</select>

この例では、記述したSlimは88文字ですが、変換後のHTMLは157文字となりました。　Slimを使うことで記述量を半分近くに減らせたことになります。　生成されたHTMLとSlimのソースコードを見比べてください。　HTMLに比べ、Slimの方はずいぶんとすっきりしていますね。

Slimの導入

それではSlimを導入しましょう。　端末から以下のコマンドを実行してください。

$ gem install slim
#=> Successfully installed slim-3.0.6
#=> Parsing documentation for slim-3.0.6
#=> Done installing documentation for slim after 1  seconds
#=> 1 gem installed

インストールされたSlimのバージョンは3.0.6のようです。

端末上でSlimを利用するには「slimrb」コマンドを利用します。　"slim"ではなく、"slimrb"であることに注意してください。　バージョンを表示させてみましょう。

$ slimrb -v
#=> Slim 3.0.6

先ほど例で示した「level.html.slim」をコンパイルするには次のコマンドを実行します。

$ slimrb level.html.slim 
#=> <select  id="level"><option  value="1">Info</option><option  value="2">Warn</option><option  value="3">Error</option></select>

人間が読みやすい形式で出力するには「-p」オプションを利用します。

$ slimrb level.html.slim -p 

#=> <select id="level">
#=>   <option value="1">
#=>     Info
#=>   </option>
#=>   <option value="2">
#=>     Warn
#=>   </option>
#=>   <option value="3">
#=>     Error
#=>   </option>
#=> </select>

ここまでは端末に出力してきましたが、出力先をファイルに変えるには次のようにします。

$ slimrb level.html.slim > level.html 

$ cat level.html 
#=> <select  id="level"><option  value="1">Info</option><option  value="2">Warn</option><option  value="3">Error</option></select>

「-h」オプションを利用するとSlimのオプションを一覧表示できます。　こちらも確認しておいてください。

$ slimrb -h

Slimの文法

ここからはSlimの文法を説明してゆきます。　読者の皆さんも実行しながら読み進めていってほしいと思います。（以下、コマンドの実行は省略します。）

タグの記述「tag content」

SlimでHTMLタグを作るには、行頭にタグ名を書いてください。　また、タグ名の後ろに半角スペースを入れて区切ることで、続けてタグの内容を記述できます。　内容の無いタグについてはcontent部分には何も書きません。

h3 ログレベルについて 
p サンプルです。 
br
#=> <h3>ログレベルについて</h3>
#=> <p>サンプルです</p>
#=> <br>

属性の指定「tag attr1=value1, attr2=value2, ... content」

属性を指定するにはタグ名に続けてキー・バリューのペアを指定します。

例えば、"message"というname属性を持つテキストフィールドは次のように書けます。

input type="text" name="message" 
#=> <input name="message" type="text"  />

もちろん、nameやtypeの他にもstyleやhrefなど、任意の属性を指定できます。

また、[]など括弧類を使って属性を囲むこともできます。　筆者の個人的な好みでは、[]で囲った方が見やすいと思いますがいかがでしょうか。

input[type="text" name="message"]
#=> <input name="message" type="text"  />

id、classの指定「#」「.」

idおよびclassの指定に関しては、CSSと同じように「#」記号及び「.」記号をそれぞれ利用できます。　この記法を使うと上のSlimコードを以下のように書き直せます。

p.message#message-1
#=> <p class="message" id="message-1"></p>

また、「div#id」や「div.class」といった指定についてはdivを省略できます。

.message#messgae-1 
#=> <div class="message"  id="message-1"></div>

入れ子の要素

Slimではインデントによって親子関係を表現します。　インデントの深さが元のレベルに戻ったとき、タグの終わりと解釈されます。

#message-box
  .message#message-1 テスト 
  .message#message-2 練習 
  .message#message-3 プラクティス
<div id="message-box">
<div  class="message" id="message-1">テスト</div>
<div  class="message" id="message-2">練習</div>
<div  class="message" id="message-3">プラクティス</div>
</div>

孫要素、ひ孫要素も同様に記述できます。

Rubyコード

Slimでは様々な方法でRubyコードを記述できます。　順に見ていきましょう。

(1) コードを実行する「-」

「-」を使ってRubyコードを記述できます。　例えば繰り返し処理や条件分岐は次のように書けます。

- [1, 2, 3, 4, 5].each do |n|
  - if n.even?
  p 偶数です。
#=> <p>
#=>   偶数です。 
#=> </p>
#=> <p>
#=>   偶数です。 
#=> </p>

1から5までの整数を順に繰り返し、偶数の場合のみ「偶数です。」と出力させています。

ポイントは以下の通りです。

Rubyコードを書く行は「-」で始めること
Rubyのブロック部分をインデントすること
endは書かないこと

これらは前回紹介したHamlにも共通する特徴です。

(2) Rubyコードの評価値を出力する「=」

Rubyコードの評価値を出力するには「=」を使います。　上のコードを少し書き換えてみます。

- [1, 2, 3, 4, 5].each do |n|
 - if n.even?
  = "#{n}は偶数です。"
#=> 2は偶数です。 
#=> 4は偶数です。

このようにして文字列や数値を出力できます。　ちょうどERBの次の書き方に似ています。

<%= "#{n}は偶数です。" %>

ただし、Slimでは前の"<%"部分、後ろの"%>"部分は不要です。

タグの内容にRubyの値を出力したい場合は次のように書きます。

- [1, 2, 3, 4, 5].each do |n|
  - if n.even?
    p = "#{n}は偶数です。" 
#=> <p>
#=>   2は偶数です
#=> </p>
#=> <p>
#=>   4は偶数です
#=> </p>

(3) 式展開

「=」を使わなくても、Rubyの式展開を使って値を出力できます。　これも例を見てみましょう。

- [1, 2, 3, 4, 5].each do |n|
  - if n.even?
    p #{n}は偶数です。
#=> <p>
#=>   2は偶数です
#=> </p>
#=> <p>
#=>   4は偶数です
#=> </p>

これは初めに"タグの記述「tag content」"で説明したように、タグ名に続けてタグの内容を記述する書き方ですね。　「タグの内容」部分は自動的に式展開されます。

「=」を使って出力するときとは異なり、""や''といったクォーテーションでは囲まないようにしてください。クォーテーションを含む文字列がそのまま出力されてしまいます。

コメントには「/」を使います。　また、HTMLコメントを出力させる「/!」もあります。

/ このコメントは出力されません 
/! このコメントは出力されます 
#=> <!--このコメントは出力されます-->

「/」で記述したコメントはHTML中には表示されません。

基本的なSlimの文法は以上です。　より詳細な情報はSlimのサイトをご覧ください。(*2)(*3)

Railsでの利用

RailsでSlimを利用するには「slim-rails」を導入すると便利です。　「slim-rails」を使うことで、ビューをSlimで作成できるようになります。　また、Railsのジェネレータによって生成されるビューがerbからslimに代わります。

まずは適当なRailsプロジェクトを作成し、Gemfileに以下を追加してください。

[Gemfile]
gem 'slim-rails'

bundle installコマンドを実行します。

$ bundle install
#=> Using slim 3.0.6
#=> Installing slim-rails 3.0.1

Slimを導入できました。

この段階で「rails g scaffold」コマンドを使い、適当なリソースを生成してみましょう。

$ rails g scaffold slimtests
#=> invoke    slim
#=>   create       app/views/slimtests
#=>   create       app/views/slimtests/index.html.slim
#=>   create       app/views/slimtests/edit.html.slim
#=>   create       app/views/slimtests/show.html.slim
#=>   create       app/views/slimtests/new.html.slim
#=>   create       app/views/slimtests/_form.html.slim
#=>     ...

「.html.erb」の代わりに「.html.slim」でビューが作成されています。　生成された後は、上で説明した文法に従って各Slimファイルを編集してゆきます。

なお、「slim-ralis」を使っている場合でもERBファイルは問題なく動作します。　このため、ERBファイルとSlimファイルは共存できます。

ちょっと便利な機能

最後におまけとして、Slimのちょっと便利な機能を紹介します。

・Splat Attribute（アスタリスク属性）

タグに複数の属性を設定する際にRubyのハッシュを利用できます。　「*」（アスタリスク）を使い、「*(ハッシュ)」の形で利用します。　リテラルによる記述も可能ですが、変数としても渡すことができます。　例を示します。

- data_attr = {'data-url' => '/articles/123',  'data-id' => '123'}
p*data_attr  寿限無寿限無五劫の擦り切れ...

#=> <p data-id="123"  data-url="/articles/123">
#=>   寿限無寿限無五劫の擦り切れ...
#=> </p>

属性を動的に割り当てたい場合に便利そうです。

・埋め込みエンジン

Slimファイルの中にSlim以外のコードを埋め込むことができます。　例えば、Rubyコード、SCSSコード、Markdownコード等が利用できます。

今回はMarkdownを埋め込んでみましょう。　まず準備として、RubyでMarkdownを扱うためにGem「Redcarpet」をインストールします。

$ gem install redcarpet
#=> Building native extensions.  This could take a while...
#=> Successfully installed redcarpet-3.3.4
#=> Parsing documentation for redcarpet-3.3.4
#=> Done installing documentation for redcarpet  after 0 seconds
#=> 1 gem installed

SlimファイルにMarkdownを埋め込みます。　赤の部分が埋め込まれたMarkdownになります。

markdown:
  ## Markdown!!
p Markdownのテストです。
#=> <h2>Markdown!!</h2>
#=>
#=> <p>
#=>   Markdownのテストです。 
#=> </p>

複数のコードを一つのファイルにまとめてしまうのは通常あまりよろしくありませんが、簡易的な用途であれば上のように簡単に利用できて便利ですね。

まとめ

今回はHTMLテンプレートエンジン「Slim」を紹介しました。　HTMLから余分な部分を取り除きつつも、見やすく・書きやすいものになっていて非常に便利ではないでしょうか。　ぜひお試しください。

それでは、Enjoy Ruby!

（注釈）

*1 : Slimの公式サイト
http://slim-lang.com/

*2 : SlimのGitHubサイト。　例が豊富にあります。
https://github.com/slim-template/slim

*3 : 初めて読む際にはこちらにあるREADMEの日本語訳がお勧めです。
https://github.com/slim-template/slim/blob/master/README.jp.md

*付録A

Windows環境で日本語を含むSlimファイルをコンパイルする際、文字エンコーディングに関する次のようなエラーが発生するかもしれません。

$ slimrb level.html.slim -p 
#=> Encoding::InvalidByteSequenceError: level.html.slim  is not valid Windows-31J
#=>   Use --trace for backtrace.

この場合には、次のように環境変数を設定してください。

$ set RUBYOPT=-EUTF-8

エンコーディングとしてUTF-8を指定したことにより、エラーは発生しなくなります。

$ slimrb level.html.slim -p 
#=> <select id="level">
  <option value="1">
  ...

前回のコラム
「第26回　altERBで楽々Railsコーディング！　～Hamlの紹介～」次回のコラム
「第28回　Rubyで始めよう！　形態素解析」

[IT研修]注目キーワード Python UiPath(RPA) 最新技術動向 Microsoft Azure Docker Kubernetes

「Ruby ＆ Rails」コラム一覧へ

コラム一覧へ

キャンペーン情報

キャンペーン一覧

IT・技術研修ならCTC教育サービス

コラム