ぞえの技術めも

Ruby on Rails勉強中

【106日目】【1日20分のRailsチュートリアル】【第9章】すべてのユーザーを表示するビューを作成する

Ruby on Railsチュートリアル(第3版)

今日は「9.3.1 ユーザーインデックス」のindexビューを追加するところから。

9.3.1 ユーザーインデックス

今度はすべてのユーザーを表示するために、全ユーザーが格納された変数を作成し、順々に表示するindexビューを実装します。

Userコントローラーにindexアクションを追加。

app/controllers/users_controller.rb

  def index
    @users = User.all
  end

(すべてのユーザーを一気に読み出すとデータ量が多い場合に問題が生じるのではないかと思われた方、そのとおりです。このキズは9.3.3で修正します。)

一気に読み出すと時間かかりそう。

実際のインデックスページを作成するには、ユーザーを列挙してユーザーごとにliタグで囲むビューを作成する必要があります。

ファイルを作成して

$ touch app/views/users/index.html.erb

下記内容でファイル更新。

app/views/users/index.html.erb

<% provide(:title, 'All users') %>
<h1>All users</h1>

<ul class="users">
  <% @users.each do |user| %>
    <li>
      <%= gravatar_for user, size: 50 %>
      <%= link_to user.name, user %>
    </li>
  <% end %>
</ul>

訳注: 7.7の1つ目の演習 (リスト7.31) でgravatarメソッドを拡張していない場合、以下のリストがうまく動きません。まだの方は当該リストのコードを先に反映させておいてください。

演習向けブランチでgravatarメソッドを拡張しているのでmasterブランチには反映してない。

リスト7.31の内容を反映しておく。

app/helpers/users_helper.rb

module UsersHelper

  # 引数で与えられたユーザーのGravatar画像を返す
  def gravatar_for(user, options = { size: 80 })
    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
    size = options[:size]
    gravatar_url = "https://secure.gravatar.com/avatar/#{gravatar_id}?s=#{size}"
    image_tag(gravatar_url, alt: user.name, class: "gravatar")
  end
end

CSS (正確にはSCSSですが) にもちょっぴり手を加えておきましょう (リスト9.35)。

ファイルの一番下に下記を追加。

app/assets/stylesheets/custom.css.scss

/* Users index */

.users {
  list-style: none;
  margin: 0;
  li {
    overflow: auto;
    padding: 10px 0;
    border-bottom: 1px solid $gray-lighter;
  }
}

最後に、サイト内移動用のヘッダーにユーザー一覧表示用のリンクを追加します。
これにはusers_pathを使用し、表7.1に残っている最後の名前付きルートを割り当てます。変更の結果をリスト9.36に示します。

ナビゲーションに追加してたUsersのリンク先をusers_pathに変更。

app/views/layouts/_header.html.erb

  :
          <li><%= link_to "Users", users_path %></li>
  :

これでユーザーのインデックスは完全に動くようになり、テストも全てパスするようになります。

テストが通ることを確認。

$ bundle exec rake test
36 tests, 85 assertions, 0 failures, 0 errors, 0 skips

表示も見てみよう。

サーバーを起動して

$ rails server -b $IP -p $PORT

<ローカルアドレス>/usersにアクセス。(ヘッダーの「Users」をクリック)

f:id:kt_zoe:20170203123445p:plain

…1人しかいない。さみしい。

今日の学習時間は【20分】。

次は「9.3.2 サンプルのユーザー」から。