【Ruby on Rails】簡単なメモアプリの作成｜自作ログイン機能をgemのdeviseなしで実装

動画で解説を見る

1 開発環境
2 Ruby on RailsでGemなしで自作ログイン機能の実装手順
3 おわりに

開発環境

Ruby:version 3.1.2
Ruby on Rails:version 7.0.4
Visual Studio Code:version 1.73.0
OS:Windows10

Ruby on RailsでGemなしで自作ログイン機能の実装手順

Ruby on Railsのログイン機能は、ユーザーに適したサービスを提供するために様々なWebアプリケーションで実装されています。

Ruby on Railsのログイン機能については、deviseというgemファイル有名ですが、今回はdeviseなしでログイン機能を自作で実装しています。

今回はメモアプリの作成で使用した「ログイン機能」のコードを用いて解説していきます。

ログイン機能のユーザーモデルの作成

まずはログイン機能で使用するユーザーモデルを作成します。

rails g model User

1	rails g model User

次にユーザーモデルのマイグレーションファイルに必要な「名前、メールアドレス、パスワード」のカラムを追加していきます。

class CreateUsers < ActiveRecord::Migration[7.0]
  def change
    create_table :users do |t|
      t.string :name
      t.string :email
      t.string :password
      t.timestamps
    end
  end
end

class CreateUsers < ActiveRecord::Migration[7.0]

def change

create_table :users do |t|

t.string :name

t.string :email

t.string :password

t.timestamps

end

上記の記述が完了したら、以下のコマンドを叩いてマイグレーションファイルを反映させます。

rails db:migrate

1	rails db:migrate

今回はユーザー機能の作成は省略しますため、ダミーデータをコンソールで挿入していきます。

rails c

rails c

User.create(name: "テストユーザー", email: "test@example.com", password: "12345678")

1	User.create(name: "テストユーザー", email: "test@example.com", password: "12345678")

パスワードについては、bcryptというgemファイルを使用して暗号化するのがおすすめですが、今回は省略しています。

また、今回は省略していますが、ユーザー機能を作成するときにはそれぞれのカラムに適したバリデーションをかけていきましょう。

ログイン機能のセッションコントローラーの作成

次にログイン機能で使用するセッションコントローラーを作成します。

rails g controller sessions

1	rails g controller sessions

ログイン機能のルーティングの作成

次にログイン機能に必要な「ログイン画面の表示、ログイン処理、ログアウト処理」のルーティングを作成していきます。

Rails.application.routes.draw do
  root :to => 'memos#index'
  get 'login', to: 'sessions#new', as: 'new_sessions'
  post 'login', to: 'sessions#create', as: 'create_sessions'
  delete 'logout', to: 'sessions#destroy', as: 'destroy_sessions'
  resources :memos, only: [:index, :update, :destroy, :create]
  post 'ajax_memos_create', to: 'memos#ajax_create', as: 'ajax_memos_create'
  get 'search', to: 'memos#search', as: 'search'
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
end

Rails.application.routes.draw do

root :to => 'memos#index'

get 'login', to: 'sessions#new', as: 'new_sessions'

post 'login', to: 'sessions#create', as: 'create_sessions'

delete 'logout', to: 'sessions#destroy', as: 'destroy_sessions'

resources :memos, only: [:index, :update, :destroy, :create]

post 'ajax_memos_create', to: 'memos#ajax_create', as: 'ajax_memos_create'

get 'search', to: 'memos#search', as: 'search'

# Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

# Defines the root path route ("/")

# root "articles#index"

end

それぞれnewがログイン画面の表示、createがログイン処理、destroyがログアウト処理のルーティングになります。

ログイン画面のビューの作成

次にログイン画面のビューを作成していきます。

<div class="wrapper">
    <div class="container">
        <h2>ユーザーログイン</h2>

        <%= form_with url: create_sessions_path, local: true, method: :post do |f| %>
            <%= f.label :email, "Email" %>
            <%= f.email_field :email, class: "form-box" %>
            <%= f.label :password, "Password" %>
            <%= f.password_field :password, class: "form-box" %>
            <%= f.submit "ログイン", class: "btn" %>
        <% end %>
    </div>
</div>

<h2>ユーザーログイン</h2>

<%= form_with url: create_sessions_path, local: true, method: :post do |f| %>

<%= f.label :email, "Email" %>

<%= f.email_field :email, class: "form-box" %>

<%= f.label :password, "Password" %>

<%= f.password_field :password, class: "form-box" %>

<%= f.submit "ログイン", class: "btn" %>

<% end %>

</div>

ログインに必要な情報であるEmailとPasswordを入力する画面です。

Webサービスによってはユーザー名とパスワードにしても良いですが、今回はEmailとPasswordでユーザーを判定するように処理をしていきます。

ログイン機能に必要な処理をセッションコントローラーに記述

次にログイン機能に必要な処理をセッションコントローラーに記述していきます。

class SessionsController < ApplicationController
    before_action :logged_in?, only: [:new, :create]

    def new

    end

    def create
        @user = User.find_by(email: params[:email], password: params[:password])
        if @user
            session[:user_id] = @user.id
            flash[:notice] = "ログインに成功しました。"
            redirect_to memos_path
        else
            flash[:alert] = "ログインに失敗しました。"
            render action: "new"
        end
    end

    def destroy
        session[:user_id] = nil
        redirect_to new_sessions_path
    end

    private

    def logged_in?
        if session[:user_id]
            @user = User.find(session[:user_id])
            flash[:notice] = "すでにログインしています。"
            redirect_to memos_path
        end
    end
end

class SessionsController < ApplicationController

before_action :logged_in?, only: [:new, :create]

def new

end

def create

@user = User.find_by(email: params[:email], password: params[:password])

if @user

session[:user_id] = @user.id

flash[:notice] = "ログインに成功しました。"

redirect_to memos_path

else

flash[:alert] = "ログインに失敗しました。"

render action: "new"

end

def destroy

session[:user_id] = nil

redirect_to new_sessions_path

end

private

def logged_in?

if session[:user_id]

@user = User.find(session[:user_id])

flash[:notice] = "すでにログインしています。"

redirect_to memos_path

end

createアクションでは、入力されたEmailとPassWordでユーザーモデルに保存されたユーザーレコードを探してきています。

もし、ユーザーが存在していたらsessionというメソッドでユーザーIDを発行し、セッションに保存したユーザーIDをクライアントのクッキーへ渡しています。

これにより、セッションで保存したユーザーIDとユーザーのクッキーに保存されたユーザーIDを照合してユーザー認証することができます。

また、EmailとPassWordでDBからユーザーを探せなかった場合、ログインできないようにしています。

destroyアクションではsessionメソッドでユーザーIDをnilとしてクライアントのクッキーへ渡すことにより、ログアウト状態にすることができます。

そのため、作成したlogged_in?というメソッドは、sessionメソッドでユーザーIDが存在していればログイン状態だと判断することができます。

また、それぞれの処理にフラッシュメッセージやエラーメッセージ、ログイン後の遷移先もどのようにするか検討してみてもらえればと思います。

ログイン機能によるアクセス制限をmenoコントローラーに記述

次にログイン機能によるアクセス制限をmenoコントローラーに記述していきます。

class MemosController < ApplicationController
  before_action :current_user

  def index
    @memo_new = Memo.new
    @memos = Memo.all
  end

  def create
    @memo_new = Memo.new(memos_params)
    @memos = Memo.all
    if @memo_new.save
      redirect_to root_path
    else
      render action: "index"
    end
  end

  def update
    @memo = Memo.find(params[:id])
    @memo.update(memos_params)
    redirect_to root_path
  end

  def destroy
    @memo = Memo.find(params[:id])
    @memo.destroy
    redirect_to root_path
  end

  def ajax_create
    @memo_new = Memo.new(memos_params)
    @memos = Memo.all

    if @memo_new.save
      flash.now[:notice] = "メモの保存に成功しました。"
    else
      flash.now[:alert] = "メモの保存に失敗しました。"
    end
  end

  def search
    seach_word = params[:word]
    @memos = Memo.where("title LIKE ? or description LIKE ?", "%#{seach_word}%", "%#{seach_word}%")
    if @memos.count > 0
      flash.now[:notice] = "#{@memos.count}件のメモが見つかりました。"
    else
      flash.now[:alert] = "#メモが見つかりませんでした。"
    end
  end

  private

  def memos_params
    params.require(:memo).permit(:title, :description)
  end

  def current_user
    if session[:user_id]
      @user = User.find(session[:user_id])
    else
      flash[:alert] = "ログインする必要があります。"
      redirect_to new_sessions_path
    end
  end

end

class MemosController < ApplicationController

before_action :current_user

def index

@memo_new = Memo.new

@memos = Memo.all

end

def create

@memo_new = Memo.new(memos_params)

@memos = Memo.all

if @memo_new.save

redirect_to root_path

else

render action: "index"

end

def update

@memo = Memo.find(params[:id])

@memo.update(memos_params)

redirect_to root_path

end

def destroy

@memo = Memo.find(params[:id])

@memo.destroy

redirect_to root_path

end

def ajax_create

@memo_new = Memo.new(memos_params)

@memos = Memo.all

if @memo_new.save

flash.now[:notice] = "メモの保存に成功しました。"

else

flash.now[:alert] = "メモの保存に失敗しました。"

end

def search

seach_word = params[:word]

@memos = Memo.where("title LIKE ? or description LIKE ?", "%#{seach_word}%", "%#{seach_word}%")

if @memos.count > 0

flash.now[:notice] = "#{@memos.count}件のメモが見つかりました。"

else

flash.now[:alert] = "#メモが見つかりませんでした。"

end

private

def memos_params

params.require(:memo).permit(:title, :description)

end

def current_user

if session[:user_id]

@user = User.find(session[:user_id])

else

flash[:alert] = "ログインする必要があります。"

redirect_to new_sessions_path

end

current_userメソッドでユーザーがログインしていない状態だった場合、リダイレクトで遷移先をログインページに飛ばす処理をしています。

before_actionでメモコントローラーが呼び出された場合は必ず実行するようにしておけば、全てのメモコントローラーにアクセス制限をかけるという意味になります。

もし、適用したいアクションを指定したい場合は、exceptやonlyで指定しましょう。

ヘッダーにログインとログアウトボタンを作成

次にヘッダーにログインとログアウトボタンを作成します。

<!DOCTYPE html>
<html>
  <head>
    <title>MemoApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@rails/ujs@6.0.2/lib/assets/compiled/rails-ujs.js"></script>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>

  <body>
    <div class="wrapper header-color">
      <div class="container flex-between">
        <div class="header-left">
          <h1>MemoApp</h1>
        </div>

        <div class="header-right">
          <% if @user.nil? %>
            <%= link_to "ログイン", new_sessions_path, method: :get %>
          <% else %>
            ログインユーザー：<%= @user.name %>さん
            <%= link_to "ログアウト", destroy_sessions_path, method: :delete %>
          <% end %>
        </div>
      </div>
    </div>

    <div id="notice">
      <%= render "layouts/notice" %>
    </div>

    <%= yield %>
  </body>
</html>

<body>

<h1>MemoApp</h1>

</div>

<% if @user.nil? %>

<%= link_to "ログイン", new_sessions_path, method: :get %>

<% else %>

ログインユーザー：<%= @user.name %>さん

<%= link_to "ログアウト", destroy_sessions_path, method: :delete %>

<% end %>

</div>

<%= render "layouts/notice" %>

</div>

もし、ユーザーがログインしていればログアウトボタンを表示、ログアウトしていればログインボタンを表示するという条件分岐になります。

@userにはログインユーザーの情報が代入されているため、もしログインしていればログインユーザーのみユーザー名を表示することで、ログイン状態かわかりやすいようにすることもできます。

ヘッダーのメニューボタンのデザインを調整

最後にヘッダーのメニューボタンのデザインを調整します。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #696969;
    font-size: 16px;
    font-family: sans-serif;
    list-style-position: inside;
}

.header-color {
    background-color: #4169e1;
}

.header-left {

}

.header-right {
    color: #ffffff;
    display: inline-block;
    line-height: 60px;
}
.header-right a{
    text-decoration: none;
    color: inherit;
}


.green-color{
    background-color: green;
}

.red-color{
    background-color: red;
}

.notice-text {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
}

h1 {
    font-size: 36px;
    color: #ffffff;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 24px;
}

.wrapper {
    width: 100%;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
}

.col-box-1{
    width: 100%;
    padding: 6px;
}

.col-box-2{
    width: 50%;
    padding: 6px;
}

.col-box-3{
    width: 33.3%;
    padding: 6px;
}

.col-box-4{
    width: 25%;
    padding: 6px;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.flex-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.memo-header {
    width: 100%;
    padding: 6px;
    min-height: 40px;
    background-color: #ffd700;
    border-radius: 6px 6px 0 0;
}

.memo-center {
    width: 100%;
    padding: 6px;
    min-height: 100px;
    background-color: #fffacd;
}

.memo-footer {
    width: 100%;
    padding: 6px;
    background-color: #ffd700;
    border-radius: 0 0 6px 6px;
    text-align: center;
}

.memo-other {
    width: 100%;
    padding: 6px;
    text-align: right;
}

.form-box {
    background-color: transparent;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 6px;
    width: 100%;
}

.search-box {
    background-color: transparent;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 6px;
    width: 30%;
}

textarea {
    min-height: 80px;
}

.btn {
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 3px 12px;
}

.field_with_errors {
    display: contents;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

.header-color {

background-color: #4169e1;

}

.header-left {

}

.header-right {

color: #ffffff;

display: inline-block;

line-height: 60px;

}

.header-right a{

text-decoration: none;

color: inherit;

}

.green-color{

background-color: green;

}

.red-color{

background-color: red;

}

.notice-text {

color: #ffffff;

font-weight: bold;

text-align: center;

padding: 10px 0;

}

h1 {

font-size: 36px;

color: #ffffff;

}

h2 {

font-size: 24px;

}

h3 {

font-size: 24px;

}

.wrapper {

width: 100%;

}

.container {

margin: 0 auto;

width: 100%;

max-width: 1170px;

}

.col-box-1{

width: 100%;

padding: 6px;

}

.col-box-2{

width: 50%;

padding: 6px;

}

.col-box-3{

width: 33.3%;

padding: 6px;

}

.col-box-4{

width: 25%;

padding: 6px;

}

.flex-start {

display: flex;

flex-wrap: wrap;

justify-content: start;

}

.flex-between {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

今回はヘッダーにflexでbetweenを適用することにより、左右に展開することができます。

上記のコーディングは簡易的なデザインなので、好みでデザインを調整してもらえればと思います。

おわりに

Ruby on Railsで自作ログイン機能の実装について解説してきましたが、いかがだったでしょうか。

最初はログイン機能を自作で実装するのはとても難しく感じるかもしれませんが、自作ログイン機能が実装できれば基本的なクッキーとセッションの理解も深くなっていくかと思います。

是非、ユーザーがWebアプリケーションを使いやすいようにするためにも、ログイン機能の実装にチャレンジにしてみてください。