Ruby on Rails でsilimをインストールする方法。基礎文法

Railsの標準テンプレートはERBです。
ERBは通常のHTML形式のファイルにRubyコードを埋め込むためのテンプレートエンジンです。
（HTMLとほぼ同じ見た目で、その中にRubyスクリプトを埋め込むことができる。）

RailsがサポートしているテンプレートエンジンはERBだけではなく、
「Slim」は、ERBよりも簡潔に書くことができるテンプレートエンジンです。

silimとは

Slim は 不可解にならない程度に view の構文を本質的な部品まで減らすことを目指したテンプレート言語です。
標準的な HTML テンプレートからどれだけのものを減らせるか、検証するところから始まりました。
(<, >, 閉じタグなど) 多くの人が Slim に興味を持ったことで, 機能的で柔軟な構文に成長しました。

viewのスクリプトをシンプルにすることができるテンプレートエンジンなので、

• 終了タグなどを使わないのでスクリプトがシンプル
• 高速・軽量

といったことがメリットとしてあげられると思います。

逆にデメリットとしては、

• 終了タグを使わなくていい分インデントが重要
• 慣れるまではややこしく感じる？

といったことが挙げられると思います。

何でも新しいことにTryする際には、慣れの期間が必要になってくるので、
多少ややこしく感じるのはしょうがないとしても、
インデントを活用することでマークアップする範囲を選択しているので最初のうちは注意が必要です。

slimをインストールする方法

Gemファイルに下記コマンドを追加

gem "slim-rails　・・・①
gem "html2slim　　・・・②

①「slim-rails」はslimのジェネレーターを提供
②「html2slim」はERB形式のファイルをSlim形式に変換

bundle install

bundle installすることでgemのインストールは完了

また、view ファイルの中に同じ名前のERBファイルとSlimファイルがある場合には
ERBファイルの方が優先して実行されるので削除しておきましょう。

ERBファイルをSlimファイルに変換

html2slim

application.html.erbなど元々存在しているファイルの中身を ERB→Slim形式に変換するためにはgemをインストールするだけでは不十分で、

# erbファイルを残して変換
erb2slim 変換するファイルがあるフォルダまたはファイル名

# erbを削除して変換
erb2slim 変換するファイルがあるフォルダまたはファイル名 -d

# erbファイルを残して変換
erb2slim app/views/layouts/application.html.erb

ターミナル上でコマンド処理が必要になってきます。

slimの基本的な構文

htmlタグ

sliｍ形式でhtmlタグを使用する際には<>を使用する必要がないです。 ＊使用することもできます。

.slim形式

p 段落
a アンカー
img src="画像URL"
</code></pre>

.html

<p>段落</p>
<a>アンカー</a>
<img src="画像URL" />

class,idの表記

クラスは「.」, idは「＃」で記述することができます。

.slim形式

p.title タイトル
p#title タイトル

.html

<p class="title">タイトル</p>
<p id="title">タイトル</p>

テキストの書き方

テキストは「|」で定義します

.slim形式

p
  | テスト

.html

<p>テキスト</p>

スペースがなくタグのすぐ後ろに| を入れると、｜も文字として認識されます。

.slim形式

p | テスト

.html

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

文字列が長くなってもみやすくすることができます。

.slim形式

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

.html

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

文字列を改行したい時にはbrを使うことで実現することができます。

.slim形式

p | 
    テストテストテストテストテストテストテストテスト<br>
    テストテストテストテストテストテストテストテスト<br>

.html

<p>テストテストテストテストテストテストテストテスト<br>テストテストテストテストテストテストテストテストテストテスト<br></p>

.slim形式

p 
  | テストテストテストテストテストテストテストテストテスト
  br
  | テストテストテストテストテストテストテストテストテスト

計算、変数の出力

変数の代入などの計算には　- , 変数などを表示させたい時には = を使用します。

.slim形式

- sum = 1 + 1
= sum

.html

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

コメントアウトの書き方

コメントアウトは /を記述します。

/p テキスト

参考サイト

https://pikawaka.com/rails/slim