【Rails基礎講座 4】Railsアプリのデータ保存と表示 >
記事データをループさせる

記事データをループさせる

吉田先生

ループ機能を使ってこれまで登録してきた全記事を表示させることができます。

記事データをループさせる

前チャプターでindex.html.erbファイルをブラウザで表示することはできました。

しかし、表示されているのはファイルに書かれた内容のみです。

記事を一覧として全て表示させるにはループを使います。

1.ループ コントローラの設定

articlesコントローラのindexアクションに以下のコードを追記してください。

def index
  @articles = Article.all
end

このコードでArticleモデルの中のall(全ての記事)のデータを取得して、@articleというインスタンス変数(箱)に入れることができます。 今、@articlesには複数のデータが入っています。 これを繰り返し処理によって順番に全て表示させることができます。 ※繰り返し処理について不安な方は教程3のコチラを確認してください。 繰り返し処理の基本は

配列.each do |変数| 
  繰り返したい処理 
end 

でしたね。

今回は配列の部分が@articlesというインスタンス変数に変わっています。

また変数とは、1つの箱に代入された値のことでした。

@articlesの中にある複数の箱の1つ1つにはそれぞれのarticleが代入されています。

つまり配列.each do |変数| @articles.each do |article| となります。

次に、繰り返したい処理とは全ての記事を一覧として表示させることです。

理想としては図のようにタイトルと本文を全て表示させたいところです。

つまり繰り返したい処理とは投稿された全てのタイトルと本文を表示させるということになり、コードとしては以下のようになります。

 @articles.each do |article| 

タイトルを表示させる

本文を表示させる

end 


show.html.erbでブラウザにタイトルと本文を表示させた時のコードを思い出してください。

<h1><%= @article.title %></h1>

<p><%= @article.text %></p>


となっていましたね。

タイトルを表示させる本文を表示させるのコードも同様です。

つまりindex.html.erbのコードは

@articles.each do |article| 

<%= article.title %> 

<%= article.text %> 

end 


となります。

ではファイルを保存してブラウザを更新してみましょう。

これまで投稿した記事のタイトルと本文が表示されています。

2.tableタグでマークアップする

このままでは見づらいので、テーブルタグを使って表示を整えます。

<table>

   <tr>

   <th>タイトル</th>

   <th>本文</th>

   </tr>

   <% @articles.each do |article| %>

       <tr>

       <td><%= article.title %></td>

       <td><%= article.text %></td>

       </tr>

   <% end %>

</table>


tableタグを使用するとこのようになります。

 

3.tableタグとは?という人へ

tableとは表作成の際に使用するタグで

基本的には

``` <table>
<tr> 行の数
<th>1行の中の見出し</th>
<td>1行の中のデータ</td>
</tr>
</table>
```

例えば、Article.allの解説で使用したこの図の中の表のように、4行×3列の表であれば

のようなコードになります。

まとめ

教程5の内容は以上となります。お疲れ様でした。

コントローラとモデルの連携を確認する為にエラーを発生させて、パラメータでどのようなデータが送信されているのかを確認しました。

また、ストロングパラメーターズというRailsの機能がある為、TitleとTextというパラメータは必要なデータで許可されたものであるとメソッドとしてくくりだす必要があることもわかりました。

ブラウザの表示には、アクション名と同名のviewファイルが必要であることや、目的のページへアクセスする為の方法($ rake routesの確認方法)もでてきました。

教程3で解説した繰り返し処理を実践的に使用して、投稿記事の一覧を表示させることもできましたね。

教程4~教程5は、内容が盛りだくさんで大変だったかと思います。

次の教程6では記事の更新と削除を解説します。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る