# 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
```
Sign in with Wallet
Connect another wallet