
TECHCAMP学習28日目
複数ページで利用する表示の一部をまとめよう
部分テンプレート
renderメソッドで描画方法を理解
部分テンプレートのメリットを理解
部分テンプレート
ビューファイルにおいて繰り返し使用するコードを切り出し、再利用する仕組みのこと。
_○○.html.erbファイル
部分テンプレートとして切り出すときに作成するファイル
ツイート1つ分のHTML構造を表す
●投稿表示一覧部分をまとめよう
renderメソッド
部分テンプレートを呼び出す際に利用するメソッド
partialメソッド
renderメソッドで使用できるオプション
<% render partial: "sample" %>
localsオプション
renderメソッドで使用できるオプション
部分テンプレート内でその変数を使えるようになります。
例<% render partial: "sample", locals: { post: "hello!" } %>
index、showに適用
●フォーム部分をまとめよう
新規投稿画面と編集画面を部分テンプレートでまとめる
new、editに適用
【ツイートにコメントを投稿しよう】
ツイートのコメント機能を実装
目的
アソシエーションを復習すること
ルーティングのネストを理解すること
モデル→ルーティング→コントローラー→ビュー
コメント投稿フォームとコメント表示欄を作る
Tweetモデル、Userモデル 加えてCommentモデルを作成 rails g model comment
3つのテーブルを結びつけるアソシエーション
それぞれのモデルファイルを編集
belong_to:モデル単数形、has_many:モデル複数形
createアクションのルーティング
どのツイートへのコメントなのか?
ルーティングのネスト
コントローラーのルーティングの中に別のコントローラーのルーティングを記述
tweetsの中にcommentsを記述
Rails.application.routes.draw do
resources :親となるコントローラー do
resources :子となるコントローラー
end
end
Commentsコントローラーを作成
rails g controller comments
コメント投稿用のフォームを作成 ビュー
app/views/tweets/show.html.erb
コメント表示欄を投稿詳細に追加