プログラミングの勉強日記
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での書き方 | コンパイル後のコード(HTML) |
|---|---|
div |
<div></div> |
html |
<html></html> |
meta |
<meta></meta> |
header |
<header></header> |
footer |
<footer></footer> |
table |
<table></table> |
h1 |
<h1></h1> |
p |
<p></p> |
a |
<a></a> |
ul |
<ul></ul> |
li |
<li></li> |
テキストの書き方
テキストは|で定義する。
slim
p
| Hello World
/複数行の場合（改行なし）
p
|
こんにちは。
私の名前は田中太郎です。
/複数行の場合（改行あり）
p
|
こんにちは。<br>
私の名前は田中太郎です。
HTMLでは以下のように変換されている
html
<p>Hello World</p>
<p>こんにちは。
私の名前は田中太郎です。</p>
<p>こんにちは。<br>
私の名前は田中太郎です。</p>
属性の書き方
slim: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>