##部分テンプレート
今回は同じコードをまとめてテンプレートとして共通して使えるようにしていきます。
テンプレート自体のファイル名は、命名規則として、アンダースコア_を先頭に記述します。
app/views/tweetsの配下に_tweet.html.erbというファイルを作成してください。
index.html.erbの以下の部分を選択して切り取ります。
<div class="contents row">
<% @tweets.each do |tweet| %>
#ここから切り取る
<div class="content_post" >
<p><%= tweet.text %></p>
<p><%= image_tag tweet.image.variant(resize: '500x500'), class: 'tweet-image' if tweet.image.attached?%></p>
<span class="name">
<a href="/users/<%= tweet.user.id %>">
<span>投稿者</span><%= tweet.user.nickname %>
</a>
</span>
<%= link_to '詳細', tweet_path(tweet.id), method: :get %>
<% if user_signed_in? && current_user.id == tweet.user_id %>
<%= link_to '編集', edit_tweet_path(tweet.id), method: :get %>
<%= link_to '削除', "/tweets/#{tweet.id}", method: :delete %>
<% end %>
</div>
#ここまで切り取る
<% end %>
</div>
index.html.erbから切り取った部分を_tweet.html.erbに貼り付けましょう。
<div class="content_post" >
<p><%= tweet.text %></p>
<p><%= image_tag tweet.image.variant(resize: '500x500'), class: 'tweet-image' if tweet.image.attached?%></p>
<span class="name">
<a href="/users/<%= tweet.user.id %>">
<span>投稿者</span><%= tweet.user.nickname %>
</a>
</span>
<%= link_to '詳細', tweet_path(tweet.id), method: :get %>
<% if user_signed_in? && current_user.id == tweet.user_id %>
<%= link_to '編集', edit_tweet_path(tweet.id), method: :get %>
<%= link_to '削除', "/tweets/#{tweet.id}", method: :delete %>
<% end %>
</div>
##renderメソッド
部分テンプレートを呼び出す際に利用するメソッドです。
呼び出す部分テンプレートは、partialというオプションで指定します。
##partialオプション
renderメソッドで使用できるオプションで部分テンプレート名を指定することで表示できます。
【例】renderメソッドのpartialオプション
<% render partial: "sample" %>
また、呼び出す部分テンプレートに値を渡すために、localsというオプションを使用できます。
localsオプション
renderメソッドで使用できるオプションです。 localsというオプションを付けることで、部分テンプレート内でその変数を使えるようになります。
【例】renderメソッドのlocalsオプション
<% render partial: "sample", locals: { post: "good!" } %>
上の記述で、部分テンプレート内においてgood!という文字列の代入されたpostという変数が使えるようになります。
index.html.erbを編集しましょう
先ほど切り取った箇所で、部分テンプレートを呼び出します。
<div class="contents row">
<% @tweets.each do |tweet| %>
<%= render partial: "tweet", locals: { tweet: tweet } %>
<% end %>
</div>
マイページにも適用しましょう。
users/show.html.erbを編集しましょう
すでに、部分テンプレートは作成してありますので、使用するファイルを呼び出すのですが
同じディレクトリではないため、どこのディレクトリにある部分テンプレートなのかを指定します。
<div class="contents row">
<p><%= @nickname %>さんの投稿一覧</p>
<% @tweets.each do |tweet| %>
<%= render partial: "tweets/tweet", locals: { tweet: tweet } %>
<% end %>
</div>
異なるディレクトリ内の部分テンプレートを呼び出すときはtweets/tweetのように、
どのディレクトリの部分テンプレートを使用しているか記載します。
##フォーム部分もまとめてみよう。
ツイートの新規投稿画面と編集画面を部分テンプレートでまとめましょう。
app/views/tweetsディレクトリに_form.html.erbファイルを作成します。
該当部分を切り取って部分テンプレートに貼り付けます。
<div class="contents_form">
<div class="container_box">
<h3>投稿する</h3>
#ここから切り取る
<%= form_with(model: @tweet, local: true) do |form| %>
<%= form.text_area :text, placeholder: "text", rows: "10", class: 'container'%>
<%= form.file_field :image %>
<%= form.submit "つぶやく", class: 'container'%>
<% end %>
#ここまで切り取る
</div>
</div>
<%= form_with(model: tweet, local: true) do |form| %>
<%= form.text_area :text, placeholder: "text", rows: "10", class: 'container'%>
<%= form.file_field :image %>
<%= form.submit "つぶやく", class: 'container'%>
<% end %>
#一行目の＠tweetとしてあった部分だけtweetに変えておきましょう。
部分テンプレートを挿入します。new,edit両方同じように記述します。
<div class="contents_form">
<div class="container_box">
<h3>投稿する</h3>
<%= render partial: "form", locals: { tweet: @tweet } %>
</div>
</div>
問題なく新規投稿・編集ができるかどうか動作を確認しましょう。
動作に問題がなければ部分テンプレートを用いた表示は成功です。
以上です。