つぶやきアプリを作ってみよう⑩

##部分テンプレート

今回は同じコードをまとめてテンプレートとして共通して使えるようにしていきます。
テンプレート自体のファイル名は、命名規則として、アンダースコア_を先頭に記述します。
app/views/tweetsの配下に_tweet.html.erbというファイルを作成してください。

index.html.erbの以下の部分を選択して切り取ります。

```erb:app/views/tweets/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に貼り付けましょう。

```erb:app/views/tweets/_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メソッドで使用できるオプションで部分テンプレート名を指定することで表示できます。

```erb:
【例】renderメソッドのpartialオプション
<% render partial: "sample" %>
```
また、呼び出す部分テンプレートに値を渡すために、localsというオプションを使用できます。

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

```erb:
【例】renderメソッドのlocalsオプション
<% render partial: "sample", locals: { post: "good!" } %>
```
上の記述で、部分テンプレート内においてgood!という文字列の代入されたpostという変数が使えるようになります。

index.html.erbを編集しましょう
先ほど切り取った箇所で、部分テンプレートを呼び出します。

```erb:app/views/tweets/index.html.erb
<div class="contents row">
  <% @tweets.each do |tweet| %>
    <%= render partial: "tweet", locals: { tweet: tweet } %>
  <% end %>
</div>
```

マイページにも適用しましょう。

users/show.html.erbを編集しましょう
すでに、部分テンプレートは作成してありますので、使用するファイルを呼び出すのですが
同じディレクトリではないため、どこのディレクトリにある部分テンプレートなのかを指定します。

```erb: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ファイルを作成します。

該当部分を切り取って部分テンプレートに貼り付けます。

```erb:app/views/tweets/new.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>
```

```erb:app/views/tweets/_form.html.erb
    <%= 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両方同じように記述します。

```erb:app/views/tweets/new.html.erb,,,app/views/tweets/edit.html.erb
<div class="contents_form">
  <div class="container_box">
    <h3>投稿する</h3>
    <%= render partial: "form", locals: { tweet: @tweet } %>
  </div>
</div>
```

問題なく新規投稿・編集ができるかどうか動作を確認しましょう。
動作に問題がなければ部分テンプレートを用いた表示は成功です。

以上です。