JavaからのRuby on Rails入門

全てのリソースを表示する一覧画面を作る

calendar

reload

おさらい

 では、電話帳アプリの電話番号一覧画面を作ります。

 一覧画面は、http://○○○○/membersで見られるようになっています。

 Ruby on Railsの基本中の基本 MVC + ルーターについてを読んで、書いてある通りやってくれた人は、現時点では、http://○○○○/membersにアクセスすると、Helloという文字が表示されているはずです。

 テストサーバーを立ち上げて確認してみてください。

hello

 これは、http://○○○○/membersというhttpリクエストに対して、ルーターでの設定通り、membersコントローラーのindexアクションが呼ばれるからです。

 ルーティング(ルーターの設定)はこうなってます。↓

 2行目がhttp://○○○○/membersへのGETリクエストに対する記述です。右端のController#Actionの項目がmembers#indexになっているのが分かると思います。

 ではmembersコントローラー(/app/controllers/members_controller.rb)を確認してみましょう。

 membersコントローラーのindexアクションで、@messageというテンプレート変数にHelloという文字列を代入しています。

 その値を、このページで使われるビューであるindex.html.erbにて、参照することで表示しているんでした。

 これらは、コントローラーとビューの連携の仕組みを説明するために書いただけなので、一旦消してしまいましょう。
※コントローラーはindexアクションの中身だけ消して下さい。他のところを消さないように!

モデルに全リソースデータを用意させる

 一覧画面には当然、電話帳に登録した全員のデータを表示します。

 なのでindexアクションにて、モデルに「全memberのデータをmenbersテーブルから引っ張ってこい」と命令を出します。

 これだけです。恐ろしくシンプルです。
 Memberクラスのクラスメソッドであるallメソッドを呼んでいるだけです。その戻り値を@membersというテンプレート変数に代入しています。

 たったこれだけの記述で、membersテーブルの全データを、Memberオブジェクトの配列として取得し、ビューへと渡すことができます。

 Memberオブジェクトとは、つまりmembersテーブルの一行分(言い方をかえると一人分)のデータを持ったオブジェクトです。allメソッドで取得できるのは、そのMemberオブジェクトの配列です。
 モデル名(クラス名)が単数形であるのが頷けると思います。

member_object

※正しくは、allメソッドで取得できるのは配列ではなくActiveRecord::Relationというクラスのオブジェクトなのですが、ActiveRecord::Relationオブジェクトは配列と同じように扱うことができるようになっています。

eachメソッドを使って一覧画面のビューを生成する

 というわけで、membersテーブルの全てのデータが入っている@membersというテンプレート変数ができあがりました。

※とは言え、まだmembersテーブルには何のデータも入っていないのですが、とりあえずここでは、もしデータがあればそのデータを全て表示する状態に仕上げます。

 http://○○○○/membersのビューであるindex.html.erbを編集していきましょう。

 @membersの要素(人数)の数だけ繰り返す為にeachメソッドを使います。

 eachメソッドはレシーバの配列が持つ要素の数だけ繰り返し処理を行うことができる便利なメソッドです。詳しくはRubyの配列についてまとめてみたや、Rubyのブロック、ブロック引数、Proc、yieldをまとめてみたを読んでみてください。

 まず注意して見てもらいたいのが、
<%= %> と、<% %>
つまり “=” の有無です。何もhtmlとして出力しない箇所は、”=“無しです。覚えておきましょう。

 テンプレート変数である@menbersがMemberオブジェクトの配列なので、memberがその各要素であるMemberオブジェクト、つまりmembersテーブルの1行分(一人分)のデータを持ったオブジェクトです。

 @membersの要素の数(つまりmembersテーブルの行の数)だけ、

を繰り返して出力する状態です。

 今のところデータベースには何の情報も入っていないので、このままページを表示しても何も表示はされませんが、もしデータベース(membersテーブル)に以下の情報が入っている状態なら、

membersテーブル
id name yomi phone
1 本田圭佑 ホンダケイスケ 01011112222
2 香川真司 カガワシンジ 01022223333
3 長友佑都 ナガトモユウト 01033334444

 http://○○○○/membersにアクセスすると、以下のような画面が表示されるはずです。

 ちょっと無愛想な画面ですが、membersテーブルの情報をきちんと取得できているのが分かると思います。

 では次回は、新規登録画面を作っていきましょう。

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




関連記事

書いている人

Nobuo

Nobuo

一番かんたんなJava入門というサイトを運営しています。Javaやphpは少し分かりますが、Ruby on Railsについては全く何も知らないので、このサイトにアウトプットしながら覚えていこうかと思っています。 [詳細]

folder Rubyの基本文法

more...

folder 初めてのRuby on Rails入門

more...

folder Rails忘備録

more...