【Rails】ユーザーによって表示画面を分ける① present

今回はユーザーの状態によって、出現する画面を分ける方法について解説していきます。それでは、詳しく見ていきましょう。

やりたいこと

Todoアプリを使用して説明していきます。ユーザーが自由にタスクやコメントができるアプリを想像してください。

そのアプリ上でやりたいことは、こんな感じです。

  1. ユーザーがプロフィールを作成していない場合
    ▶︎プロフィール編集画面に誘導するボタンを表示
  2. ユーザーが既にプロフィールを作成している場合
    ▶︎作成したプロフィール画面を表示


まずは上記1のパターンです。

右上の画像をクリックすると、ボタンが出現します。プロフィールを登録していないユーザーの場合、下図のオレンジ部のように「Edit Profile」が表示されます。

ボタンが出現

「Edit Profile」を押すと、プロフィールを編集できるフォームが現れます。

プロフィール編集画面



次に上記2のパターンです。1と同じくボタンが出現しますが、プロフィールの部分が「Profile」に変わりました。

ボタンが出現

Profileを押すと、既に作成済のプロフィール情報を見ることができます。またEdit Profileボタンから編集も可能です。

プロフィール詳細画面

では、このようにユーザーの状態によって表示される画面を切り替えるにはどうすれば良いでしょうか?実際のコードを見ながら解説していきます。

present?メソッドで判別しよう

キーワードは、「present?」メソッドです。
簡単に説明するとこんな感じです。

present?メソッドとは?

あるオブジェクトが存在するかしないかを判別するメソッドです。存在すればTrue、存在しなければFalseを返します。

プロフィールのニックネームや自己紹介文が既に存在しているかを、このpresent?メソッドで場合分けしていきます。

ボタンの出現はheader部分で実装しているので、そちらのコードを見ながら説明していきます。またhaml形式でコードを書いているので、ERB形式で変換したい場合はこちらをご利用ください。

!!!
%html
  %head
(省略)
  %body
  %header.header
    %p.header_pageTitle
      = link_to 'Boards' ,root_path

    - if user_signed_in?
      .dropdown
        = image_tag current_user.avatar_image, class: 'header_avatar dropbtn'
        
       #ここで場合分けを行う
     .dropdown-content
          = link_to 'Add new board',new_board_path
          - if current_user.profile.present?
            = link_to 'Profile',profile_path
          -else
            = link_to 'Edit Profile',edit_profile_path
          = link_to 'Sign Out', destroy_user_session_path, data: { method: 'delete' }
    - else
      = link_to 'Sign Up', new_user_session_path, class: 'header_loginBtn'

少し長いので、切り分けて説明していきます。まずはユーザーがサインインしているかしていないかで、場合分けを作っています。

#サインインしていれば、ボタンが出現
- if user_signed_in?
(省略)
#サインインしていなければ、サインアップ(ユーザー登録)画面へ誘導
- else
  = link_to 'Sign Up', new_user_session_path, class: 'header_loginBtn'
#ここで場合分けを行う
.dropdown-content
  = link_to 'Add new board',new_board_path

 #サインインしているユーザーのプロフィールが存在している場合
  - if current_user.profile.present?
 #プロフィールを表示する
    = link_to 'Profile',profile_path
 #サインインしているユーザーのプロフィールが存在していない場合
  -else
 #プロフィール編集ページに遷移する
    = link_to 'Edit Profile',edit_profile_path

こんな感じでpresent?を使って、ユーザーの状態に応じて出現するボタンを変えることができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です