---
# System prepended metadata

title: Slimについて知ろう

---

# Slimについて知ろう
## 今日の目標
- Slimと友達の友達くらいになろう
- Slimについてよく知ってSlimよくわからなくて怖いって気持ちがなくなる

## Slimってなに？
### Slimとは
Slimは、Ruby on Railsというウェブアプリケーションフレームワークで使われることが多い、テンプレートエンジンの一つです。

### テンプレートエンジンとは
テンプレートエンジンとは、HTMLのコードを簡潔にかつ動的に生成するためのツールです。
RailsではERBやSlim、Hamlなどが使われています
言語やフレームワークごとに様々なテンプレートエンジンが使われています

## HTMLについてのおさらい
### タグ構造について
HTMLは、<タグ名>の形で書かれ、多くは開始タグと終了タグで要素を囲みます。例えば、<p>は段落を表し、<p>これは段落です。</p>のように使用します。
### classとidについて
classとidは、HTML要素に名前を付けるための属性です。classは複数の要素に同じ名前を付けることができ、idは一意の名前を付けることができます。

## ERBとHTMLの関係
ERBは、HTMLの中にRubyコードを埋め込むことができるテンプレートエンジンです。<% %>で囲まれた部分にRubyコードを書くことができ、<%= %>を使うとその結果を出力することができます。

## SlimとHTMLの関係
SlimもERBと同様に、HTML内にRubyコードを埋め込むことができますが、Slimはさらにシンタックスが簡潔です。Slimでは、タグをインデントで表現し、閉じタグは不要です。

```slim
doctype html
html
  head
    title Slim Sample
  body
    h1 Hello, Slim!
    p This is a sample page using Slim.
```

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Slim Sample</title>
  </head>
  <body>
    <h1>Hello, Slim!</h1>
    <p>This is a sample page using Slim.</p>
  </body>
</html>
```

## 実際に動かしてみよう
codepenを使って以下のerbファイルをslimに書き換えて行って使い方に慣れよう
https://codepen.io/kenchasonakai/pen/YzRWXjZ

```erb
<h1>Posts</h1>

<% notice = 'nothice' %>
<p id="notice"><%= notice %></p>

<table class="table table-hover">
  <thead class="thead-dark">
    <tr>
      <th>Title</th>
    </tr>
  </thead>

  <tbody>
    <% posts = ["生産性アップ5つの方法", "パリの隠れ名所", "AIの未来展望","夢の科学解析"] %>
    <% posts.each do |post| %>
      <tr>
        <td><%= post %></td>
      </tr>
    <% end %>
  </tbody>
</table>

```

### HTMLタグを記述する練習

下記のコードを書き換えてください

```erb
<h1>Posts</h1>
```

```slim=
h1 Posts
```

### 表示はしないけどrubyのコードを実行する記法の練習

下記のコードを書き換えてください

```erb
<% notice = 'nothice' %>
```

```slim=
- notice = 'notice'
```

### idを記述する練習
idを要素を書くときは`#`を使います

下記のコードを書き換えてください

```erb
<p id="notice"><%= notice %></p>
```

```slim=
p#notice = notice
```

### classを記述する方法
class要素を書くときは`.`を使います
複数のclass要素を書くときは`.`で繋げます

下記のコードを書き換えてください

```erb
<table class="table table-hover">
</table>
```

```slim=
table.table.table-hover
```

### HTMLの入れ子構造を記述する方法
classを記述する方法と一部コードが重複します
入れ子構造はインデントで表します

下記のコードを書き換えてください

```erb
<table class="table table-hover">
  <thead class="thead-dark">
    <tr>
      <th>Title</th>
    </tr>
  </thead>
</table>
```

```slim=
table.table.table-hover
  thead.thead-dark
    tr
      th Title
```

### each文を書く練習
eachやifなどのendは不要です
インデントを使ってどこまでがeach文なのか表します

下記のtableをまるっと書き換えてみましょう

```erb
<table class="table table-hover">
  <thead class="thead-dark">
    <tr>
      <th>Title</th>
    </tr>
  </thead>

  <tbody>
    <% posts = ["生産性アップ5つの方法", "パリの隠れ名所", "AIの未来展望","夢の科学解析"] %>
    <% posts.each do |post| %>
      <tr>
        <td><%= post %></td>
      </tr>
    <% end %>
  </tbody>
</table>
```

```slim=
table.table.table-hover
  thead.thead-dark
    tr
      th Title
  tbody
    - posts = ["生産性アップ5つの方法", "パリの隠れ名所", "AIの未来展望","夢の科学解析"]
    - posts.each do |post|
      tr
        td = post
```

### 最終形
```slim=
h1 Posts
- notice = 'notice'
p#notice = notice
table.table.table-hover
  thead.thead-dark
    tr
      th Title
  tbody
    - posts = ["生産性アップ5つの方法", "パリの隠れ名所", "AIの未来展望","夢の科学解析"]
    - posts.each do |post|
      tr
        td = post
```

## 終わりに
Slimはいきなり出てくるととっつきにくい印象を持たれやすいですが、一つ一つ見てあげると意外と単純なことがわかると思います
これをきっかけにSlimと仲良くしてもらえると嬉しいです

## ちなみに

form_withはslimでどうかけばいいのか質問が来たので書いておきます

```erb=
<%= form_with model: @user, url: login_path do |form| %>
  <%= form.text_field :name %>
<% end%>
```

endは階層構造で表すので以下のようになります

```slim=
= form_with model: @user, url: login_path do |form|
  = form.text_field :name
```