Rails index.html.erbとindex.htmlの違いについて

# 1. はじめに

Ruby on Railsで`index.html.erb`の`erb`ってなんだってなりますよね。
`index.html`との違いってなんだろって思ったと思います。
そんなみんなの助けになればな！っと思ってこの記事を書きます。

# 2.index.htmlとindex.html.erbの違いについて

***html.erb***とはなんだろうって思いますよね
***html.erb***ファイルはHTMLなどの文章の中にRubyスクリプトを埋め込むためのライブラリのことです。
これは、***Rubyスクリプトが組み込まれたhtmlファイルのようなもの***と覚えてもらえれば、大丈夫です。

# 3. index.htmlとindex.html.erbの記述の違いについて

index.html.erbファイルには***Rubyスクリプト***で書き込みます。
Rubyスクリプトで記述されていても、パソコンで表示をされるときは、***htmlファイル***に変化されます。

これから違いをコードで表示していきます。

### 1. html.erbファイル

Rubyスクリプトを使用して記述
***Rubyスクリプトの場合***はclassのつけ方が変わります。
classの付け方は通常

```html:
<img src="画像の名前", class="クラス名">
```
になるのですが、Rubyスクリプトの場合は

```erb:
<image_tag "画像の名前", class: "クラス名">
```

となります。

```erb:index.html.erb

# リンクを作成
<%= link_to "Railsのリンクの書き方", tweets_path %>

# ボタンを作成
<%= button_to "Railsのボタンの書き方", tweets_path, method: :delete %>

# フォームを作成
<%= form_for @tweet do |f| %>
  <%= f.label :Rails %>
  <%= f.text_field :body %>
<% end %>

# 画像を挿入
<%= image_tag "tweet.png" %>

```


### 2. htmlファイル

```html:index.html

# リンクを作成
<a href="linkURL">HTMLでのリンクの書き方</a>

# ボタンを作成
<button>HTMLでのボタンの書き方</button>

# フォームを作成
<form action="">
  <label for="text">HTML</label>
  <input type="text">
</form>

# 画像を挿入
<img src="/app/assets/images/tweet.png">

```

`index.html.erb`に記述したらどのように表示されるかみてみましょう。

`Rubyスクリプトで書いた場合`このように表示されます

![スクリーンショット 2021-11-29 2.19.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/9303b82a-a34e-4689-e4c2-4a3a247fb405.png)

`HTMLで書いた場合`このように表示されます

![スクリーンショット 2021-11-29 2.17.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/30505bbd-f13e-65cc-60c6-ae6559dee3c8.png)

表示されている内容は似ていますね。
ですが、記述内容は異なります。

`Rubyスクリプト`で記述をしていないためリンクで飛べなかったり、ボタンが使用できなかったりします。
***１番大きい点は、画像が表示されていないことです。***

# 4. ここからがややこしい点です

Rubyスクリプトを使用しているのですが、***`表示される時にはHTMLに変更されているのです。`***
なので、***CSSやSCSS***の記述は***HTMLのタグの名前***などで記述します。

## 1. HTMLに書き換えられているのを確認する方法

どのように確認するかというと、***検証ツール***で見るだけです。

## 2. 検証ツールの使い方

検証ツールの開き方は2パターンあります。

### 1つ目の開き方

***Google Chromeの右上にある３つの点を押します***

![スクリーンショット 2021-11-29 2.37.51.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/f292bbbd-3fd6-3128-62dd-dab5fe660d41.jpeg)

すると、以下のような画像になると思います。

![スクリーンショット 2021-11-29 2.37.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/23592fdd-13b1-6b6f-b137-386e27a4f14a.png)

これが表示されたら、次に***`その他のツール`***を押します

![スクリーンショット 2021-11-29 2.38.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/39192606-ebfb-a4de-4faf-9f50ca3178ec.png)

1番下に ***`デベロッパーツール`*** があるので、それを押すと ***`検証ツール`*** を使うことができます。
下の画像のようなものが表示されたら成功です。

![スクリーンショット 2021-11-29 2.37.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/72afaae8-e7af-1942-5267-b36bd8452d18.png)

### もう1つの方法

Webサイト上で
***Windows***の場合は`右クリック`
***MacBook***の場合は`2本指クリック`
を押すとこのように表示されると思います。

![スクリーンショット 2021-11-29 2.37.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/42919352-a6bd-1961-875e-a009462b9f7c.png)

1番下の***`検証`***を押すと***`検証ツール`***を使うことができます。
下の画像のようなものが表示されたら成功です。

![スクリーンショット 2021-11-29 2.11.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/532ff880-be81-5535-afd8-14752f218668.png)

### 3. 次はCSSやSCSSに活かす方法

検証ツールを開いて、***タグの名前、class名やid名***をみて
それに***CSS***や***SCSS***で指定するだけです。

# 5．これで以上です！
みなさんここまでお疲れ様でした！
これで、html.erbでの記述方法は理解できたでしょうか？
うまくデザインに活用してください。