（初心者向け）【Rails】時短テク！slimの導入方法と使い方

はじめに

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を使って変更内容をコミットする方法【初心者向け】