概要

まっさらな空のディレクトリから、

1. Railsのアプリを立ち上げて
2. deviseでユーザー認証機能を導入し
3. ユーザー情報の項目を追加し
4. ユーザープロフィール表示ページを追加する

までの手順をまとめる（手順だけ）。 サンプルとして、rails scaffoldでシンプルなブログアプリ(devise_app)をつくる。

参考資料

本記事は下記のページを元にして手順を捕捉したものである。
devise導入からユーザーのプロフィール画面を作成するまで

実施環境

• MacOS Mojave10.14.6
• Rails 6.0.0
• devise 4.7.1
• devise-i18n 1.8.2

上記は私が確認した際のバージョンであり、下記手順で実行するとdeviseおよびdevise-18nは最新バージョンがインストールされる。

手順

1. rails new devise_appする
2. Gemfileにgem 'devise', gem 'devise-i18n'を追記し、bundleする
3. rails g scaffold blog title:string content:textする
4. rails db:migrateする
5. rails g devise:installする
6. config/environments/development.rb にconfig.action_mailer.default_url_options = { host: 'localhost', port: 3000 }を追記
7. config/routes.rb にroot to: "blogs#index"を追記

8. app/views/layouts/application.html.erb に

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

   　　を追記

9. app/views/blogs/index.html.erbの<p id="notice"><%= notice %></p>を消す
10. rails g devise userする
11. rails db:migrateする
12. rails g devise:i18n:viewsする
13. rails g devise:controllers usersする
14. rails g migration AddColumnToUsers name:string profile:textする
15. rails db:migrateする

16. app/controllers/application_controller.rbに

      before_action :authenticate_user!
      before_action :configure_permitted_parameters, if: :devise_controller?
    
      protected
      def configure_permitted_parameters
        devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
        devise_parameter_sanitizer.permit(:account_update, keys: [:name, :profile])
      end
    

    を追記

17. app/views/devise/registrations/new.html.erbに

      <div class="field">
        <%= f.label :name %><br />
        <%= f.text_field :name, autofocus: true %>
      </div>
    

    を追記

18. app/views/devise/registrations/edit.html.erbに

      <div class="field">
        <%= f.label :name %><br />
        <%= f.text_field :name, autofocus: true %>
      </div>
    
      <div class="field">
        <%= f.label :profile %><br />
        <%= f.text_area :profile, autofocus: true %>
      </div>
    

    を追記

19. app/controllers/application_controller.rbに

      before_action :set_locale
    
      def set_locale
        I18n.locale = extract_locale_from_tld || I18n.default_locale
      end
    
      def extract_locale_from_tld
        parsed_locale = request.host.split(".").first
        I18n.available_locales.map(&:to_s).include?(parsed_locale) ? parsed_locale : nil
      end
    

    を追記

20. app/views/layouts/application.html.erbに

      <%= link_to_if request.host.split('.').first != 'ja', '日本語',   "http://ja.localhost:3000#{request.path}"%> |
      <%= link_to_if request.host.split('.').first != 'en', 'English', "http://en.localhost:3000#{request.path}" %>
    

    を追記

21. config/routes.rbの最後に

      resources :users, only: [:show]
    

    を追記

22. app/controllers/users_controller.rbを新たに作成し

      class UsersController < ApplicationController
        def show
          @user = User.find(params[:id]) #追記
        end
      end
    

    を記述

23. app/views/users/show.html.erbを新たに作成し

      <h1>Users#show</h1>
      <p>名前 : <%= @user.name %></p>
      <p>メールアドレス : <%= @user.email %></p>
      <p>プロフィール : <%= @user.profile %></p>
      <%= link_to t(".edit_profile"), edit_user_registration_path %>
    

    を記述

24. app/views/layouts/application.html.erbに

      <p class="navbar-text pull-right">
        <% if user_signed_in? %>
          <%= t(".login_user", username: current_user.email) %>
          <br>
          <%= link_to t(".top"), blogs_path, class: 'navbar-link' %> |
          <%= link_to t(".profile"), user_path(current_user.id), class: 'navbar-link' %> |
          <%= link_to t(".sign_out"), destroy_user_session_path, method: :delete, class: 'navbar-link' %>
        <% else %>
          <%= link_to t(".top"), blogs_path, class: 'navbar-link' %> |
          <%= link_to t(".sign_up"), new_user_registration_path, class: 'navbar-link'  %> |
          <%= link_to t(".sign_in"), new_user_session_path, class: 'navbar-link'  %>
        <% end %>
      </p>
    

    を追記

25. app/controllers/users/registrations_controller.rb に

      protected
      # アカウント編集後、プロフィール画面に移動する
        def after_update_path_for(resource)
          user_path(id: current_user.id)
        end
    

    を追記

26. config/routes.rbのresources :users, only: [:show]より上に

      devise_for :users, controllers: {
        registrations: "users/registrations"
      }
    

    を追記

最後に

解説は後日！！！