はじめに
前回はDeviseを導入して、ユーザーの新規登録やログインができるようにしました。
今回はそれを一歩進めて、ログインしているかどうかで画面を切り替えるためにヘッダーを作っていきます。
具体的には：
- ログインしていない人はトップページを見るだけ
- ログインしている人はヘッダーが出て、マイページやログアウトができる
といった仕組みを作っていきます。
これまでの記事はこちら👇
ポートフォリオ構築の振り返り（第1回：プロジェクト概要と設計）
ポートフォリオ構築の振り返り（第2回：Railsアプリ立ち上げ〜トップページ表示）
ポートフォリオ構築の振り返り（第3回：Deviseでログイン機能を実装）
トップページのルーティング
config/routes.rb にルートを設定します。
Rails.application.routes.draw do
root to: 'public/homes#top' # ログイン前トップページ
devise_for :users
end
コントローラとビューを準備
トップページ用にコントローラとビューを作ります。
rails g controller public/homes top
生成された app/views/public/homes/top.html.erb を仮でこんな感じに。
<h1>ようこそ！</h1>
<p>ここはログイン前のトップページです。</p>
ヘッダーを作る
すべてのページに共通して表示されるヘッダーを作ります。
Railsには app/views/layouts/application.html.erb というファイルがあります。
これは 全ページに共通するレイアウトを定義できる特別なファイル です。
つまりここに書いた内容は、どのページを開いても必ず表示されるんですね。
なので、ナビゲーションバー（ヘッダー）をここに追加します。
<!DOCTYPE html>
<html>
<head>
<title>Sumple-app</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<header>
<nav>
<% if user_signed_in? %>
<%= link_to 'マイページ', user_path(current_user) %>
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
<% else %>
<%= link_to '新規登録', new_user_registration_path %>
<%= link_to 'ログイン', new_user_session_path %>
<% end %>
</nav>
</header>
<%= yield %>
</body>
</html>
-
user_signed_in?はDeviseが用意してくれている便利メソッドで、ユーザーがログインしているかどうかを判定できます。 - ログインしているときは「マイページ」「ログアウト」を表示。
- ログインしていないときは「新規登録」「ログイン」を表示。
<%= yield %>というのが、それぞれの固有ページを表示する部分！
app/views/items/index.html.erb を表示すると、application.html.erbで作ったヘッダーと、 <%= yield %> の部分に index.html.erb の内容が挿入されるよ。
新規登録画面とログイン画面
Deviseを導入すると、自動で以下の画面が用意されています。
-
http://localhost:3000/users/sign_up→ 新規登録画面 -
http://localhost:3000/users/sign_in→ ログイン画面
それぞれにアクセスすると、すでにフォームが出来上がっていて、すぐにユーザー登録やログインができます。
これをカスタマイズすれば、デザインを変えたり入力項目を増やしたりすることも可能です。
（デザインは後からやります！）
実際に動かしてみる
-
rails sでサーバーを起動 -
http://localhost:3000にアクセス - 右上（ヘッダー）に「新規登録」「ログイン」が表示される
- 新規登録をしてログインすると、今度は「マイページ」「ログアウト」に切り替わる
これで、ログイン状態によって表示を切り替える仕組みができました！
まとめ
今回は、ログイン前後で画面を切り替える仕組みを作りました。
-
ヘッダーの作成
application.html.erbに共通ヘッダーを追加し、ログイン状態によって「ログイン／新規登録」と「マイページ／ログアウト」を切り替えました。 -
ユーザー新規登録画面とログイン画面
Deviseが自動生成してくれる画面を使い、ユーザー登録・ログイン・ログアウトの基本動作を確認しました。 -
全体の流れ
これにより、ユーザーがログインしているかどうかで画面を変えることができ、アプリとしての「入口」が完成しました。
次回は、マイページや投稿機能など、ログイン後の画面をさらに充実させていきます。
ポートフォリオ構築の振り返り（第5回：投稿機能と画像投稿フォームの作成）
用語説明
-
application.html.erb
Railsで全ページに共通するレイアウトを設定するファイル。ヘッダーやフッターなどをここに書くと、全ページで共通して表示される。 -
ヘッダー（ナビゲーションバー）
ページ上部に表示されるメニュー。ログイン・ログアウト、新規登録、マイページなどのリンクを置くことが多い。 -
Deviseのビュー
Deviseを導入すると「新規登録」「ログイン」「パスワードリセット」などの画面が自動で生成される。 -
user_signed_in?
Deviseが提供してくれるメソッド。ユーザーがログインしているかどうかをtrue/falseで判定できる。 -
current_user
今ログインしているユーザーの情報を取得できる便利なメソッド。たとえばcurrent_user.nameでログイン中ユーザーの名前を表示できる。