📌

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

2022/03/05に公開

HTML

Rails

tech

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の付け方は通常

<img src="画像の名前", class="クラス名">

になるのですが、Rubyスクリプトの場合は

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

となります。


#リンクを作成
<%= 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ファイル


#リンクを作成
<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