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

ページ内にリンクを追加して、もう少しアプリっぽくしていきます。

##詳細ページへのリンク

一覧ページの商品名をリンクにして、クリックすると商品詳細ページが表示されるようにします。
<td><%= menu.name %></td>を書き換えます。

app/views/menus/index.html.erb

<td><%= link_to menu.name, menu %></td>

http://localhost:3000/menus にアクセスしてみてください。商品名がリンクになっていると思います。また、クリックするとその商品の詳細（show）ページに遷移します。

##リンクの仕組み

リンクの書式は下記のとおりです。

link_to 表示される文字, リンク先

「表示される文字」には文字を書いても構いませんが、データベースに登録されたデータがたくさんある場合、いちいち手入力するのは現実的ではありません。そのため「menu.name」でデータベースから商品名を読み込んでいます。

なお、前のPartで作成したindexビューでは、繰り返し処理を利用しています。下記に注目してください。

app/views/menus/index.html.erb

    <% @menus.each do |menu| %>
      <tr>
        <td><%= link_to menu.name, menu %></td>
        <td><%= menu.price %></td>
        <td><%= menu.description %></td>
      </tr>
    <% end %>

<% @menus.each do |menu| %>と<%end>で囲まれた部分が、繰り返し処理されます。この処理のおかげで、データが10件あっても100件あっても少ないコード量ですべてのデータを表示させることが出来ます。

また、リンク先についてですが、ここでルーティングについて思い出してください。

ターミナル

    Prefix Verb     URI Pattern                 Controller#Action
     menus GET      /menus(.:format)            menus#index
           POST     /menus(.:format)            menus#create
  new_menu GET      /menus/new(.:format)        menus#new
 edit_menu GET      /menus/:id/edit(.:format)   menus#edit
      menu GET      /menus/:id(.:format)        menus#show
           PATCH    /menus/:id(.:format)        menus#update
           PUT      /menus/:id(.:format)        menus#update
           DELETE   /menus/:id(.:format)        menus#destroy

リンク先の指定には、Prefixのキーワードが指定出来ます。先述のリンク設定では「menu」を指定しているので、商品IDが「1」の商品であれば、「menus/1」へのリンクになります。おかげで商品名をクリックするとその商品の詳細ページに遷移することが出来ます。わざわざIDを調べる必要もありません。めちゃくちゃ簡単ですね。

##編集ページへのリンク

詳細ページに編集ボタンを作成します。こちらもルーティングのPrefixで指定しますが「_path」をつけるのを忘れないように注意してください。

app/app/views/menus/show.html.erb

<%= link_to "編集", edit_menu_path %>

詳細ページに追加されたリンクをクリックすると編集ページに遷移します。内容を変更して更新ボタンを押すと、ふたたび詳細ページに遷移します。変更した内容で表示されます。
ちなみに、編集ページの更新ボタンを押した際は、ルーティングの「PATCH」が呼び出されます。

##新規作成ページへのリンク

一覧ページに新規登録ページへのリンクを作成します。やはりこちらもルーティングのPrefixで指定します。

app/views/menus/index.html.erb

<%= link_to "新規作成", new_menu_path %>

これでブラウザからデータベースにデータを新規登録出来るようになりました。

##削除ボタン（リンク）

詳細ページに削除用のリンクを作成します。こちらは書き方が少し特殊です。
「method: :delete」と書くことで、ルーティングの「DELETE」を呼び出すことが出来ます。

app/views/menus/index.html.erb

<%= link_to "削除", @menu, method: :delete, data: { confirm: "本当に削除しますか？" } %>

これでブラウザからデータベースのデータを新規削除出来るようになりました。

ここまでの設定でページ間のつながりが出来て、アプリっぽくなったのではないでしょうか。