静的HTMLとRailsにおけるコードの比較

## はじめに
静的サイトにおけるHTMLの記述とRails開発におけるコード記述の違いについて、よく使っているコードより簡潔にまとめました。

備忘録として残しつつ、誰かのお役に立てれば幸いです。

## 前提
- HTMLは静的なサイトを想定(CMSはなし)
- Railsは動的なサイトやアプリを想定
- クォーテーションはシングルに統一
- RailsコードとHTMLコードで同じ内容が出力されるように想定
- データベースについて触れない

## 比較

### ファイル拡張子
#### 静的HTML
```
index.html
```
拡張子が```.html```のみで、名前も自由に決められる。(```news.html```、```contact.html```など)
#### Rails
```
index.html.erb
```
拡張子が```.html.erb```で、ビューフォルダへ作成し、名前は```CRUD```アクションより決まる。(```show.html.erb```、```new.html.erb```など)
- - -
### スタイルシート読み込み
#### 静的HTML
```
<link rel='stylesheet' href='パス指定/style.css'>
```
```head```タグ内に記述。```href```で読み込み先を指定する。
#### Rails
```
<%= stylesheet_link_tag 'application', 'data-turbo-track': 'reload' %>
```
```stylesheet_link_tag```ヘルパーメソッドを使用する。
```app>view>layouts>application.html.erb```へ記述する。

読み込み先は、```app>assets>stylesheets>application.css```で、
cssを記述する場合はこちらのファイルに記述する。

```data-turbo-track: 'reload'```は```Turbo```リロードのためのもので、ページをリロードするときに```stylesheet```が再読み込まれる。
- - -
### Javascript読み込み
#### 静的HTML
```
<script src='パス指定/script.js'></script>
```
```body```終了タグ直前で読み込む。
```HTML```コードが読み込まれた後に読み込む必要があるため。

```data-turbo-track: 'reload'```は```Turbo```リロードのためのもので、ページをリロードするときに```JavaScript```ファイルが再読み込まれる。
#### Rails
```
<%= javascript_include_tag 'application', 'data-turbo-track': 'reload', type: 'module' %>
```
```javascript_include_tag```ヘルパーメソッドを使用して、```JavaScript```を読み込む。
- - -
### favicon設定
#### 静的HTML
```
<link rel='icon' href='パス指定/favicon.ico'>
```
パスを指定して、ファビコン用の画像を指定する。
パスを間違えない限りどこでも配置できる。
#### Rails
```
<%= favicon_link_tag('favicon.ico') %>
```
```favicon_link_tag```ヘルパーメソッドを使用する。
画像は```app>assets>images```に入れる。
- - -
### クラスとID
#### 静的HTML
```
<div id='text' class='container'>Hello, world!</div>
```
タグの中に```id=''```、```class=''```のように書く。

クラス名は自由に設定できるが、わかリやすいほうがいい。
コンポーネント概念がわかるとクラス名を設定しやすい。

```id```名は一意である必要があり、必要なタグだけに設定する。

#### Rails
```
<%= content_tag :div, 'Hello, world!', class: 'container', id: 'text' %>
```
```content_tag```メソッドを使用して```div```要素を生成できる。
```class: ''```、```id: ''```コンマを入れながら書く。

クラス名と```id```名のルールは```HTML```と同様。
- - -
### リンク
#### 静的HTML
```
<a href='./index.html' class='link_class' id='link'>リンク</a>
```
開始タグ```a```で始まる。```href```にファイルがある場所のパスを記述する。
```HTML```では、絶対パスや相対パスは直接記述する。
#### Rails
```
<%= link_to 'リンク', root_path, class: 'link_class', id: 'link' %>
```
```link_to```ヘルパーメソッドのオプション引数を使用して指定する。
ルーディング設定によりパスを生成する。
- - -
### 画像表示
#### 静的HTML
```
<img src='パス指定/example.jpg' class='picture' id='img'>
```
```src```で、同階層にある```images```フォルダの画像を指定する。
画像はどこに入れても問題なく、パスさえ間違えなければ表示される。
#### Rails
```
<%= image_tag 'example.jpg', class: 'picture', id: 'img' %>
```
```image_tag```ヘルパーメソッドを使用する。
画像は```app>assets>images```に入れる。
- - -
### フォーム
#### 静的HTML
```
<form action='/login' method='post'>
  <div class='label'>
    <label for='email'>Email</label>
    <input type='text' id='email' name='email' />
  </div>
  <div class='label'>
    <label for='password'>Password</label>
    <input type='password' id='password' name='password' />
  </div>
  <div class='submit'>
    <input type='submit' value='ログイン' />
  </div>
</form>
```
```form```の```action```や```method```は必要に応じて変更する。
#### Rails
```
<%= form_with url: login_path do |f| %>
  <div class='label'>
    <%= f.label :email %>
    <%= f.text_field :email %>
  </div>
  <div class='label'>
    <%= f.label :password %>
    <%= f.password_field :password %>
  </div>
  <div class='submit'>
    <%= f.submit "ログイン" %>
  </div>
<% end %>
```
```form_with```ヘルパーを使用する。
## 最後に
他にも違いはたくさんあると思いますが、現時点ではこれらがよく使われているなと思ってまとめました。ぜひ参考になると幸いです。

もしも間違いなどがございましたら、ご教示いただきたく存じますのでよろしくお願いします。