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 | いずれか | 削除 |
##ビューファイルの作成
ひとまずコピペで大丈夫です。
<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>
<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>
<%= 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 %>
<%= 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 %>によって読み込まれる仕組みになっています。
<%= yield %>
たとえばどのページにも常に表示させたいメニューなどは、レイアウトテンプレートで見た目を作成しておけば、わざわざ1つ1つビューファイルでメニューを作る必要がありません。とても効率的ですね。
##flashメッセージ
Part.2のコントローラ設定で、下記のような設定をいくつか行っています。
if @menu.save
redirect_to menus_path, notice: "作成しました"
else
これは、saveに成功したら（if @menu.save）、menuの一覧ページ（menus_path）に遷移（redirect_to）させるという命令です。
また、末尾の「notice: "作成しました"」は、saveに成功した際にブラウザに"作成しました"と表示させるための設定です。それにはflashという機能を利用するのですが、コントローラ以外にビューの設定も必要です。
レイアウトテンプレートの<%= yield %>より前に、以下を追記します。
<% if flash.notice %>
<p><%= flash.notice %></p>
<% end %>
これによってflashの機能によりnoticeが表示されます。noticeには、先述のとおりコントローラの設定で「notice: "作成しました"」と設定してあるので、結果的に"作成しました"と表示されることになります。新規作成ページからデータの登録を行って、表示を確認してみてください。
なお、<% if flash.notice %>のとおりifなので、noticeの設定がある場合のみ機能し、noticeの設定がない場合は何も表示されません。（エラーにもなりません）