search
LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

Railsでslimを使う

プログラミングの勉強日記

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>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0