LoginSignup
1
1

More than 3 years have passed since last update.

@knowledge87sun(knowledge 87summer)

【Ruby on Rails】Rails超入門１！マジで凄い！scaffoldで恐竜登録アプリ作成１

Posted at

１．scaffoldとは

Webアプリケーションに必要なビュー（画面）、コントローラー（制御部分）、モデル(データベース)をコマンド一つで提供してくれるコマンド。
さらにwebアプリに共通するCRUDを提供してくれる。

２．scaffoldによるアプリの作成

(１)rails new 作成したいアプリ名
でアプリケーションを作成する。

make_scaffold2_dino1.jpg

(２)下記コマンドをアプリケーションに移動して入力する。

rails generate scaffold モデル名 カラム名1:データ型1 カラム名2:データ型 2 …

例)
rails generate scaffold dinosor2 dname0:string dtype0:string sname1:string stype1:string sname2:string stype2:string hflg:boolean

ここで、dname0:作成恐竜名,dtype0:作成恐竜タイプ
sname1:生成元恐竜名１,stype1:生成元恐竜タイプ１,sname1:生成元恐竜名２,stype1:生成元恐竜タイプ２,hflg:ハイブリッドフラグを持つdinosor2テーブルを作成している。

下記コマンドを入力すると、scaffoldアプリ実行に必要な様々なファイルが作られる。


c:\RailsInstaller\Ruby2.3.3\rails_app2>rails generate scaffold dinosor2 dname0:string dtype0:string sname1:string stype1:string sname2:string stype2:string hflg:boolean

      invoke  active_record
      create    db/migrate/20200320132820_create_dinosor2s.rb
      create    app/models/dinosor2.rb
      invoke    test_unit
      create      test/models/dinosor2_test.rb
      create      test/fixtures/dinosor2s.yml
      invoke  resource_route
       route    resources :dinosor2s
      invoke  scaffold_controller
      create    app/controllers/dinosor2s_controller.rb
      invoke    erb
      create      app/views/dinosor2s
      create      app/views/dinosor2s/index.html.erb
      create      app/views/dinosor2s/edit.html.erb
      create      app/views/dinosor2s/show.html.erb
      create      app/views/dinosor2s/new.html.erb
      create      app/views/dinosor2s/_form.html.erb
      invoke    test_unit
      create      test/controllers/dinosor2s_controller_test.rb
      invoke    helper
      create      app/helpers/dinosor2s_helper.rb
      invoke      test_unit
      invoke    jbuilder
      create      app/views/dinosor2s/index.json.jbuilder
      create      app/views/dinosor2s/show.json.jbuilder
      create      app/views/dinosor2s/_dinosor2.json.jbuilder
      invoke  test_unit
      create    test/system/dinosor2s_test.rb
      invoke  assets

(３)アプリケーションディレクトリに移動してテーブル作成をするために下記コマンドを入力する。
rake db:migrate

make_scaffold2_db_migrate.jpg

３．scaffoldアプリの実行(自動生成された画面達)

rails serverでサーバーの起動を確認する。

(１)http://localhost:3000/モデル名s
を入力すると、一覧画面が表示される。

make_scaffold2_dino2_new1.jpg

make_scaffold2_dino2_index.jpg

(２)[New モデル名]リンクを押すと新規作成画面が表示される。

make_scaffold2_dino2_new2.jpg

なんとboolean型のhflgがチェックボックスになっていて、他の入力項目はテキストボックスになっている！！！

(３)データを登録して編集画面を表示する。

make_scaffold2_dino2_update.jpg

4.ルーティングの確認

アプリケーションディレクトリ内で下記コマンドを入力する。
rake routes

「erbファイルで記載されているpath(prefix)とURLパターン、contollerでのメソッド
の対応一覧のようなものが確認できる。」（と思う）

c:\RailsInstaller\Ruby2.3.3\rails_app2>rake routes
       Prefix Verb   URI Pattern                   Controller#Action
    dinosor2s GET    /dinosor2s(.:format)          dinosor2s#index
              POST   /dinosor2s(.:format)          dinosor2s#create
 new_dinosor2 GET    /dinosor2s/new(.:format)      dinosor2s#new
edit_dinosor2 GET    /dinosor2s/:id/edit(.:format) dinosor2s#edit
     dinosor2 GET    /dinosor2s/:id(.:format)      dinosor2s#show
              PATCH  /dinosor2s/:id(.:format)      dinosor2s#update
              PUT    /dinosor2s/:id(.:format)      dinosor2s#update
              DELETE /dinosor2s/:id(.:format)      dinosor2s#destroy

c:\RailsInstaller\Ruby2.3.3\rails_app2>

５.自動生成されたcontrollerのコード

「各画面のボタンやリンクをクリックしたときに、どのようなDB処理やページを読みこむかを記述してあるコード」

dinosor2_controller.rb

class Dinosor2sController < ApplicationController
  before_action :set_dinosor2, only: [:show, :edit, :update, :destroy]

  # GET /dinosor2s
  # GET /dinosor2s.json
  def index
    @dinosor2s = Dinosor2.all
  end

  # GET /dinosor2s/1
  # GET /dinosor2s/1.json
  def show
  end

  # GET /dinosor2s/new
  def new
    @dinosor2 = Dinosor2.new
  end

  # GET /dinosor2s/1/edit
  def edit
  end

  # POST /dinosor2s
  # POST /dinosor2s.json
  def create
    @dinosor2 = Dinosor2.new(dinosor2_params)

    respond_to do |format|
      if @dinosor2.save
        format.html { redirect_to @dinosor2, notice: 'Dinosor2 was successfully created.' }
        format.json { render :show, status: :created, location: @dinosor2 }
      else
        format.html { render :new }
        format.json { render json: @dinosor2.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /dinosor2s/1
  # PATCH/PUT /dinosor2s/1.json
  def update
    respond_to do |format|
      if @dinosor2.update(dinosor2_params)
        format.html { redirect_to @dinosor2, notice: 'Dinosor2 was successfully updated.' }
        format.json { render :show, status: :ok, location: @dinosor2 }
      else
        format.html { render :edit }
        format.json { render json: @dinosor2.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /dinosor2s/1
  # DELETE /dinosor2s/1.json
  def destroy
    @dinosor2.destroy
    respond_to do |format|
      format.html { redirect_to dinosor2s_url, notice: 'Dinosor2 was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_dinosor2
      @dinosor2 = Dinosor2.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def dinosor2_params
      params.require(:dinosor2).permit(:dname0, :dtype0, :sname1, :stype1, :sname2, :stype2, :hflg)
    end
end

６.自動生成されたviewのコード

(１)新規作成画面
form.html.erbを読みこんでいる。
backリンクで一覧画面に戻る。

new.html.erb
<h1>New Dinosor2</h1>

<%= render 'form', dinosor2: @dinosor2 %>

<%= link_to 'Back', dinosor2s_path %>

(２)詳細画面
指定した恐竜の情報を表示する画面。
editリンクで編集画面へ、backリンクで一覧画面へ遷移。

show.html.erb
<p id="notice"><%= notice %></p>

<p>
  <strong>Dname0:</strong>
  <%= @dinosor2.dname0 %>
</p>

<p>
  <strong>Dtype0:</strong>
  <%= @dinosor2.dtype0 %>
</p>

<p>
  <strong>Sname1:</strong>
  <%= @dinosor2.sname1 %>
</p>

<p>
  <strong>Stype1:</strong>
  <%= @dinosor2.stype1 %>
</p>

<p>
  <strong>Sname2:</strong>
  <%= @dinosor2.sname2 %>
</p>

<p>
  <strong>Stype2:</strong>
  <%= @dinosor2.stype2 %>
</p>

<p>
  <strong>Hflg:</strong>
  <%= @dinosor2.hflg %>
</p>

<%= link_to 'Edit', edit_dinosor2_path(@dinosor2) %> |
<%= link_to 'Back', dinosor2s_path %>

(３)編集画面
_form.html.erbを読みこんで表示。
showリンクで詳細画面へ、backリンクで一覧画面へ遷移。

edit.html.erb
<h1>Editing Dinosor2</h1>

<%= render 'form', dinosor2: @dinosor2 %>

<%= link_to 'Show', @dinosor2 %> |
<%= link_to 'Back', dinosor2s_path %>
index.html.erb
<p id="notice"><%= notice %></p>

<h1>Dinosor2s</h1>

<table>
  <thead>
    <tr>
      <th>Dname0</th>
      <th>Dtype0</th>
      <th>Sname1</th>
      <th>Stype1</th>
      <th>Sname2</th>
      <th>Stype2</th>
      <th>Hflg</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @dinosor2s.each do |dinosor2| %>
      <tr>
        <td><%= dinosor2.dname0 %></td>
        <td><%= dinosor2.dtype0 %></td>
        <td><%= dinosor2.sname1 %></td>
        <td><%= dinosor2.stype1 %></td>
        <td><%= dinosor2.sname2 %></td>
        <td><%= dinosor2.stype2 %></td>
        <td><%= dinosor2.hflg %></td>
        <td><%= link_to 'Show', dinosor2 %></td>
        <td><%= link_to 'Edit', edit_dinosor2_path(dinosor2) %></td>
        <td><%= link_to 'Destroy', dinosor2, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Dinosor2', new_dinosor2_path %>

(３)_form.html.erb
下記のコードが新規作成、編集画面の元となる_form.html.erbだ。
ここでdname0,dtype0,sname1,stype1,sname2,stype2の入力がテキストボックスに、
hflgの入力部分がチェックボックスになっていることが確認できる。

_form.html.erb

<%= form_with(model: dinosor2, local: true) do |form| %>
  <% if dinosor2.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(dinosor2.errors.count, "error") %> prohibited this dinosor2 from being saved:</h2>

      <ul>
      <% dinosor2.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :dname0 %>
    <%= form.text_field :dname0, id: :dinosor2_dname0 %>
  </div>

  <div class="field">
    <%= form.label :dtype0 %>
    <%= form.text_field :dtype0, id: :dinosor2_dtype0 %>
  </div>

  <div class="field">
    <%= form.label :sname1 %>
    <%= form.text_field :sname1, id: :dinosor2_sname1 %>
  </div>

  <div class="field">
    <%= form.label :stype1 %>
    <%= form.text_field :stype1, id: :dinosor2_stype1 %>
  </div>

  <div class="field">
    <%= form.label :sname2 %>
    <%= form.text_field :sname2, id: :dinosor2_sname2 %>
  </div>

  <div class="field">
    <%= form.label :stype2 %>
    <%= form.text_field :stype2, id: :dinosor2_stype2 %>
  </div>

  <div class="field">
    <%= form.label :hflg %>
    <%= form.check_box :hflg, id: :dinosor2_hflg %>
  </div>

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

上記画面を見るとわかるのだが、データを入れるテーブルのコマンド一つでCRUDアプリが本当に簡単に作れるという事だ。(色々な課題はあるけど)

1
1
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
1
1