##はじめに
railsチュートリアルで理解しにくいところや、詰まったところを書いていく記事になります。
なので、手順を示す記事とはなっていません。
##デバッグ
共通のビューファイルにdebugメソッド
を書くことで、各ページでデバッグ用の情報が表示されるようになる。
デバッグを出力することで、ページの状態が把握しやすくなる。
<!DOCTYPE html>
<html>
.
.
.
<body>
.
.
<%= debug(params) if Rails.env.development? %>
</body>
</html>
if Rails.env.development?
としておくことで、開発環境だけで表示されるようになる。
##Usersリソース
resources :users
routesファイルに↑の一行を追加するだけで、ユーザーのURLを生成するための多数の名前付きルート (5.3.3) と共に、RESTfulなUsersリソースで必要となるすべてのアクションが利用できるようになる。
HTTPリクエスト | URL | アクション | 名前付きルート | 用途 |
---|---|---|---|---|
GET | /users | index | users_path | すべてのユーザーを一覧するページ |
GET | /users/1 | show | user_path(user) | 特定のユーザーを表示するページ |
GET | /users/new | new | new_user_path | ユーザーを新規作成するページ (ユーザー登録) |
POST | /users | create | users_path | ユーザーを作成するアクション |
GET | /users/1/edit | edit | edit_user_path(user) | id=1のユーザーを編集するページ |
PATCH | /users/1 | update | user_path(user) | ユーザーを更新するアクション |
DELETE | /users/1 | destroy | user_path(user) | ユーザーを削除するアクション |
ただ、このルーティング先には表示するページとアクションが用意されていないから、各々準備する必要がある。
##ユーザー登録フォーム
ユーザー情報を入力するために、form_forヘルパーメソッド
を使う。
このメソッドはActive Recordのオブジェクトを取り込み、そのオブジェクトの属性を使ってフォームを構築する。
まず、新規ユーザーのためのユーザー登録フォーム
は下のようなものになる。
def new
@user = User.new
end
% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(@user) 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>
例えば
<%= f.text_field :name %>
という埋め込みruby部分では、
以下のようなHTMLを生成している。
<input id="user_name" name="user[name]" type="text" />
ブラウザからソースを表示することもできるがフォーム部分をHTMLで表すと以下のようになる。
<form accept-charset="UTF-8" action="/users" class="new_user"
id="new_user" method="post">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden"
value="NNb6+J/j46LcrgYUC60wQ2titMuJQ5lLqyAbnbAUkdo=" />
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" type="text" />
<label for="user_email">Email</label>
<input id="user_email" name="user[email]" type="email" />
<label for="user_password">Password</label>
<input id="user_password" name="user[password]"
type="password" />
<label for="user_password_confirmation">Confirmation</label>
<input id="user_password_confirmation"
name="user[password_confirmation]" type="password" />
<input class="btn btn-primary" name="commit" type="submit"
value="Create my account" />
</form>
<form action="/users" class="new_user" id="new_user" method="post">
の部分では、/users に対してHTTPのPOSTリクエスト送信する、といった指示をしてる。
このフォームの値はcreateアクションに送られるようになる。
createアクション内では、
@user = User.new(params[:user])
のように@userを定義すればいいが、paramsハッシュ全体を初期化するという行為はセキュリティ上よろしくない。
この場合、user_params
という外部メソッドを使ういことが慣習とされている。
よってcreateアクション
は以下のようなものとなる。
class UsersController < ApplicationController
.
.
.
def create
@user = User.new(user_params)
if @user.save
# 保存の成功をここで扱う。
else
render 'new'
end
end
private
def user_params
params.require(:user).permit(:name, :email, :password,
:password_confirmation)
end
end
↑privateキーワードを使って外部からはprivate内のメソッドを使えないようにする。
user_paramsを定義することにより、
paramsハッシュでは:user属性を必須とし、名前、メールアドレス、パスワード、パスワードの確認の属性をそれぞれ許可し、それ以外を許可しないようになる。
##flash
ユーザー登録が成功すれば、登録完了後に表示されるページにメッセージを表示し、二度目以降には表示しないというものがよく見かける。
そういったメッセージ(フラッシュメッセージ)を表示したい場合は、flash変数
を使う。
例:
def create
@user = User.new(user_params)
if @user.save
flash[:success] = "Welcome to the Sample App!"
redirect_to @user
else
render 'new'
end
end
成功時はflash[:success]
の:sucessというキーを使うことが慣習とされている。
また、このフラッシュメッセージをサイト全体で表示したい場合はapplication.html.erbは次のようなコードとなる。
<!DOCTYPE html>
<html>
.
.
.
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
.
.
.
</body>
</html>
<div class="alert alert-<%= message_type %>"><%= message %></div>
の部分では、メッセージの種類を適応するCSSによって、変更するようにしている。
例えば、
<div class="alert alert-<%= message_type %>"><%= message %></div>
というコードをHTMLで表示すると
<div class="alert alert-success">Welcome to the Sample App!</div>
というふうになる。
##おわり
この章では、主にユーザー登録、フラッシュメッセージを見てきた。
もう一度、7章をするときはエラーメッセージやSSLについてもう少し深く見ていこうと思う。
次↓
https://qiita.com/jonnyjonnyj1397/items/051ca887525f474ffbfb