※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。
部分テンプレート(Partial Template)とは
htmlが長くなってくると、ぱっと見てなにを意味しているか分かりにくい
分かりやすくするために、部分テンプレートを使う
例えばindex.html.erbの”tabs”の部分をテンプレートにする
<div class="tabs">
<div class="tabs_item active">
新着記事一覧
</div>
<div class="tabs_item">
タイムライン
</div>
</div>
「_tabs.html.erb」というhtmlファイルを新たに作る
ファイル名の頭を「_」にすること
元のindex.html.erbに書くときは以下のように書く
<%= render 'tabs' %>
これだけ!
部分テンプレートにしておくと、複数のhtmlファイルでも読み込むことができて便利
(同じコードは二度書かない)
each.doから始まる以下のコードが長いため部分テンプレートにする
<% @articles.each do |article| %>
<%= link_to article_path(article) do %>
<div class="card">
<div class="card_image">
<%= image_tag 'eyecatch1.png' %>
</div>
<div class="card_content">
<div class="card_title">
<%= article.title %>
</div>
<div class="card_heart">
<%= image_tag 'heart.svg' %>
<span>23</span>
</div>
<div class="card_detail">
<%= image_tag 'default-avatar.png' %>
<div>
<p>name1234</p>
<p><%= article.display_created_at %></p>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
先ほどと同じように、「_article.html.erb」を作成して、元のindex.html.erbで読み込む
<% @articles.each do |article| %>
<%= render 'article' %>
<% end %>
htmlファイルが分かれてしまっているので、「articleってなに?」状態になっている
(articleが渡せていない)
articleを渡さないといけない
<% @articles.each do |article| %>
<%= render 'article', article: article %>
<% end %>
部分テンプレートに値を渡すことができる
render 'article'
(_article.html.erb)のarticle
は- 「
|article|
」のarticle
を入れてね
現在、new・edit両方のhtmlが全くである
これを丸ごと「_form.html.erb」でテンプレートにして共通化する
<div class="container">
<% @article.errors.full_messages.each do |message| %>
<ul>
<li><%= message %></li>
</ul>
<% end %>
<%= form_with(model: @article, local: true) do |f| %>
<div>
<%= f.label :title, 'タイトル' %>
</div>
<div>
<%= f.text_field :title, class: 'text' %>
</div>
<div>
<%= f.label :content, '内容' %>
</div>
<div>
<%= f.text_area :content %>
</div>
<%= f.submit '保存', class: 'btn-primary' %>
<% end %>
</div>
二行目の@articleをarticleにする
new・editともに以下の1行のみになる
<%= render 'form', article: @article %>
(同じコードは二度書かない)
- 修正の手間が大幅に減る
- 修正漏れが防止できる
#DAY15