Ruby on Rails 入門4

ゴール

アカウント編集画面を作っていこうかなと。

完成系

前回の記事

コントローラーの作成

users って名前で作成してるけど、お好きにどーぞ

$ rails g controller users index show edit update
     create  app/controllers/users_controller.rb
      route  get 'users/index'
get 'users/show'
get 'users/edit'
get 'users/update'
     invoke  erb
     create    app/views/users
     create    app/views/users/index.html.erb
     create    app/views/users/show.html.erb
     create    app/views/users/edit.html.erb
     create    app/views/users/update.html.erb
     invoke  test_unit
     create    test/controllers/users_controller_test.rb
     invoke  helper
     create    app/helpers/users_helper.rb
     invoke    test_unit
     invoke  assets
     invoke    coffee
     create      app/assets/javascripts/users.coffee
     invoke    scss
     create      app/assets/stylesheets/users.scss
$

config/routes.rb

resourcesだと1行でまかなえるので、コントローラーの作成した時に出来た要らない行を削除する。

Rails.application.routes.draw do
 get 'users/index'  # 削除する
 get 'users/show'   # 削除する
 get 'users/edit'   # 削除する
 get 'users/update' # 削除する
 get 'home' => 'home#index'
 devise_for :users, :controllers => {
   :registrations => 'users/registrations',
   :sessions => 'users/sessions'
 }
 resources :users, only: [:index, :show, :edit, :update] # 追加
end

ルーティング確認

$ rails routes
                  Prefix Verb   URI Pattern                                                                              Controller#Action
                    home GET    /home(.:format)                                                                          home#index
        new_user_session GET    /users/sign_in(.:format)                                                                 users/sessions#new
            user_session POST   /users/sign_in(.:format)                                                                 users/sessions#create
    destroy_user_session DELETE /users/sign_out(.:format)                                                                users/sessions#destroy
       new_user_password GET    /users/password/new(.:format)                                                            devise/passwords#new
      edit_user_password GET    /users/password/edit(.:format)                                                           devise/passwords#edit
           user_password PATCH  /users/password(.:format)                                                                devise/passwords#update
                         PUT    /users/password(.:format)                                                                devise/passwords#update
                         POST   /users/password(.:format)                                                                devise/passwords#create
cancel_user_registration GET    /users/cancel(.:format)                                                                  users/registrations#cancel
   new_user_registration GET    /users/sign_up(.:format)                                                                 users/registrations#new
  edit_user_registration GET    /users/edit(.:format)                                                                    users/registrations#edit
       user_registration PATCH  /users(.:format)                                                                         users/registrations#update
                         PUT    /users(.:format)                                                                         users/registrations#update
                         DELETE /users(.:format)                                                                         users/registrations#destroy
                         POST   /users(.:format)                                                                         users/registrations#create
　　　　　　　　　　　　　　　 # 以下5行が追加対象
                   users GET    /users(.:format)                                                                         users#index
               edit_user GET    /users/:id/edit(.:format)                                                                users#edit
                    user GET    /users/:id(.:format)                                                                     users#show
                         PATCH  /users/:id(.:format)                                                                     users#update
                         PUT    /users/:id(.:format)                                                                     users#update
      rails_service_blob GET    /rails/active_storage/blobs/:signed_id/*filename(.:format)                               active_storage/blobs#show
rails_blob_representation GET    /rails/active_storage/representations/:signed_blob_id/:variation_key/*filename(.:format) active_storage/representations#show
      rails_disk_service GET    /rails/active_storage/disk/:encoded_key/*filename(.:format)                              active_storage/disk#show
update_rails_disk_service PUT    /rails/active_storage/disk/:encoded_token(.:format)                                      active_storage/disk#update
    rails_direct_uploads POST   /rails/active_storage/direct_uploads(.:format)                                           active_storage/direct_uploads#create
$

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
 <head>
   <title>RailsApp</title>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>

   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
 </head>
 <header id="header" class="">
   <div class="container">
     <a href="/" title="TOP" class="top">TOP</a>
     <nav>
       <ul>
         <% if user_signed_in? %>
           <li>
             <!-- 1行修正 railsのヘルパーを使用してリンクを生成 -->
             <%= link_to current_user.email, user_path(current_user.id), title: "ユーザ画面" %>
           </li>
         <% end %>
       </ul>
     </nav>
   </div>
 </header>
 <body>
   <%= yield %>
 </body>
</html>

ブラウザで確認

ここからはユーザ情報を表示させていく

app/controllers/users_controller.rb

class UsersController < ApplicationController
 def index
 end

 def show
   @user = User.find(params[:id]) #追加
 end

 def edit
 end

 def update
 end
end

app/views/users/show.html.erb

<div class="container">
 <h1>ユーザ情報</h1>
 <div class="user-field">
   <p><%= link_to "編集", edit_user_path(@user.id) %></p>
   <p><%= @user.email %></p>
 </div>
</div>

app/assets/stylesheets/users.scss

application.scssに書くか迷ったけど、とりあえずこちらに書く

// Place all the styles related to the users controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.container {
 width: 1024px;
 margin: 0 auto;
}

Gitの作業忘れずに（実行ログは省略しています。

$ git status
$ git add .
$ git commit -m "add: user pages"

完

次回なにするか

ユーザ情報に以下の項目を追加したいなと思ってる

名前、自己紹介文、プロフィール画像

次回記事↓