Ruby on Rails5 学習コース VI

プログラミング

映画・ドラマみるなら＜U-NEXT＞
無料トライアル実施中！

ブログするなら月額968円からの高性能クラウド型レンタルサーバー

お家で出来る高収入アルバイトはこちらから♪

あなたのサイトのURL、そろそろスリムにしませんか？

格安ドメイン取得サービス─ムームードメイン─

モデルとテーブルの作成
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

  • <%= link_to("ユーザー一覧", "/users/index") %>

    • 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



    TweetApp
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    • <%= link_to("TweetAppとは", "/about") %>
    • <%= link_to("投稿一覧", "/posts/index") %>
    • <%= link_to("新規投稿", "/posts/new") %>

    • <%= link_to("ユーザー一覧", "/users/index") %>

    <% if flash[:notice] %>

    <%= 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 %>

    7. ユーザー登録ページを作ろう

    フォームの作り方
    input
    投稿作成ページでは複数行の入力フォームだったので