モデルとテーブルの作成
rails g modelstring
Userモデルとusersテーブルをつくるため、左の図のコマンドを実行します。
usersテーブルには、nameとemailの2つのデータを持たせるようにしましょう。「カラム名:データ型」の部分は図のように複数並べることが可能です。
stringとは短い文字列のことで、ユーザー名やメールアドレスといった短い文字列のデータに用います。
ユーザーのデータを作ろうnewsave
users テーブルが作成できたので、早速ユーザーのデータを保存してみよう！
まずは「rails console」でやってみるのじゃ！
テーブルにデータを保存するには以下の手順が必要じゃったな。
① new メソッドで User モデルのインスタンスを作成
② save メソッドで users テーブルに保存
値の重複がないかのチェック
バリデーションvalidatesuniqueness
データベースにすでに保存されているemailで新たにユーザーを登録できないように、「emailの重複がないか」をチェックするためのバリデーションを追加します。
以下の図のように「uniqueness: true」を指定することでチェックすることができます。
class User < ApplicationRecord # nameカラムに関するバリデーションを作成してください validates :name, {presence: true} # emailカラムに関するバリデーションを作成してください validates :email, {presence: true, uniqueness: true} end ■ ターミナルで以下のコマンドを実行してください rails generate controller users index routes.rb Rails.application.routes.draw do get "users/index" => “users#index”
users_controller.rb
class UsersController < ApplicationController
def index
@users = User.all
end
end
index.html.erb
ユーザー一覧
<% @users.each do |user| %>
<%= user.name %>
<% end %>
users.scss
/* users/index ================================ */
.users-heading {
font-weight: 300;
margin: 60px 0 20px;
font-size: 48px;
color: #bcc8d4;
}
.users-index-item {
padding: 20px 30px;
background-color: white;
overflow: hidden;
box-shadow: 0 2px 6px #c1ced7;
display: table;
width: 100%;
}
.user-left img {
width: 50px;
height: 50px;
border-radius: 40%;
box-shadow: 0 2px 6px #c1ced7;
object-fit: cover;
}
.user-name a {
font-weight: 600;
}
.user-name a:hover {
color: #3ecdc6;
}
.user-left {
float: left;
width: 10%;
}
.user-right {
width: 90%;
padding-left: 25px;
text-align: left;
display: table-cell;
vertical-align: middle;
}
/* users/show ================================ */
.user-show {
text-align: center;
}
.user {
margin-bottom: 20px;
}
.user img {
width: 80px;
height: 80px;
border-radius: 40%;
box-shadow: 0 2px 6px #c1ced7;
margin: 20px 0 10px;
object-fit: cover;
}
.user h2 {
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.user p {
font-size: 13px;
margin-bottom: 15px;
}
.user a {
color: #8899a6;
text-decoration: underline;
font-weight: 200;
}
.user span {
color: #afb6bf;
font-weight: 200;
padding: 0 6px 0 8px;
}
.user-tabs {
margin-top: 40px;
background-color: white;
overflow: hidden;
box-shadow: 0 2px 6px #c1ced7;
}
.user-tabs li {
float: left;
}
.user-tabs li.active {
border-bottom: 2px solid #3ecdc6;
}
.user-tabs li.active a {
color: #57575f;
}
.user-tabs a {
display: inline-block;
padding: 16px 30px;
color: #afb6bf;
}
/* users/new, users/edit ================================ */
.users-form input {
margin-bottom: 15px;
}
application.html.erb
5. ユーザー一覧を作ろう
ユーザー一覧ページ
ユーザーに関するusersコントローラと、「ユーザー一覧ページ」のindexアクションを作りましょう。
ユーザー一覧ページには、データベースに保存されているユーザーが全て表示されるようにします。
また、ヘッダーにユーザー一覧ページへのリンクを追加しましょう。
■ ターミナルで以下のコマンドを実行してください
rails generate controller users index
routes.rb
Rails.application.routes.draw do
get “users/index” => “users#index”
get “posts/index” => “posts#index”
get “posts/new” => “posts#new”
get “posts/:id” => “posts#show”
post “posts/create” => “posts#create”
get “posts/:id/edit” => “posts#edit”
post “posts/:id/update” => “posts#update”
post “posts/:id/destroy” => “posts#destroy”
get “/” => “home#top”
get “about” => “home#about”
end
users_controller.rb
class UsersController < ApplicationController
def index
@users = User.all
end
end
index.html.erb
ユーザー一覧
<% @users.each do |user| %>
<%= user.name %>
<% end %>
users.scss
/* users/index ================================ */
.users-heading {
font-weight: 300;
margin: 60px 0 20px;
font-size: 48px;
color: #bcc8d4;
}
.users-index-item {
padding: 20px 30px;
background-color: white;
overflow: hidden;
box-shadow: 0 2px 6px #c1ced7;
display: table;
width: 100%;
}
.user-left img {
width: 50px;
height: 50px;
border-radius: 40%;
box-shadow: 0 2px 6px #c1ced7;
object-fit: cover;
}
.user-name a {
font-weight: 600;
}
.user-name a:hover {
color: #3ecdc6;
}
.user-left {
float: left;
width: 10%;
}
.user-right {
width: 90%;
padding-left: 25px;
text-align: left;
display: table-cell;
vertical-align: middle;
}
/* users/show ================================ */
.user-show {
text-align: center;
}
.user {
margin-bottom: 20px;
}
.user img {
width: 80px;
height: 80px;
border-radius: 40%;
box-shadow: 0 2px 6px #c1ced7;
margin: 20px 0 10px;
object-fit: cover;
}
.user h2 {
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.user p {
font-size: 13px;
margin-bottom: 15px;
}
.user a {
color: #8899a6;
text-decoration: underline;
font-weight: 200;
}
.user span {
color: #afb6bf;
font-weight: 200;
padding: 0 6px 0 8px;
}
.user-tabs {
margin-top: 40px;
background-color: white;
overflow: hidden;
box-shadow: 0 2px 6px #c1ced7;
}
.user-tabs li {
float: left;
}
.user-tabs li.active {
border-bottom: 2px solid #3ecdc6;
}
.user-tabs li.active a {
color: #57575f;
}
.user-tabs a {
display: inline-block;
padding: 16px 30px;
color: #afb6bf;
}
/* users/new, users/edit ================================ */
.users-form input {
margin-bottom: 15px;
}
application.html.erb
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<% if flash[:notice] %>
<% end %>
<%= yield %>
6. ユーザーの詳細ページを作ろう
routes.rb
Rails.application.routes.draw do
get “users/index” => “users#index”
# showアクションへのルーティングを追加してください
get “users/:id” => “users#show”
get “posts/index” => “posts#index”
get “posts/new” => “posts#new”
get “posts/:id” => “posts#show”
post “posts/create” => “posts#create”
get “posts/:id/edit” => “posts#edit”
post “posts/:id/update” => “posts#update”
post “posts/:id/destroy” => “posts#destroy”
get “/” => “home#top”
get “about” => “home#about”
end
users_controller.rb
class UsersController < ApplicationController
def index
@users = User.all
end
# showアクションを追加してください
def show
@user = User.find_by(id: params[:id])
end
end
show.html.erb
<%= @user.name %>
<%= @user.email %>
ユーザー一覧
<% @users.each do |user| %>
<%= link_to(user.name, "/users/#{user.id}") %>
<% end %>