DBの情報を取得する


動画の流れ

Top画面にデータベースに保存した値を全て表示するのがこの動画のゴールです。

コードの修正

  • app.rbContact.allを使って、contactsテーブル内の情報を全件取得します。@contactsを用意して、取ってきた情報を代入します。
  • @contactsを使ってindex.erbに値を全件表示するテーブルを作成します。

index.erb

<table>
  <thead>
  </thead>
  <tbody>
    <!-- @contactsに入っている連絡帳情報を順番にcontactとして取ってきます -->
    <% @contacts.each do |contact| %>
    <tr>
      <td><%= contact.id %></td> <!-- 情報に付いている連番のIDを埋め込む -->
      <td><%= contact.name %></td> <!-- 名前を埋め込む -->
    </tr>
    <% end %>
  </tbody>
</table>

動作の確認

  • TOP画面https://workspace-username.c9users.io/で更新してみましょう。
    • 先ほど入れたデータ「ああああ」が表示されれば成功です。
  • 次にもう一度フォームからデータを新規作成してみます。
    • TOP画面https://workspace-username.c9users.io/でデータが一件増えていることを確認します。
  • HTMLを変更してテーブルをより見やすくします。
<table border="1">
  <thead>
    <caption>連絡先一覧</caption>
    <tr>
      <th>ID</th><th>名前</th>
    </tr>
  </thead>
  <tbody>
    <% @contacts.each do |contact| %>
      <tr>
        <td><%= contact.id %></td>
        <td><%= contact.name %></td>
      </tr>
    <% end %>
  </tbody>
</table>
  • TOP画面でテーブルの見た目が変わっていることを確認します。
  • データをもう一件追加してみるとこちらも反映されるはずです。

いろいろやってみよう

  • Contact.allが実行された時のコンソールのログを見てみましょう。
  • SELECT "contacts".* FROM "contacts" の意味をもう一度逆引きSQL構文集で確認してみましょう。

検索してみましょう

  • 今回のxxxxx.each do |xxxxx| endの部分のプログラムの意味をおおまかに把握してみましょう。
  • HTMLにまだ詳しくない方は「HTML table」で検索してまずはHTMLの構文を理解してみましょう。
  • 「ruby each」で検索して一番簡単な記事を読んでみましょう。
    • こちらの記事もあわせて読んでみましょう。

一歩進んだ学習

  • eachメソッド内に出てくるcontact.idcontact.nameは現状としてはデータベースのテーブルの一件のレコード(行)のカラム名と対応してデータが取得できるという理解で構いません。
  • contact.idcontactsテーブルの一件のレコードのカラム名idのデータが取得できます。
  • contact.namecontactsテーブルの一件のレコードのカラム名nameのデータが取得できます。
  • より詳しく知りたい方は「ActiveRecord」で検索していくつか記事を読んでみることをおすすめします(ただ、今は難しい内容かもしれませんので流し読み程度に)。

今回のコードはこちらで確認することができます。

前の章へ戻る

次の章へ進む