【超初心者的】Railsアプリ作成 Part.3 ビューの設定

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|いずれか|削除|

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

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

```rhtml: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>
```

```rhtml: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>
```

```rhtml: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 %>
```

```rhtml: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を使用します。

```terminal:ターミナル
% bin/rails c
```

```ruby:ターミナル
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 %>`によって読み込まれる仕組みになっています。

```rhtml:app/views/layouts/application.html.erb
<%= yield %>
```

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


##flashメッセージ

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

```ruby: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 %>`より前に、以下を追記します。

```rhtml: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 ビューの設定（リンク編）](https://qiita.com/masarashi/items/53a93dfbb4096b8e2f42) に続く。