2020-11-12に投稿

2020.11.12 * 単語の一覧表示

本日のゴール

■ 一覧表示作成
■ トップ画面にリンクを作成

indexアクション作成

前回showアクションを一覧表示用のアクションにしましたが、単語のIDを指定して全件表示するのはおかしいです。
Railsの定石通り、全件表示はindexアクションにします。
words/index.html.erbを新しく作成します。

<h1>INDEX</h1>
<div>
<% @words.each do |word| %>
    <div>
        ID: <%= word.id %> |
        ENGLISH: <%= word.english %> |
        JAPANESE: <%= word.japanese %>
        <%= button_to 'Delete', word_path(word), method: :delete %>
    </div>
<% end %>
</div>

中身はh1タグ以外すべてshow.html.erbのコピペです。

続いてコントローラ!
words_controller.rb

class WordsController < ApplicationController
  def index
    @words = Word.all
  end

  以下略

先頭にindexアクションを作りました。

http://localhost:3000/wordsにアクセスしてみます。
image.png
やったー!

showアクションを本来の姿に戻す

IDを指定して1件だけ表示するやつに戻します。
words_controller.rb ※showメソッドのみ抜粋

  def show
    @word = Word.find(params[:id])
  end

words/show.html.erb

<h1>SHOW</h1>
<div>
    ID: <%= @word.id %> |
    ENGLISH: <%= @word.english %> |
    JAPANESE: <%= @word.japanese %>
</div> 

http://localhost:3000/words/1にアクセスします。
image.png
無事に本来の姿に戻りました。

トップ画面にindex, newのリンクを作る

http://localhost:3000/words/http://localhost:3000/words/newにいちいちアクセスするのが面倒なので、ついでにリンクを作ってしまいます。
第2回目の投稿で作成したトップ画面を使うことにしました。
top/index.html.erb

<h1>*WELCOME*</h1>
<p><%= link_to 'Add A Word', new_word_path %></p>
<p><%= link_to 'Show All Words', words_path %></p>

http://localhost:3000/にアクセス
image.png
動作確認もOKでした!

おわり*0 v 0

ツイッターでシェア
みんなに共有、忘れないようにメモ

view_list Ruby on Railsを使ったwebアプリ開発の記録
第3回 2020.11.10 * 英単語の登録機能
第4回 2020.11.11 * 削除機能
第5回 2020.11.12 * 単語の一覧表示
第6回 2020.11.16 * 編集機能
第7回 2020.11.17 * 画面設計

same0v0same

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント