LoginSignup
0
0

More than 3 years have passed since last update.

2ステップで超簡単!devise導入方法!!(rails5版)

Last updated at Posted at 2020-06-11

どうもこんにちは!
今回初投稿のこの記事では、deviseを使ってログイン機能の実装方法をお伝えします。
インストールから実際に表示させてログインするまでの流れを解説したいと思います。

deviseとは

そもそもdeviseとは何でしょうか。
deviseは、ログイン機能やユーザ登録機能などを簡単に実装できるgemのことです。
初期状態では、emailとパスワードを設定してログイン、サインアップすることができます。
会員機能を実装したい際にはぜひ使いたいgemですね!

ステップ1:deviseをインストール

まずはdeviseをインストールしましょう。

Gemfileの一番下に「gem 'devise'」を書き込みます。

Gemfile
gem 'devise'

追加したgemをアプリケーションに読み込ませます。
以下をターミナルで打ち込みましょう。

$ bundle install

そしてdeviseの初期設定を行います。

$ rails g devise:install

以下のような表示になればインストールは成功です!
スクリーンショット 2020-06-11 17.47.28.png

ステップ2:ログイン画面を表示する

それでは実際にログイン画面を表示していきましょう。
今回は、ユーザ情報を保存するためのユーザーテーブルをデータベース内に作っていきます。
テーブル名は「User」です。
以下をターミナルに打ち込みましょう。

$ rails g devise User

本来、1からテーブルを作成する場合はテーブルと一緒にカラムも作成してあげる必要がありますが、deviseを使用するとユーザーテーブルとカラムを自動的に作成してくれます。
実際に作成されたマイグレーションファイルを確認してみましょう。

db/migrate/(年月日時分秒)_devise_create_users.rb
class DeviseCreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: "" #メールアドレス
      t.string :encrypted_password, null: false, default: "" #パスワード

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      # t.integer  :sign_in_count, default: 0, null: false
      # t.datetime :current_sign_in_at
      # t.datetime :last_sign_in_at
      # t.string   :current_sign_in_ip
      # t.string   :last_sign_in_ip

      ## Confirmable
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      # t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      # t.string   :unlock_token # Only if unlock strategy is :email or :both
      # t.datetime :locked_at


      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

ログイン機能に必要なカラムは、メールアドレスとパスワードです。メールアドレスはt.string :email,……の行、パスワードはt.string :encrypted_password,……の行です。

確認ができたら、このファイルをデータベースへマイグレーションします。

$ rails db:migrate

ここまでやれば準備完了です!
最後にブラウザで表示してみましょう。

rails s でサーバーを起動し、URLの後ろに「/users/sign_in」を入力してログイン画面を開きましょう。
スクリーンショット 2020-06-11 19.08.47.png
このように表示されるはずです。
続いてURLの後ろに「/users/sign_up」を入力してサインアップ画面を開きましょう。
スクリーンショット 2020-06-11 19.10.43.png

この表示がされれば完成です。
あとはお好きなように書き換えてオリジナルのサイトを作りましょう!

 

最後までお読みいただきありがとうございました!
今後さらに詳しい記事や発展的な内容を書いていきたいと思いますので、読んでいただけると嬉しいです。
ツイッターもやってます。日常のつぶやきやごく稀に情報発信もしておりますので、フォローしてくださると喜びます☺️→@saketi_sei

0
0
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
0
0