1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-08-09

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

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

一覧ページの商品名をリンクにして、クリックすると商品詳細ページが表示されるようにします。
<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: "本当に削除しますか?" } %>

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

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

1
2
1

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?