Part.3では、コントローラを介してデータベースの中身をページに表示したり、データベースの中身を操作するための画面を作成します。MVCのVです。

##ビューに関して

ビューは app/views/menus/ の配下に作成します。menusの部分は作成したモデル名の複数形です。コントローラに設定したメソッドと同じ名前でファイルを作成します。作成が必要なのは4つです。

メソッド名	ファイル名	使用用途
index	index.html.erb	一覧表示画面
show	show.html.erb	詳細表示画面
new	new.html.erb	新規登録画面
edit	edit.html.erb	編集画面

残り3つのメソッドはいずれかのビューで使用するため、専用のビューを必要としません。ボタンやリンクで呼び出します。

メソッド名	ファイル名	使用用途
create	new.html.erb	作成
update	edit.html.erb	更新
destroy	いずれか	削除

##ビューファイルの作成

ひとまずコピペで大丈夫です。

app/views/menus/index.html.erb

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>値段</th>
      <th>説明</th>
    </tr>
  </thead>
  <tbody>
    <% @menus.each do |menu| %>
      <tr>
        <td><%= menu.name %></td>
        <td><%= menu.price %></td>
        <td><%= menu.description %></td>
      </tr>
    <% end %>
  </tbody>
</table>

app/views/menus/show.html.erb

<table>
  <tr>
    <th>商品名</th>
    <td><%= @menu.name %></td>
  </tr>
  <tr>
    <th>値段</th>
    <td><%= @menu.price %></td>
  </tr>
  <tr>
    <th>説明</th>
    <td><%= @menu.description %></td>
  </tr>
</table>

app/views/menus/new.html.erb

<%= form_with model: @menu do |form| %>
  <div>
    <%= form.label "商品名" %>
    <%= form.text_field :name %>
  </div>
  <div>
    <%= form.label "値段" %>
    <%= form.text_field :price %>
  </div>
  <div>
    <%= form.label "説明" %>
    <%= form.text_field :description %>
  </div>
  <div>
    <%= form.submit %>
  </div>
<% end %>

app/views/menus/edit.html.erb

<%= form_with model: @menu do |form| %>
  <div>
    <%= form.label "商品名" %>
    <%= form.text_field :name %>
  </div>
  <div>
    <%= form.label "値段" %>
    <%= form.text_field :price %>
  </div>
  <div>
    <%= form.label "説明" %>
    <%= form.text_field :description %>
  </div>
  <div>
    <%= form.submit %>
  </div>
<% end

##表示確認

ビューを作成したのでブラウザでアクセス出来るようになりました。URLは下記のとおりです。

メソッド名	ファイル名	使用用途	URL
index	index.html.erb	一覧表示画面	http://localhost:3000/menus
show	show.html.erb	詳細表示画面	http://localhost:3000/menus/1
new	new.html.erb	新規登録画面	http://localhost:3000/menus/new
edit	edit.html.erb	編集画面	http://localhost:3000/menus/1/edit

URLの数字（menus/1など）はデータベースに登録したデータのIDです。IDは自動で割り振られる番号で、登録した順に増えていきます。確認する場合はrails consoleを使用します。

ターミナル

% bin/rails c

ターミナル

irb(main):001:0> Menu.all
  Menu Load (0.6ms)  SELECT "menus".* FROM "menus" LIMIT $1  [["LIMIT", 11]]
=> #<ActiveRecord::Relation [#<Menu id: 1, name: "ラーメン", price: 600, description: "おいしい", created_at: "2020-07-12 02:20:36", updated_at: "2020-07-12 02:20:36">

Menu id: の数字がURLの1にあたります。

##レイアウトテンプレート

ところで、HTMLを少し触ったことがある人ならお気づきかもしれませんが、ビューファイルには<html>や<body>などのタグを書いていません。それなのにちゃんとブラウザで表示がされるのは、レイアウトテンプレートのおかげです。

ビューはコントローラの機能（メソッド）を使うための見た目を”部分的”に作成するもので、ページ全体の見た目は「app/views/layouts/application.html.erb」というファイルが担っています。このファイルには<html>や<body>などが書かれています。

そしてこのファイルの中に、以下の行が見つけられると思います。作成したビューはこの<%= yield %>によって読み込まれる仕組みになっています。

app/views/layouts/application.html.erb

<%= yield %>

たとえばどのページにも常に表示させたいメニューなどは、レイアウトテンプレートで見た目を作成しておけば、わざわざ1つ1つビューファイルでメニューを作る必要がありません。とても効率的ですね。

##flashメッセージ

Part.2のコントローラ設定で、下記のような設定をいくつか行っています。

app/controllers/menus_controller.rb

if @menu.save
  redirect_to menus_path, notice: "作成しました"
else

これは、saveに成功したら（if @menu.save）、menuの一覧ページ（menus_path）に遷移（redirect_to）させるという命令です。
また、末尾の「notice: "作成しました"」は、saveに成功した際にブラウザに"作成しました"と表示させるための設定です。それにはflashという機能を利用するのですが、コントローラ以外にビューの設定も必要です。

レイアウトテンプレートの<%= yield %>より前に、以下を追記します。

app/views/layouts/application.html.erb

<% if flash.notice %>
  <p><%= flash.notice %></p>
<% end %>

これによってflashの機能によりnoticeが表示されます。noticeには、先述のとおりコントローラの設定で「notice: "作成しました"」と設定してあるので、結果的に"作成しました"と表示されることになります。新規作成ページからデータの登録を行って、表示を確認してみてください。

なお、<% if flash.notice %>のとおりifなので、noticeの設定がある場合のみ機能し、noticeの設定がない場合は何も表示されません。（エラーにもなりません）

【超初心者的】Railsアプリ作成 Part.3 ビューの設定（リンク編）に続く。