Techpit:テックピット
  前のパートに戻る 完了して次のパートへ  

  3-1 Deviseの導入

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

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

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

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

公式ドキュメント)devise

本パートの目標物


本パートでは、下記の画像のようにデザインは何もない状態のサインアップ・サインイン機能を実装をしていきます。


☝️ サインアップ画面


☝️ サインイン画面

目標物を作成するまでの流れ


  1. DeviseのGemをインストール
  2. Deviseのフラッシュメッセージを追加
  3. Deviseのビューファイルをインストール
  4. Userモデルを作成
  5. Usersテーブルを作成
  6. Deviseの導入の確認
  7. ナビゲーションヘッダーの非表示

Deviseの導入に関しても、基本的に公式ドキュメントに沿って行っていくので、導入方法を覚える必要はないです。

では、実際に進めていきましょう。

1. DeviseのGemをインストール


まず今回導入するDeviseの公式ドキュメントにアクセスしてください。

公式ドキュメント)devise

アクセスしたら「Getting started」の箇所を見ましょう。


「Add the following line to your Gemfile」とあるので、まずGemfileの最下部に以下のコードを追加します。

techpitgram
└── Gemfile

追加したgemを反映させるためにbundle installを実行します。

$ bundle install

次に「Next, you need to run the generator」と公式ドキュメントにあるように以下のコマンドを実行してください。

$ rails generate 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はメール送信の設定で本教材ではメール送信の実装は行わないので、1は飛ばします。

2も既にrootルーティングを「2-3 仮のトップページを表示」で定義しているので、2も飛ばして大丈夫です。

3, 4に関しては下記に説明を記載しています。

2. Deviseのフラッシュメッセージを追加


フラッシュメッセージとはある動作を行った時、成功したのか、もしくは失敗したのか、相手に知らせる機能のことです。

例えばメールアドレスが正しくない状態でログインしようとしたときに、ログインに失敗した旨をメッセージとして表示したりします。

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

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

3. Deviseのビューファイルをインストール


以下のコマンドでdevise用のviewファイル(表示する画面)を生成します。

$ rails g devise:views

実行すると以下のようなファイルが生成されます。どのようなファイルが生成されたかを見てみましょう。

実行結果を見てみることは大事です。様々な「.html.erb」という拡張子のファイルが作成されています。Deviseを使うと、コマンド1つで一気に複数のファイルを作成してくれます。1から自分で作るより非常に便利です。これがGemの魅力でもあります。

$ rails g devise:views
   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

4. Userモデルを作成


モデルとはMVCで言うところのMにあたり、データベースへのアクセスをはじめ、情報のやり取りを行うシステムの階層です。

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

$ rails g devise 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

5. Usersテーブルを作成


先ほどUserモデルを作成した際に、db/migrate/フォルダの中にマイグレーションファイルが作成されました。

マイグレーションファイルとは、テーブルの設計図です。設計図のままだと特に何かを作成することはないので、設計図をもとにテーブルを作成する必要があります。

Railsだとマイグレーションファイルを実行することで、設計図を元にテーブルを作成したり、カラムを追加したりできます。

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

$ 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) =======================

6. Deviseの導入の確認


Gemを新しく追加しているので、サーバーを再起動させます。まず以前立ち上げていたサーバーを終了させます。終了させるにはcontrol + Cを同時に押せば大丈夫です。

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

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

7. ナビゲーションヘッダーの非表示


ログインしていないユーザーにはNavbarを表示しないようにしていきます。

というのもマイページ機能やお気に入り機能など、アカウント登録していないユーザーは、使うことはありません。その際には以下のような 「if current_user」という条件式を追加することでログインしているかを確認してログインしていなかった場合にNavbarを非表示にするということが可能になります。

参考)Rails deviseで使えるようになるヘルパーメソッド一覧

では、application.html.erbに以下のように編集してください。

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

では、http://localhost:3000/users/sign_up にアクセスしてみてください。以下のようにNavbarが表示されていなければ、問題なく動作しています。


ちなみにサインイン画面は以下のように表示されれば大丈夫です。

サインイン画面)http://localhost:3000/users/sign_in


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

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

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

お疲れさまでした。

議論
7 質問