【2021年から Ruby on Rails をはじめる人向け】 Ruby on Rails 6 入門 Part 9 ~ Scaffold で簡単に Web アプリを実装する方法~

【2021年から Ruby on Rails をはじめる人向け】 Ruby on Rails 6 入門 Part 9 ~ Scaffold で簡単に Web アプリを実装する方法~

link です。

今回は CRUD を簡単に生成してくれる Scaffold を使って、簡単な Web アプリを実装してみましょう。

この記事は Ruby on Rails 6 入門 Part 8 の続きです。

前提条件

  • Windows 10
  • Ruby 3
  • Ruby on Rails 6

Scaffold とは

Scaffold は工事現場で使う足場、土台の意味で、 Model の CRUD を自動で生成してくれる Rails の機能です。

コンソールで rails g scaffold モデル名 カラム 1 : 型 カラム 2 : 型... と入力します。すると、 CRUD を実装した Controller, View, Model のすべてを自動で生成してくれます。

ただし、自動生成されるのは CRUD だけなので Search(検索) などの別機能は自分で実装する必要があります。

この Scaffold を使って、簡単なメールアプリを実装してみましょう。

メールアプリのデータ構成

今回のメールアプリを実装するにあたって、以下の表のようなデータ構成を考えます。

MailDatum はメール本文、送信元、送信先のデータ、 User はユーザーのデータです。

MailDatum

カラム名
id integer
from_user_id integer
to_user_id integer
mail_subject string
mail_text text

User

カラム名
id integer
name string

メールアプリの実装

Model 生成

User MailDatum Model を生成しましょう。

ターミナルから以下のコードを入力します。

$ rails g scaffold User name:string`
$ rails g controller MailData show
$ rails g model MailDatum from_user_id:integer to_user_id:integer mail_subject:string mail_text:text 

生成が完了したら、 localhost:3000/users/ にアクセスして、画像のような画面が表示されるのを確認しましょう。

2021 11 02 16h50 05

New User のリンクをクリックすると以下の画像のような Create 画面に遷移します。

2021 11 02 16h50 09

データを入力して、登録したデータが Index 画面に表示されるのも確認しましょう。

2021 11 02 16h50 23

この Scaffold で生成した User のコードを改造してメールアプリを実装していきます。

Model の関連付け

Model 間の関連付けを行います。生成した Model を以下のコードに書き換えます。

class User < ApplicationRecord
    has_many :mail_data
end
class MailDatum < ApplicationRecord
    belongs_to :user
end

Controller の改造

Controller を書き換えていきます。

app/controllers/users_controller.rbnew_mail アクションと mail_datum_params メソッドを追加します。

mail_datum_params メソッドは private より下の位置に追記します。

def new_mail
  @mail_datum = MailDatum.new
  @mail_datum.from_user_id = params[:id]
end
private
def mail_datum_params
  params.require(:mail_datum).permit(:user_id, :from_user_id, :mail_subject, :mail_text)
end

app/controllers/mail_data_controller.rb を以下のように書き換えます。

class MailDataController < ApplicationController
  before_action :set_mail_datum, only: %i[ show edit update destroy ]

  def show
  end

  private
  def set_mail_datum
    @mail_datum = MailDatum.find(params[:id])
  end
end

before_action はアクションの前に呼び出すメソッドを指定するものです。

上述のコードではアクションの前に set_mail_datum を呼び出して、 @mail_datum の中身を代入しています。

View の改造

View の中身を書き換えていきます。

app/views/users/new_mail.html.erb を以下のように書き換えます。

<h1>New Mail</h1>

<%= form_with(model: @mail_datum, url: :user) do |form| %>
  <div class="field">
    <%= form.label :from_user_id %>
    <%= form.number_field :from_user_id %>
  </div>

  <div class="field">
    <%= form.label 'To user' %>
    <%= form.number_field :user_id %>
  </div>

  <div class="field">
    <%= form.label :mail_subject %>
    <%= form.text_field :mail_subject %>
  </div>

  <div class="field">
    <%= form.label :mail_text %>
    <%= form.text_area :mail_text %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

<%= link_to 'Back', mail_data_path %>

app/views/users/show.html.erb を以下のように書き換えます。

<p id="notice"><%= notice %></p>

<p>
  <strong>Name:</strong>
  <%= @user.name %>
</p>

<p>
  <% @user.mail_data.each do |mail| %>
    <p><%= mail.id %>: <%= link_to(mail.mail_subject, "#{mail_data_path}/#{mail.id}") %></p>
  <% end %>
</p>

<%= link_to 'Mailing', "/users/#{@user.id}/new_mail" %> |
<%= link_to 'Edit', edit_user_path(@user) %> |
<%= link_to 'Back', users_path %>

app/views/mail_data/show.html.erb を以下のように書き換えます。

<p>
  <strong>To user id:</strong>
  <%= @mail_datum.user_id %>
</p>

<p>
  <strong>From user id:</strong>
  <%= @mail_datum.from_user_id %>
</p>

<p>
  <strong>Mail subject:</strong>
  <%= @mail_datum.mail_subject %>
</p>

<p>
  <strong>Mail text:</strong>
  <%= @mail_datum.mail_text %>
</p>

<%= link_to('Back', "#{users_path}/#{@mail_datum.user_id}") %>

これでコードの書き換えは完了です。

最後に、users#new_mailusers#show のルーティングを設定します。

get 'users/:id/new_mail', to: 'users#new_mail'
post 'users/:id', to: 'users#show'

seeds.rb にテスト用のレコードを追加して、 db:migratedb:seed を実行しましょう。

User.create(name: "Ichiro")
User.create(name: "Jiro")

完成形

localhost:3000/users にアクセスして、以下の画像のような画面が出ることを確認します。

2021 11 10 15h17 23

試しに、 IchiroShow リンクを押して、詳細を見てみます。

2021 11 10 15h17 30

Mailing というリンクがあるを確認したら、クリックしてみましょう。

すると、 localhost:3000/users/new_mail に移動します。

To UserJiroId である 2 にして Create Mail datum を押します。

ボタンの文字列が気になる場合、 new_mail.html.erb<%= form.submit %><%= form.submit("送信") %> に変えましょう。

Create Mail datum送信 に置き換わります。

IchiroShow 画面に戻るので、今度は JiroShow 画面に移動します。

2021 11 10 15h17 44

Ichiro から送られたメールが届いているのがわかります。

2021 11 10 15h20 36

リンクをクリックすると、 MailDataShow 画面に移動します。

2021 11 10 15h20 48

まとめ

今回は Scaffold を使って簡単な Web アプリを実装してみました。

次回は Rails と React を組み合わせる方法を勉強します。

それではまた、別の記事でお会いしましょう。

linkohta