マイページ実装

内容

マイページを実装し、個人の投稿一覧表示およびユーザー情報編集ができるようにする

個人の投稿一覧表示機能

1. MVCの設定

Userモデルはすでに新規登録機能で実装済みのため、今回はusersコントローラーのみ作成
ターミナル

% rails g controller users

ルーティング、usersコントローラー、ビューを編集
今回はマイページで一覧表示と個人情報編集を実装するため、indexとedit、updateを設定（edit、updateは別の機能で実装）
と思ったが上記は間違い
→indexだとユーザー一覧表示になる
→ユーザーの投稿一覧を表示したいため、showを設定（ユーザー詳細表示）
users_controller.rb

def show
  user = User.find(params[:id])
  @posts = user.posts
end

投稿一覧表示のビューはすでに実装したposts/index.html.erbを参考に作成

2. rubocop

ユーザー情報編集機能

1. MVCの設定

編集ページのビューは新規登録ページを使い回し
ルーティングは先に設定しているので、コントローラーを編集
※メールアドレスとパスワードを編集すると、デフォルトでログアウトするように設定されている
→これらを編集したいときはbypass_sign_inを使用するみたい users_controller.rb

def edit
  @user = User.find(params[:id])
end

def update
  @user = User.find(params[:id])
  if @user.update(user_params)
    bypass_sign_in(@user)
    redirect_to user_path(@user.id)
  else
    render :edit
  end
end

private

def user_params
  params.require(:user).permit(:nickname, :email, :password, :password_confirmation, :last_name, :first_name, :last_name_reading, :first_name_reading, :birthday)
end

同一の記述は最後にまとめてbefore_actionにまとめることとする
また、ログアウト状態で編集ページへ遷移できないようにbefore_actionに記述する
他人の編集ページへ遷移することもできないようにbefore_acitionで設定する
users_controller.rb

before_action :move_to_index, except: :show

private
def move_to_index
  redirect_to root_path if current_user.id != @user.id
end

2. ヘッダーにマウスオーバーすると表示が変わるよう設定

header.jsファイルを作成し、そこにコードを記述して実装
header.jsを読み込む
app/assets/javascript/packs/application.js

require("../header")

header.jsを編集

次回 投稿編集機能を実装

参考

新規投稿している時、小数点がある数値が保存できなかった
number_fieldは整数しか扱えないらしいので、stepをつける
new.html.erb

form.number_field :~, step: "0.1"

また、integer型でDBを設計してしまっていたため、マイグレーションファイルをfloat型に修正
posts.rbマイグレーションファイル

t.float :~, null: false