とにかくログイン機能を作りましょう
Railsを用いたWEBアプリケーションでログイン機能を作るためだけの記事です。
これを体に覚え込ませて爆速で作れるようになっちゃいましょう！
アプリの雛形を作る
これを作らないと何も始まりません！ターミナルから以下のコマンドを実行しましょう。
% rails _5.2.3_ new アプリ名 -d mysql
上記のコマンドによりアプリの雛形ができたらアプリのディレクトリに移動しましょう。
% cd アプリ名
deviseのインストール
エディタでGemfileを開き、deviseを追加します。
deviseとは、ユーザー認証に必要な機能を簡単に作れるようになるgemのことです。
また、今回は私の好みでerbではなくhamlを使うのでerbファイルをhamlに変換するgemもインストールします。
gem 'devise'
gem "haml-rails"
Gemfileにdeviseを追記したらインストールします！
% bundle install
インストールが終了したらerbファイルをhamlに変換しておきます。
% rails haml:erb2haml
上記の変換作業が終わったらdeviseの設定ファイルを作成します。
% rails g devise:install
で、以下の設定ファイルが出来ます。
config/initializers/devise.rb
config/locales/devise.en.yml
データベース周りの設定
続いてユーザーモデルの作成するため以下のコマンドを実行します。
% rails g devise user
これでルーティングファイルにもdeviseのルーティングが記載されます。
Rails.application.routes.draw do
devise_for :users
end
このアプリで使用するデータベースが未作成の状態なので作りましょう。
% rails db:create
モデルを作成した時点でマイグレーションファイルが作成されていると思うので、マイグレーションしましょう
xxxxxxxxxxxxxx_devise_create_users.rb
% rails db:migrate
これでデータベース周りの設定は完了です。
トップページを表示させる
続いて、トップページのビューファイルを作ります。
ここにログイン、新規登録、ログアウトへの導線を作っておきしょう。
今回は何らかの投稿をユーザーで投稿できるアプリ、と仮定しapp/views/postsにindex.html.hamlを作ります。
deviseをインストールすると、user_signed_inというヘルパーメソッドが使えるようになるので、これで未ログイン時とログイン時で表示を分けましょう。
%header
- if user_signed_in?
%div
= link_to "ログアウト", destroy_user_session_path, method: :delete
- else
%div
= link_to "ログイン", new_user_session_path
= link_to "新規登録", new_user_registration_path
トップページができたらroutes.rbにルーティングを追記します。
Rails.application.routes.draw do
devise_for :users
root to: 'posts#index'
end
現時点でトップページを開こうとすると下記のようなエラーになると思うので、コントローラを作ります。
% rails g controller posts
これでコントローラができました！
作成されたコントローラにindexアクションを追加すればトップページが開けるはずです。
class PostsController < ApplicationController
def index
end
end
何とも味気ない画面ですが、うまくいっていれば下記のような画面になるはずです。
ログインと新規登録
続いて、ログインと新規登録画面の作成を行います。
下記のコマンドを実行すると、新規登録とログイン用のビューが作成されます。
% rails g devise:views
.新規登録画面
app/views/devise/registrations/new.html.erb
・ログイン画面
app/views/devise/sessions/new.html.erb
今回はhamlで作成するので、下記のコマンドを再度実行してerbをhamlに変換しておきましょう。
% rails haml:erb2haml
ここまで出来れば新規登録、ログイン、ログアウトができるはずなので早速実践してみます。
・新規登録をクリック
・メールアドレスとパスワードを入力して"sign up"をクリック
・トップページに遷移し、ログアウトが表示されるのでログアウトをクリック
・ログアウトできたので、続いてログインをクリック
・メールアドレスとパスワードを入力してログインをクリック
・トップページに遷移してログアウトが表示される。
スタイルが当たってないので見た目はしょぼいですが、とりあえずサーバーサイドの実装は完了です！
今回の記事を参考にして、ぜひ爆速実装を目指してみてください！