slimは凄い
みなさんはslimを使っていますでしょうか?
slimとは, Ruby製のテンプレートエンジンのことで、
htmlをより簡潔でスマートに書くことができます。
例えば,以下のコード。
<h1>タイトル</h1>
<div class="content">
<p>文章</p>
</div>
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。
module App
class Application < Rails::Application
config.generators.template_engine = :slim #slimに変更
end
end
このあと、もしフォーマット関係でエラー出た場合は,一旦サーバーを再起動させましょう。
これで準備が整いました。
基本文法
ここからはよく使うslimの文法について紹介します。
見方としては、slimの文法 → htmlならどうなるかという順になってます。
(色々迷いましたが、逆の方が見やすいよという方いましたらコメントください(m_ _m))
htmlタグ
slimの特徴として、<>
がいらないということを覚えておきましょう。(使うこともできます)
もちろんそれに伴い、<>で閉じる必要もありません。
p 段落
a アンカー
img src="https://avatars1.githubusercontent.com/u/28925778?v=4"
div
<p>段落</p>
<a>アンカー</a>
<img src="https://avatars1.githubusercontent.com/u/28925778?v=4" />
クラスやidの指定
クラスやidはそれぞれ、.
, #
で表現することができます。
dev.content
p.title タイトル
dev#content
p#title タイトル
<dev class="content">
<p class="title">タイトル</hoge>
</dev>
<dev id="content">
<p id="title">タイトル</hoge>
</dev>
また、クラスやidは連続して指定できるので、かなり簡潔になることでしょう。
dev.content#article
p.title.text-center タイトル
<dev class="content" id="article">
<p class="title text-center">タイトル</hoge>
</dev>
テキストの書き方
テキストは |(パイプ)を使います。
|
より後ろはテキストとして扱われるので、タグの横ではなく、タグの下に記述することで見やすくなるというのが最大のメリット。
p
| テキスト
<p>テキスト</p>
【注意】タグのすぐ後ろに|
をいれると、|
も文字として認識されてしまうので注意しましょう。
これは、
p | テキスト
こうなっちゃいます。
<p>| テキスト</p>
また、パイプを使えば、文章が長くなった時でも見やすくなります。
p
|
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
改行したいときは通常と同様、br
を使えばOK。
p
|
テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキスト<br>
<p>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキスト</p>
br
をタグ無しで使いたい!って場合には、以下のように書けます。
p
| テキストテキストテキストテキストテキスト
br
| テキストテキストテキストテキストテキスト
br
以下は再度|
で始めることで、文字として認識させるようにしましょう。
※ 補足
パイプに関して言うと、以下の書き方は上二つが同じで、最後のは改行されません。
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
というフォーマットで書く所が多いと思うので, 初心者こそ慣れておくと良いかもしれませんね( ´ ▽ ` )