はじめに
前回は ユーザープロフィールページの作成とカラムの追加 を行いました。
今回はさらに進めて、「誰が投稿したのか」 がわかるように投稿一覧や詳細にプロフィールを表示していきます。
Railsでは同じUIを複数箇所で使うときに 部分テンプレート（partial） を活用すると便利です。
今回のゴールは、投稿に「ユーザーのプロフィール情報（名前・アイコン・自己紹介）」を紐づけて表示できるようにすることです。
これまでの記事はこちら👇
ポートフォリオ構築の振り返り（第1回：プロジェクト概要と設計）
ポートフォリオ構築の振り返り（第2回：Railsアプリ立ち上げ〜トップページ表示）
ポートフォリオ構築の振り返り（第3回：Deviseでログイン機能を実装）
ポートフォリオ構築の振り返り（第4回：ヘッダーの作成とログイン機能の実装）
ポートフォリオ構築の振り返り（第5回：投稿機能と画像投稿フォームの作成）
ポートフォリオ構築の振り返り（第6回：投稿機能の作成）
ポートフォリオ構築の振り返り（第7回：ユーザーカラム追加）
手順の流れ
今回やったことは次の通りです。
- プロフィール表示用の部分テンプレートを作成
- 投稿ビューに部分テンプレートを読み込む
- ログインユーザーと他ユーザーで表示を切り替える
1. 部分テンプレートを作成
共通で利用するユーザープロフィールUIを、app/views/users/_profile.html.erb にまとめます。
<div class="text-center mt-5">
<% if user == current_user %>
<%= link_to edit_user_path(current_user) do %>
<%= image_tag user.get_profile_image(150, 150),
style: "width: 150px; height: 150px; object-fit: cover;",
class: "rounded-circle" %>
<% end %>
<% else %>
<%= image_tag user.get_profile_image(150, 150),
style: "width: 150px; height: 150px; object-fit: cover;",
class: "rounded-circle" %>
<% end %>
<h5><%= user.name %></h5>
</div>
<div class="mt-5">
<p><%= user.profile %></p>
</div>
<div class="d-grid mb-1">
<%= link_to "投稿一覧", user_path(user), class: "user-menu btn btn-primary text-start" %>
<%= link_to "グループ一覧", groups_user_path(user), class: "user-menu btn btn-primary text-start" %>
<% if user == current_user %>
<%= link_to "お気に入り一覧", favorites_user_path(current_user), class: "user-menu btn btn-primary text-start" %>
<%= link_to "プロフィール編集", edit_user_path(current_user), class: "user-menu btn btn-primary text-start" %>
<% end %>
</div>
コードのポイント
-
if user == current_user
→ 自分自身のプロフィールなら、アイコン画像クリックで編集ページに飛べるようにしています。 -
image_tag user.get_profile_image(150, 150)
→ 事前に定義したget_profile_imageメソッドでアイコン画像を取得。サイズも指定可能。 -
メニュー部分はif文を使って「自分の場合だけ」お気に入りや編集リンクが出るようにしました。
<% if user == current_user %> <%= link_to "お気に入り一覧", favorites_user_path(current_user), class: "user-menu btn btn-primary text-start" %> <%= link_to "プロフィール編集", edit_user_path(current_user), class: "user-menu btn btn-primary text-start" %> <% end %>
2. 投稿ビューに部分テンプレートを読み込む
投稿一覧や詳細ビューに以下を追記して呼び出します。
<%= render "users/profile", user: @post.user %>
これで投稿ごとに「誰が投稿したか」がプロフィール付きで表示されます。
3. 表示例
一覧画面や詳細画面で、こんな風に表示されます👇
- ユーザー名とアイコン
- 自己紹介
- 投稿・グループ一覧へのリンク
- （自分の場合は）お気に入り一覧・プロフィール編集リンク
これにより、投稿とユーザー情報が自然に結びつくようになります。
まとめ
今回は 部分テンプレートを利用して「誰が投稿したのか」わかるプロフィール表示 を実装しました。
- 共通のUIは部分テンプレート化して再利用
- 投稿ビューから
renderで呼び出すだけで使える - ログインユーザーかどうかで表示内容を切り替え
次回は、👉 次回は「投稿カードを共通化して、一覧画面をすっきり表示する」作業に進みます！
ポートフォリオ構築の振り返り（第9回：itemのカード表示と共通化）
用語解説
-
部分テンプレート（partial）
Railsのビューを部品化したもの。ファイル名の先頭に_をつけて作成し、renderメソッドで呼び出して使う。重複を避け、メンテナンス性を高められる。 -
render "users/profile", user: @post.user
users/_profile.html.erbを呼び出す記法。user:でローカル変数を渡してテンプレート内で利用できる。 -
current_user
Deviseでログインしている現在のユーザー情報を返すヘルパーメソッド。