slimとは
slimはRubyで使うテンプレートエンジンの一つ。
slimには閉じタグが存在しないのでコード自体が非常にスッキリしている。
htmlよりもコードを早く綺麗に、そして非常にシンプルに作ることができ、またerbと同じでRubyのコードを埋め込むこともできる。
テンプレートエンジンとは
テンプレートと呼ばれる通常のhtmlで書いたコードと変数などプログラミングによって書かれたコードを合成してビューファイルを作り出すもののこと
slimの導入
Railsではデフォルトのテンプレートエンジンはerbなので、slimを使うには、gemをインストールする必要がある。
Gemfileに下記のコードを追加し、bundle installコマンドを実行する。
gem 'slim-rails'
これにより、index.html.slimのようにビューファイルの拡張子にslimが使えるようになる。
ビューファイルの中に同盟のerbファイルとslimファイルがある場合は、erbが優先して読み込まれるのでslimを使いたい場合はerbファイルは削除しておく。
手動では面倒・変更漏れがあるので、gemを使ってerbをslimに変更することをお勧めする。
Gemfileに下記のコードを追加し、bundle installコマンドを実行する。
gem 'html2slim'
変換するにはターミナルで下記のコマンドを実行する。
# erbファイルを残して変換
$ erb2slim 変換するファイルがあるフォルダまたはファイル名
# erbを削除して変換
$ erb2slim 変換するファイルがあるフォルダまたはファイル名 -d
ex)
# application.html.erbを変換したかったら下記のように記述
$ erb2slim app/views/layouts/application.html.erb
今後自動的にslimファイルを作成されるようにするためには 、
config/application.rbにあるconfigを以下のようにslimを指定すればOK。
module App
class Application < Rails::Application
config.generators.template_engine = :slim #slimに変更
end
end
slimの使い方
slimには閉じタグという概念が無く、代わりにインデントを使い、マークアップする範囲を指定する。
インデントの深さは自由だが、2スペースを使用した場合はその後も2スペースにする必要がある。
htmlファイルの一番最初に書く<!DOCTYPE html>は下記のように記述する。
doctype html
# このコードにコンパイルされる
<!DOCTYPE html>
htmlタグ
div
html
meta
header
footer
table
h1
p
a
ul
li
<div></div>
<html></html>
<meta></meta>
<header></header>
<footer></footer>
<table></table>
<h1></h1>
<p></p>
<a><a>
<ul></ul>
<li></li>
classや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>
改行したいときは通常と同様、<br>を使う。
<br>をタグ無しで記入する方法もあり、br以下は再度|で始めることで、文字として認識させることができる。
/<br>有
p
|
テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキスト<br>
/<br>無
p
| テキストテキストテキストテキストテキスト
br
| テキストテキストテキストテキストテキスト
<p>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキスト</p>
またコメントアウトしたいときは<br>有のように/を使用。
ifの条件式
slimでif文を書くときは、-で囲う必要がある。また、endを入れる必要がない。
Rubyタグの書き方
<%= ... >→ = ...
<% ... >→ - ...
- if current_user.nil?
li 新規登録
- else
li ログイン
<% if current_user.nil? %>
<li>新規登録</li>
<% else %>
<li>ログイン</li>
<% end %>