はじめに
静的サイトにおける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ヘルパーを使用する。
最後に
他にも違いはたくさんあると思いますが、現時点ではこれらがよく使われているなと思ってまとめました。ぜひ参考になると幸いです。
もしも間違いなどがございましたら、ご教示いただきたく存じますのでよろしくお願いします。