Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@masatom86650860

アプリを作る　ユーザー登録

Posted at

##ユーザーを登録する
###ユーザーを表示させる

####デバッグ情報を追加する
app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
.
.
.
 <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <!--home.html.erbの内容を代入させる-->
      <%= render 'layouts/footer' %>
      <%= debug(params) if Rails.env.development? %>
      <!--デバック情報を表示させる
      　　if Rails.env.development? 開発環境だけに表示させる-->
    </div>
  </body>
  
</html>

####デバックの情報のCSSの表示
app/assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables, etc. */

$gray-medium-light: #eaeaea;

@mixin box_sizing {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}
// 箱のようなデザインにする
.
.
.
/* miscellaneous */

.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box_sizing;
}

####userのurlのルーティングを作成
config/routes.rb

Rails.application.routes.draw do
  root 'static_pages#home'
  get  '/signup',  to: 'users#new'
  # signupのurlを入力してuser/newのアクションが動き、htmlが表示される。
  resources :users
  # ユーザー情報を表示するURL（/users/1）を追加するためだけのものではありません
  # ユーザーのURLを生成するための多数の名前付きルートと共に、
  #   アクションが利用できるようになるのです
end

####ユーザー情報を表示するための仮のビュー
app/views/users/show.html.erb

<%= @user.name %>, <%= @user.email %>

####新規作成のためにUserコントローラにcreateをアクション
app/controllers/users_controller.rb

class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    # @user インスタンス変数
    # params[:id]の部分はユーザーidの1に置き換わります。
  end
  def new
  end
end

これでプレビューを表示させたところid=1がないと表示された。
railsconsoleでインスタンスを作成

ubuntu:~/environment/my_app (sign-up) $ rails console
Running via Spring preloader in process 7150
Loading development environment (Rails 6.0.3)
2.6.3 :001 > user = User.create(name: "a", email: "abc@def.com", password: "aaaaaa", password_confirmation: "aaaaaa")
   (1.7ms)  SELECT sqlite_version(*)
   (0.1ms)  begin transaction
  User Exists? (0.8ms)  SELECT 1 AS one FROM "users" WHERE LOWER("users"."email") = LOWER(?) LIMIT ?  [["email", "abc@def.com"], ["LIMIT", 1]]
  User Create (10.4ms)  INSERT INTO "users" ("name", "email", "created_at", "updated_at", "password_digest") VALUES (?, ?, ?, ?, ?)  [["name", "a"], ["email", "abc@def.com"], ["created_at", "2021-11-19 15:38:13.272909"], ["updated_at", "2021-11-19 15:38:13.272909"], ["password_digest", "$2a$12$6Sb5WKzynKizowVEO12B0O0EXo09Se9zI32Q11asV.hV4jRTF0JZC"]]
   (6.8ms)  commit transaction
 => #<User id: 1, name: "a", email: "abc@def.com", created_at: "2021-11-19 15:38:13", updated_at: "2021-11-19 15:38:13", password_digest: [FILTERED]>

そしたらshowアクションが動いた。

####デバッグを使い、状況を把握する

User Load (0.1ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/users_controller.rb:4:in `show'
Return value is: nil

[3, 12] in /home/ubuntu/environment/my_app/app/controllers/users_controller.rb
    3:   def show
    4:     @user = User.find(params[:id])
    5:     # @user インスタンス変数
    6:     # params[:id]の部分はユーザーidの1に置き換わります
    7:     # Rubyを使ってユーザー名とメールアドレスを表示するにはインスタンス変数であることを前提とする
=>  8:  　  debugger
    9:   end
   10:  
   11:   def new
   12:   end

####ユーザーの画像を追加する（アイコンのような物）

module UsersHelper
  # 引数で与えられたユーザーのGravatar画像を返す
  def gravatar_for(user)
    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
    # メアドをハッシュ化する
    gravatar_url = "https://secure.gravatar.com/avatar/#{gravatar_id}"
    # grabatar_urlに代入する
    image_tag(gravatar_url, alt: user.name, class: "gravatar")
    # ユーザーのメアドを元にグラバターの画像を表示させる
  end
end

####ユーザー個人の画面
app/views/users/show.html.erb

<% provide(:title, @user.name) %>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
  </aside>
</div>

####ユーザー登録画面
app/views/users/new.html.erb

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_with(model: @user, local: true) do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>

      <%= f.label :email %>
      <%= f.email_field :email %>

      <%= f.label :password %>
      <%= f.password_field :password %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

####ストロングパラメータをつける
app/controllers/users_controller.rb

.
.
.
 def create
    @user = User.new(user_params) # 実装は終わっていないことに注意!
    if @user.save
      # 保存の成功をここで扱う。
    else
      render 'new'
    end
  end
  
  private
  
    def user_params
    # ストロングパラメータ
    # 使用制限をつける　user属性を使うときに
      params.require(:user).permit(:name, :email, :password, 
                                     :password_confirmation)
    end
end

####エラーメッセージを出すようにする
app/views/users/new.html.erb

<% provide(:title, 'Sign up') %>
<h1>サインイン</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_with(model: @user, local: true) do |f| %>
      <%= render 'shared/error_messages' %>
      
      <%= f.label :name %>
      <%= f.text_field :name, class: 'form-control' %>
      <!--class: 'form-control'を入れるとBoostrapがうまく取り扱ってくれる-->

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control'%>

      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation, class: 'form-control' %>

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

####そのエラーメッセージの中身
app/views/shared/_error_messages.html.erb

<% if @user.errors.any? %>
<!--インスタンス変数にエラーがあれば-->
  <div id="error_explanation">
    <div class="alert alert-danger">
      The form contains <%= pluralize(@user.errors.count, "error") %>.
      <!--エラーの数と"error”文字列が表示される-->
    </div>
    <ul>
    <% @user.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
    </ul>
  </div>
<% end %>

###エラーメッセージのスタイルを決める
app/assets/stylesheets/custom.scss

.
.
.

#error_explanation {
  color: red;
  ul {
    color: red;
    margin: 0 0 30px 0;
  }
}

.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }
}

####統合テストで有効でない登録は無効にされることを確認

require 'test_helper'

class UsersSignupTest < ActionDispatch::IntegrationTest
  test "invalid signup information" do
    get signup_path
    # 名前付きルートでsignup_pathに取得
    assert_no_difference 'User.count' do
    # 有効でないのでデータベースには追加されないことを確認
      post users_path, params: { user: { name:  "",
                                         email: "user@invalid",
                                         password:              "foo",
                                         password_confirmation: "bar" } }
       
      # users#show 
      # 登録ページに情報を登録
    end
    assert_template 'users/new'
    # また登録ページに戻る
  end
end

####サインアップ成功時createメソッドの動き
app/controllers/users_controller.rb

.
.
.
def create
    @user = User.new(user_params) # 実装は終わっていないことに注意!
    if @user.save
      # 保存の成功をここで扱う。
      flash[:success] = "ようこそ自作アプリへ成功しました！"
      redirect_to @user
      # 表示させるユーザーページを
    else
      render 'new'
    end
.
.
.

####サインアップの成功時の画面表示
app/views/layouts/application.html.erb

.
.
.
<body>
  <%= render 'layouts/header' %>
  <div class="container">
    <% flash.each do |message_type, message| %>
      <div class="alert alert-<%= message_type %>"><%= message %></div>
    <% end %>
    <%= yield %>
    <!--home.html.erbの内容を代入させる-->
    <%= render 'layouts/footer' %>
    <%= debug(params) if Rails.env.development? %>
    <!--デバック情報を表示させる
   　　if Rails.env.development? 開発環境だけに表示させる-->
  </div>
</body>

####成功時の統合テスト

.
.
.
test "valid signup information" do
    get signup_path
    # サインアップページへアクセスする
    assert_difference 'User.count', 1 do
    # ユーザーが一つ追加されたことを確認
      post users_path, params: { user: { name:  "Example User",
                                         email: "user@example.com",
                                         password:              "password",
                                         password_confirmation: "password" } }
      # 有効な情報を登録
    end
    follow_redirect!
    # POSTリクエストを送信した結果を見て、指定されたリダイレクト先に移動するメソッド
    assert_template 'users/show'
    # ユーザーページが表示されているか？
  end
end
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?