【rails】部分テンプレートを使う

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

部分テンプレート(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文もテンプレートにする

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 %>

部分テンプレートに値を渡すことができる

  1. render 'article'(_article.html.erb)の
  2. article
  3. |article|」のarticleを入れてね

同じhtmlを共通化する

現在、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