作って学ぶRuby on Rails Vol.16 ユーザーを表示しよう!


作って学ぶRuby on Rails Vol.16 ユーザーを表示しよう!
目次
  1. Modelを利用したCRUD(Read編)

Modelを利用したCRUD(Read編)

までにModelを利用した、CRUDの一つであるCreate(データの作成)を行いました。前項

本項では、CRUDのRであるRead(参照)を実装していきます。

app/controllers/users_controller.rbを開いてください。

今回はindexとshowという2つのActionとそれぞれのViewを作成していきます。

indexは、usersテーブルに登録されたユーザーの一覧を表示し、

showは、indexページ ( ユーザーの一覧 ) から、ユーザーを選択した際に表示されるように実装していきます。

それでは、indexというActionに対して、下記の行を追記して下さい。

@users = User.all
class UsersController < ApplicationController
  # 初期表示
  def index
  @users = User.all
  end
  # データを閲覧する画面を表示するためのAction
  def show
  end
  # データを作成する画面を表示するためのAction
  def new
  @user = User.new
  end
  # データを更新する画面を表示するためのAction
  def edit
  end
  # データを作成するためのAction
  def create
  @user = User.new(user_params)
  @user.save
  redirect_to @user
  end
  # データを更新するためのAction
  def update
  end
  # データを削除するためのAction
  def destroy
  end

  def user_params
  params.require(:user).permit(:name, :gender, :birthday, :hometown, :remarks)
  end
end

これは、UserというModelを利用してusersテーブルから全てのユーザー情報を参照し、それらを@usersというインスタンス変数へ代入するという内容になります。なお、@usersは配列として保持しています。

続いて、Viewを編集していきます。以前、自己紹介ページを作成した際にeachメソッドを利用して「特技」の項目を繰り返し処理で複数行表示しました。今回も同様にeachメソッドを利用して、@usersに対して繰り返し処理を実行し、全ユーザーの情報を表示します。

app/views/users/index.html.erbを開いてください。

下記のようにeachメソッドを利用した処理を実装します。

eachメソッド

<% @users.each do |user| %>

ここに処理を記述する

<% end %>

これは以前も学習しましたが、@users( 配列 )を1件ずつuserという変数に格納しながら繰り返し処理を実行します。

上記コードの「ここに処理を記述する」の箇所で変数userの各項目を参照していきます。

まずは、ユーザー名を表示してみましょう。

Ruby_on_Rails_ユーザー1-1


<% @users.each do |user| %>
  <%= user.name %><br />
<% end %>

ブラウザで確認すると、下の図のようになります。

Ruby_on_Rails_ユーザー1-2

http://xxxxx.c9users.io:8080/users

※xxxxxの部分は各環境ごとに異なります。

上記URLにて作成したユーザーが全て表示されていれば成功です。

ユーザーを作成したのに表示されないという場合や、エラーの場合は記述ミスの可能性があるので、再度確認してみて下さい。

Try 作成したユーザー情報の表示

本項で全ユーザーの名前を一覧で表示させましたが、名前以外にも下記の項目も一覧に表示させましょう。また、一覧の見た目もCSSを利用して整えて下さい。
・性別
・生年月日
・出身
※一覧に表示させる場合は、tableタグを利用して、表として1ユーザー1レコードで作成して下さい。

image

NEXT LESSON ☛ ユーザー画面を整えよう!

PREV LESSON ☛ CRUDを学ぼう!その3

目次 - Ruby & Ruby on Rails テキスト目次 -


関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp