前のパートに戻る 完了して次のパートへ  

  2-2 Deviseの導入

Deviseの導入


この章ではユーザーの新規登録・ログイン機能を開発していきます。

ユーザーの新規登録・ログイン機能を簡単に作成するために今回DeviseというGemを導入します。

Deviseはユーザー登録やログイン機能などの認証に必要な機能を簡単に追加できるRails用のGemです。

公式ドキュメントはこちらです。

devise公式ドキュメント

早速導入していきましょう。

この章で学べること


- Deviseを使ったユーザー新規登録・サインイン機能の実装

学習キーワード


- Devise
- フラッシュメッセージ
- Gem
- モデル

DeviseをGemfileに追加してインストールする


Gemfile というファイル内の最下部にdeviseを追加します。

gem 'devise'

次にbundle install を行い、deviseを使えるようにします。

$ bundle install

次に以下のコマンドを実行してdeviseの初期ファイルのインストールを行います。

$ rails g devise:install

上記コマンドを実行すると以下のファイルが作成されます。

create  config/initializers/devise.rb
create  config/locales/devise.en.yml

ファイルを作成すると、ターミナルに以下のようなメッセージが表示されます。

こちらはdeviseを使う上での初期設定になるので、1から順に行なって行きましょう。

===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================

1に書いてあるとおり、 config/environments/development.rbの末尾のendの上に以下のコードを追加してください。

config
└── environments
    └── development.rb


deviseのフラッシュメッセージを追加する


フラッシュメッセージとはある動作を行った時、成功したのか、もしくは失敗したのか、相手に知らせる機能のことです。 たとえばメールアドレスが正しくなく、ログインに失敗した時、エラーを表示したりします。

app/views/layouts/application.html.erbに以下のコードを追加してください。

app
└── views
    └── layouts
        └── application.html.erb

devise用のviewファイルをインストールする


以下のコマンドでdevise用のviewファイルを生成します。

deviseのviews(表示される画面)の生成を行います。

$ rails g devise:views

実行すると以下のようなファイルが生成されます。どのようなファイルが生成されたかを見てみましょう。実行結果を見てみることは大事です。さまざまな「.html.erb」という拡張子のファイルが作成されています。例えば「app/views/devise/registrations/new.html.erb」はサインアップ画面のviewファイルになります。Deviseを使うと、コマンドひとつで一気に複数のファイルを作成してくれます。一から自分で作るより全然便利ですよね。これがGemの魅力でもあります。

invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/email_changed.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb

Userモデルを作成する


以下のコマンドでdevise用のUserモデルを作成します。 モデル名の値は任意です。作成したいModel名で作成できます。今回はUserというモデル名で作成します。

$ rails g devise User

以下のようなファイルが作成されました。こちらもどのような物が生成されたか見てみましょう。

invoke  active_record
      create    db/migrate/20180925032152_devise_create_users.rb
      create    app/models/user.rb
      invoke    test_unit
      create      test/models/user_test.rb
      create      test/fixtures/users.yml
      insert    app/models/user.rb
       route  devise_for :users

Usersテーブルを作成する


先ほどUserモデルを作成した際、db/migrate/フォルダの中にマイグレーションファイルが作成されました。 ただマイグレーションファイルはあくまでテーブルの設計図です。 設計図をDBへ反映しなければ、テーブルを作る・カラムを追加するなどの変更を行うことはできません。 なのでrails db:migrate コマンドを実行することで、マイグレーションファイルを元にテーブルを作成します。

マイグレーションファイルを実行するには以下のコマンドで実行できます。

$ rails db:migrate

マイグレーションを実行すると、以下のように複数のテーブルが作られます。

== 20180925032152 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0013s
-- add_index(:users, :email, {:unique=>true})
   -> 0.0008s
-- add_index(:users, :reset_password_token, {:unique=>true})
   -> 0.0018s
== 20180925032152 DeviseCreateUsers: migrated (0.0042s) =======================

サーバーを立ち上げてdeviseの導入がうまくいったかの確認


まず以前立ち上げていたサーバーを終了させます。終了させるにはcontrol とcを同時に押せば大丈夫です。

その後「rails s コマンド」でローカルサーバーを立ち上げます。ちなみにsはserverの略です。

$ rails s

そして、http://localhost:3000/users/sign_up を開くと以下の画面のようにログイン画面が表示されていれば問題ありません。

058d6d3e17e54c31d10ceb198df23d7e.png

以上でこのパートは終了です。DeviseというGemの力を借りたことで、簡単に会員登録機能ができました。

次のパートでは実際にログインができるかどうかの確認を行います。

※実際に運用している世の中のサービスではDeviseというGemを使っている場合もあれば使っていない場合もあります。なぜかというと、Gemを使うとスピーディーな開発ができて便利という反面、0から自分で開発していないためにできることの制約があります。そういった面も踏まえてGemを使うか使わないかの判断はした方がよいです。

議論
9 質問
このコースの評価は?