#プログラミングの勉強日記
2020年7月30日　Progate Lv.226

#概要
　こちらの記事で扱ったgemのslimを説明する。slimはHTMLよりもコードを早くきれいにシンプルに書ける。erbと同じで、Rubyを埋め込むこともできる。Hamlと似ていて、slimには閉じタグが存在しないので、コードを簡単かつすっきり書くことができる。

#使い方
　slimを使うためにGemfileを編集する。

Gemfile

gem 'slim-rails'

　Gemfileを編集したら、hamlをインストールする。

ターミナル

bundle install

　これで、index.html.slimといったビューファイルの拡張子にslimを使えるようになる。

##すでにあるerbファイルをslimファイルに変えたい場合

Gemfile

gem 'html2slim'

ターミナル

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

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

#基本的な書き方
slimタグには閉じタグが必要ない。代わりにインデントを使ってマークアップする箇所を指定する。インデントはそろえる必要がある。（3つのスペースを使ったらその後も3つスペースに、4つスペースを使ったらそのあとも4つスペースに）

slim

doctype html
div
  h1 Hello World!
  ul
    li Ruby
    li Rails
    li HTML

　HTMLで以下のように変換されている

html

<!DOCTYPE html>
<div>
  <h1>Hello World!</h1>
  <ul>
    <li>Ruby</li>
    <li>Rails</li>
    <li>HTML</li>
  </ul>
</div>

#slimの書き方

##各タグの書き方

##テキストの書き方
　テキストは|で定義する。

slim

p
  |  Hello World

/複数行の場合（改行なし）
p
  |
    こんにちは。
    私の名前は田中太郎です。

/複数行の場合（改行あり）
p
  |
    こんにちは。<br>
    私の名前は田中太郎です。

HTMLでは以下のように変換されている

html

<p>Hello World</p>

<p>こんにちは。
   私の名前は田中太郎です。</p>

<p>こんにちは。<br>
   私の名前は田中太郎です。</p>

##属性の書き方
　

slim

a href='http://www~' リンク先の名前

　HTMLでは以下のように変換されている

html

<a href="http://www~">リンク先の名前</a>

##IDとclassの書き方
divを省略することができる。

haml

#id_name
  idを指定する

div.class_name
  classを指定する

.class_name
  classを指定する

　HTMLでは以下のように変換されている

html

<div id="id_name">idを指定する</div>

<div class="class_name">classを指定する</div>

<div class="class_name">classを指定する</div>