【爆速で習得】Railsでslimを使う方法から基本文法まで

15115 ワード
HTML Rails slim HTML テキストリンク

slimは凄い

みなさんはslimを使っていますでしょうか？
slimとは, Ruby製のテンプレートエンジンのことで、
htmlをより簡潔でスマートに書くことができます。

例えば,以下のコード。

*.html

<h1>タイトル</h1>
<div class="content">
  <p>文章</p>
</div>
*.slim

h1 タイトル
.content
  p 文章

どちらの方がスマートなのかは一目瞭然ではないでしょうか？

今回はRubyも含めて説明していきますが、
書き方の特徴と違いとしては以下のようになります。

・<>がいらない
・<%= %>　→　 =
・<% %> → -
・コメント　→　/
・id指定　→　#
・class指定　→　.

例)

html(erb) slim
<p>hoge</p> p hoge
<!-- --> /
class="content" .content
id="content" #content
<%= hoge %> = hoge
<% if %> - if

この記事では,

・slimの導入と設定
・基本文法

についてシンプルに説明していきます。

slimの導入

まずは以下のコマンドでslimを入れてください.

gem install slim

これで拡張子が.html.slimのslimファイルを、みなさんが普段使っている.html.erbとして変換されるようになります。

次にhtml2slimを入れてください。

gem install html2slim

これでhtml.erb　→　html.slim　に変換させることができるので、早速変換してみましょう。

bundle exec erb2slim app/views app/views

依存のerbファイルに加え, slimファイルが追加されたかと思います。
※ うまく行かない場合はslimとhtml2slimをGemfileに記述してbundle installしてみてください。

しかし、これではerbファイルが邪魔なので以下のコマンドを打って削除しましょう。

bundle exec erb2slim app/views app/views -d

今後自動的にslimファイルを作成されるようにするためには　、
config/application.rbにあるconfigを以下のようにslimを指定すればOK。

config/application.rb
module App
  class Application < Rails::Application
    config.generators.template_engine = :slim #slimに変更
  end                                                                                                                                                                     
end

このあと、もしフォーマット関係でエラー出た場合は,一旦サーバーを再起動させましょう。

これで準備が整いました。

基本文法

ここからはよく使うslimの文法について紹介します。

見方としては、slimの文法　→　htmlならどうなるかという順になってます。
(色々迷いましたが、逆の方が見やすいよという方いましたらコメントください(m_ _m))

htmlタグ

slimの特徴として、<>がいらないということを覚えておきましょう。(使うこともできます)
もちろんそれに伴い、<>で閉じる必要もありません。

*.slim

p 段落
a アンカー
img src="https://avatars1.githubusercontent.com/u/28925778?v=4"
div
*.html

<p>段落</p>
<a>アンカー</a>
<img src="https://avatars1.githubusercontent.com/u/28925778?v=4" />

クラスやidの指定

クラスやidはそれぞれ、., #で表現することができます。

*.slim

dev.content
  p.title タイトル
dev#content
  p#title タイトル
*.html
<dev class="content">
  <p class="title">タイトル</hoge>
</dev>
<dev id="content">
  <p id="title">タイトル</hoge>
</dev>

また、クラスやidは連続して指定できるので、かなり簡潔になることでしょう。

*.slim

dev.content#article
  p.title.text-center タイトル
*.html
<dev class="content" id="article">
  <p class="title text-center">タイトル</hoge>
</dev>

テキストの書き方

テキストは |(パイプ)を使います。

|より後ろはテキストとして扱われるので、タグの横ではなく、タグの下に記述することで見やすくなるというのが最大のメリット。

*.slim
p
  | テキスト
*.html
<p>テキスト</p>

【注意】タグのすぐ後ろに|をいれると、|も文字として認識されてしまうので注意しましょう。

これは、

*.slim
p | テキスト

こうなっちゃいます。

*.html
<p>| テキスト</p>

また、パイプを使えば、文章が長くなった時でも見やすくなります。


p
  |
    テキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキスト

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

改行したいときは通常と同様、brを使えばOK。

*.slim
p
  |
    テキストテキストテキストテキストテキスト<br>
    テキストテキストテキストテキストテキスト<br>
*.html
<p>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキスト</p>

brをタグ無しで使いたい！って場合には、以下のように書けます。

*.slim
p
  | テキストテキストテキストテキストテキスト
  br
  | テキストテキストテキストテキストテキスト

br以下は再度|で始めることで、文字として認識させるようにしましょう。

※ 補足
パイプに関して言うと、以下の書き方は上二つが同じで、最後のは改行されません。

*.slim
p
  | テキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキスト
p
  |
    テキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキスト
p
  | テキストテキストテキストテキストテキスト
  | テキストテキストテキストテキストテキスト

いろんな書き方を見るかもしれませんが、タグの直後に書かなくても良いというメリットを生かし、自分の見やすいように書くといいかもしれませんね。

| 以下は文字("")として認識されるということを覚えておきましょう。

ifとかの条件式

ここからは少しRubyが絡みますが、少々お付き合いください(m_ _m)

slimでif文を書くときは、-で囲って上げる必要があります。

- if current_user.nil?
  li 新規登録
- else
  li ログイン


<% if current_user.nil? %>
  <li>新規登録</li>
<% else %>
  <li>ログイン</li>
<% end %>

end入れ忘れる心配がなくて最高ですね(・∀・)

参考: https://qiita.com/nishina555/items/8ed180333fbc8f78e91e

結果をテンプレートに表示したい場合

変数とか出力させたい！ってときは、=を使います。

- sum = 1 + 1
= sum

<% sum = 1 + 1 %>
<%= sum %>

この場合、= から始めた2だけが表示されます。

コメントの書き方

コメントは,/をつけます。

/p テキスト

まとめてコメントアウトしたい！って場合は、以下のようにすると簡単。

ネスとしてる場合は親要素だけ。

/.content
  p 文章

行頭が揃ってる場合は/にネストさせる。

/
  - sum = 1 + 1
  = sum

参考: https://qiita.com/scivola/items/c9a79c13688a3444a3cc

まとめ

・<>がいらない
・| 以下は文字("")として認識される
・式は-, 出力は=
・コメントは/

初めは独特の書き方に見えるかもしれませんが、慣れるとあまりのスリムさから戻れなくなることでしょう。

特に現場ではslimというフォーマットで書く所が多いと思うので, 初心者こそ慣れておくと良いかもしれませんね( ´ ▽ ` )