6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

マイページ作成

Last updated at Posted at 2020-03-07

##マイページのルーティング
マイページを表示する際にはusersコントローラーのshowアクションを動かせるようにルーティングを設定します。
【例】モデル名をTweetとします。

config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  root to: 'tweets#index'
  resources :tweets
  resources :users, only: :show
end

上記で/users/:idのパスでアクセスした際にusers_controller.rbのshowアクションを呼ぶルーティングを設定しました。
##マイページボタンを記述
マイページへのパスは/users/ログイン中のユーザーのidです。
今回はapplication.html.erbに記述します。
【例】ユーザー名はnicknameとします。

app/views/layouts/application.html.erb
〜省略〜
<span><%= current_user.nickname %>
            <ul class="XXXX">
              <li>
                <%= link_to "マイページ", "/users/#{current_user.id}" %>
                <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
              </li>
            </ul>
          </span>
〜省略〜

上記でユーザー名には、current_user.nicknameとすることで現在ログインしているニックネームを表示できます。
マイページへのリンクは、/users/:idと指定します。:idの部分には表示したいユーザーのレコードのidを入れる必要がありますが、今回はログイン中のユーザーのページなので、current_user.idとします。
##ユーザーに関するアクションをコントローラーに定義します
まずはターミナルで

$ rails g controller users

次にshowアクションで表示するのはログイン中ユーザーのマイページとなるため、
必要な情報はニックネームとログイン中のユーザーと今回はツイート投稿の2つとします。
@nickname@tweetsを変数に定義します。

app/controllers/users_controller.rb
class UsersController < ApplicationController
  def show
    @nickname = current_user.nickname
    @tweets = current_user.tweets
  end
end

上記で@nicknameは、現在ログインしているユーザーのレコードのインスタンスが代入されているcurrent_userを利用し、そのnicknameカラムの値を取得しています。
@tweetsも、現在ログインしているユーザーのツイート投稿を取得して、インスタンス変数に代入しています。
##マイページのビューの作成
【例】

app/views/users/show.html.erb
<div class="XXXX">
  <p><%= @nickname %>さんの投稿一覧</p>

  <% @tweets.each do |tweet| %>
    <div class="YYYY" style="background-image: url(<%= tweet.image %>);">
      <%= simple_format(tweet.text) %>
      <span class="ZZZZ"><%= tweet.name %></span>
    </div>
  <% end %>
</div>

上記でツイート投稿と画像投稿できるようになりました。
each文でツイート投稿と画像投稿を探して表示しています。
##投稿者名を表示
今回はTweetモデルなので、Tweetモデルに対してTweet belongs to Userでアソシエーションを定義すると、Tweetモデルのインスタンス.userと記述でそのインスタンスが属しているUserモデルのインスタンスを取得することができます。
【例】アソシエーションを利用しない場合

$ rails c
[1] pry(main)> tweet = Tweet.find(1)
[2] pry(main)> User.find(tweet.user_id)

usersテーブルに対して、idがtweetのuser_idと等しいレコードを取得しています。

【例】アソシエーションを利用する場合

$ rails c
[1] pry(main)> tweet = Tweet.find(1)
[2] pry(main)> tweet.user

上記のようにアソシエーションを利用するとコードがすっきりします。
【例】

<a href="/users/<%= tweet.user.id %>">
<span>投稿者</span><%= tweet.user.nickname %>
</a>

上記のように記述し、Sequel Proのtweetsテーブルのuser_idカラムのレコードを入れてあげれば、nicknameが表示できます。
user_idがuserの部分になるので自分で数字を入れないとNULLになってしまいます。
##hrefとは
aタグの属性の一つで、hrefでリンク先の場所を指定することができます。
トップページに移動させる場合は

<a href="#">ページトップに移動</a>

上記の記述でページトップに移動します。
##includesメソッド
関連している複数のテーブルからデータを取得してくるときのアクセス回数を大きく減らすことができるメソッドです。

app/controllers/tweets_controller.rb
〜省略〜
def index
    @tweets = Tweet.includes(:user)
  end
〜省略〜

##投稿者のマイページにアクセス
【例】

app/controllers/users_controller.rb
class UsersController < ApplicationController
  def show
    user = User.find(params[:id])
    @nickname = user.nickname
    @tweets = user.tweets
  end
end

上記で表示されるユーザー名のidをparamsで取得して、ユーザーのレコードを変数userに代入しています。
それから、各インスタンス変数ではcurrent_userを変数userに変えています。
その上で、@nicknameでは、ユーザーのnicknameを取り出しています。
アソシエーションを利用しuser.tweetsとすることで、ユーザーが投稿したツイートを取得し、@tweetsに代入しています。

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?