PicTweet　複数ページで利用する表示の一部をまとめよう

部分テンプレート
コードの記述量を減らすことができると同時に、管理もしやすくなる優れもの

まずは、ファイル作成！

_○○.html.erbアンダーバー エイチティーエムエルイーアールビーファイル

部分テンプレートとして切り出すときに作成するファイル
テンプレート自体のファイル名は、命名規則として、アンダースコア_を先頭に記述

app/views/tweets/_tweet.html.erb
ファイルを作成し、indexから切り取って貼り付ける

※切り取る勇気が必要

renderレンダーメソッド

renderメソッドは、部分テンプレートを呼び出す際に利用するメソッド

partialパーシャルオプション

renderメソッドで使用できるオプション
partialというオプションを付け、部分テンプレート名を指定

【例】
<%= render partial: "sample" %>

localsローカルズオプション

renderメソッドで使用できるオプションです。 localsというオプションを付けることで、部分テンプレート内でその変数を使えるようになる

【例】
<%= render partial: "sample", locals: { post: "hello!" } %>

app/views/tweets/index.html.erb　ファイルへ

<div class="contents row">
<% @tweets.each do |tweet| %>
<%= render partial: "tweet", locals: { tweet: tweet } %>　←ここ
<% end %>
</div>

確認用UR L
変わらないことを確認する

http://localhost:3000

マイページに部分テンプレートを適用しよう

app/views/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
ファイルへ
app/views/tweets/new.html.erb
から切り取ったソースを貼り付け
<%= form_with(model: @tweet, local: true) do |form| %>
<%= form.text_field :image, placeholder: "Image Url" %>
<%= form.text_area :text, placeholder: "text", rows: "10" %>
<%= form.submit "SEND" %>
<% end %>

【大事】
@tweetとしてあった部分を、tweetに置き換える

次
renderメソッドを利用して、先ほどnew.html.erbから切り取った箇所で部分テンプレートを呼び出す

app/views/tweets/new.html.erb　ファイル
<div class="contents row">
<div class="container">
<h3>投稿する</h3>
<%= render partial: "form", locals: { tweet: @tweet } %>　←ここ
</div>
</div>

model: tweetとなっているため、locals: { tweet: @tweet }と記述して、@tweet → tweetと読み替える記述

app/views/tweets/edit.html.erb　ファイルへ
<div class="contents row">
<div class="container">
<h3>編集する</h3>
<%= render partial: "form", locals: { tweet: @tweet } %>
</div>
</div>

確認用UR L
変わらないことを確認する

http://localhost:3000