エラー問題のロープレを始めたものの、何ひとつわからず途方にくれる もそ。
コードの復習をしていると、ノリと勢いでわかったことにしていた箇所がどんどん出てきます...。
今日はそんなノリと勢いでなあなあにしていた部分テンプレートについて書いていきます。
部分テンプレートとは？
ビューファイルを記述していくと、同じようなレイアウトの構造がいくつか出てくることがあります。
同じレイアウト、同じ内容のコードを何回も繰り返し記述するのはイヤですよね。
そこで、共通のHTML構造をテンプレートにしてしまおう！というのが部分テンプレートです。
どうやって記述するの？
部分テンプレートを記述するには、renderメソッドを使います。
基本的な使い方はこんな感じです。
<%= render partial: "部分テンプレート名" %>
これで部分テンプレートの呼び出しができました！
このままだとindex.html.erbファイル内で部分テンプレートを呼び出しただけで、肝心の部分テンプレートがありません。
そこで、部分テンプレートにしたいHTMLの記述を別のファイルに保存する必要があります。
ファイル名には規則があり、_(アンダーバー)部分テンプレート名とします。
なので部分テンプレートの名前を"sample"としたい場合は、ファイル名は**_sample.html.erb**になります。
では先ほど例に出したツイッターのように、同じ部分テンプレートを繰り返し配置するような場合にはどのように記述すればよいでしょうか？
① <% @tweets.each do |tweet| %>
② <%= render partial: "sample", locals:{moso: tweet} %>
③ <% end %>
まず、①のコードから解説していきます。
①の@ tweetsはコントローラで定義したインスタンス変数で、|tweet|は配列で格納された一つ一つのレコードを表しています。
つまりtweetsの中から**「tweet」という名前の情報を１つずつ変数を取り出しています**。
each do~endの記述があるので、配列の要素の数だけ情報を取り出す作業を繰り返しているということになります。
②は部分テンプレートの記述です。
render partial: "sample"で、まず"sample"という名前の部分テンプレートファイルを作りますよ、と宣言します。
次にlocals：ですが、これは部分テンプレートに渡したい値を指定します。
{moso:tweet}では、さきほど①で記述した|tweet|の情報を「moso」という名前で部分テンプレート内に表示していきます、と宣言しています。
文章だけではわかりづらいので、部分テンプレートのファイルを見ていきましょう。
<div class="content_post" style="background-image: url(<%= moso.image %>);">
<div class="more">
<span><%= image_tag 'arrow_top.png' %></span>
<ul class="more_list">
<li>
<%= link_to "詳細", tweet_path(moso.id), method: :get %>
</li>
<% if user_signed_in? && current_user.id == moso.user_id %>
<li>
<%= link_to '編集', "/tweets/#{moso.id}/edit", method: :get %>
</li>
<li>
<%= link_to '削除', "/tweets/#{moso.id}", method: :delete %>
</li>
<% end %>
</ul>
</div>
<%= simple_format(moso.text) %>
<span class="name">
<a href="/users/<%= moso.user_id %>">
<span>投稿者</span><%= moso.user.nickname %>
</a>
</span>
</div>
こちらのコードの中で「moso」と書かれた部分は、index.html.erbファイル内で定義した、tweetカラムから取り出された情報を表しています。
--
いかがだったでしょうか。
こうやってアウトプットしてみると、いかに自分がフワッフワの理解度で勉強していたかが分かります...
そして絵だけがどんどん上手くなっていってしまっている...もその学習はまだまだ続く。