はじめに

Rubyのテンプレートエンジンslimの導入方法と使い方をご説明します
Railsでは、html.erbというファイルでhtmlを書きますが、<h1></h1>や<% %>を毎回記入するのが少し面倒です。
slimを利用すると、htmlをより簡潔に書けるため、開発にかかる手間を減らすことができます。

※ erbとは
embedded Rubyのこと。Viewファイルの中の好きな場所でRubyのコードを実行できるようになります。

1. slim 導入方法

railsのディレクトリにあるgemfileに、2つのgemを追加します。

gem 'slim-rails'
#　railsでslimを利用するためのgem

gem 'html2slim'
#　html.erbをhtmle.slimに変換するためのgem

ターミナルでbundle installと打ち、gemの追加を反映させます。

bundle install

以下のコマンドをターミナルに打ち、app/viewsディレクトリにある既存のhtml.erbファイルをhtml.slimに切り替えます。


bundle exec erb2slim app/views app/views

slimファイルが追加されたことを確認したら、既存のerbファイルは邪魔なので削除します。


bundle exec erb2slim app/views app/views -d

※ **念の為、git commitを使ってファイルの状態を記録することをオススメします。**ファイルを削除して問題が生じても、git commit前の状態に戻すことができます。

git log
#ハッシュ値を調べる

git reset --hard ハッシュ値
#出てきたハッシュ値を--hardの後に入力すると、指定したコミットまで戻ります。

2. slim 書き方

基本的なslimの使い方を列挙します。

<% %>の書き方

html


<% if %>

slim -


- if

<%= %>の書き方

html


<%= puts hoge %>

slim =


= puts hoge

###テキストの書き方

html


<p>hoge<p>

slim |


p 
 | hoge

見出しタグの書き方

html

<h2>hogehoge</h2>

slim <>は必要なし


h2 hogehoge

idの書き方

html


<div id = id></div>

slim #


#　id

クラスの書き方

html

<div class = hoge></div>

slim .


.hoge

コメントの書き方

html


<!-- hoge -->

slim /


/hoge

htmlとslimを見比べると、非常にシンプルに書けることが分かります。

参考記事

より詳しい情報について知りたい方は、以下のURLをご参照ください。

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

git commitを使って変更内容をコミットする方法【初心者向け】