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
変わらないことを確認する
マイページに部分テンプレートを適用しよう
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
変わらないことを確認する