Railsメモ(4) : コントローラとビューを作成する

rails consoleで追加した曲のデータをアプリで表示してみる。

コントローラの編集

---

まず下記コマンドでSongsコントローラのひな形を作成する。

$ ./bin/rails g controller Songs index
      create  app/controllers/songs_controller.rb
       route  get 'songs/index'
      invoke  erb
      create    app/views/songs
      create    app/views/songs/index.html.erb
      invoke  helper
      create    app/helpers/songs_helper.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/songs.coffee
      invoke    scss
      create      app/assets/stylesheets/songs.scss

app/controllers/songs_controller.rbが作成されたのでdef indexアクションの中身を編集する。

class SongsController < ApplicationController
  def index
    @songs = Song.all # 追加：全ての曲を取得する
  end
end

ビューの編集

---

ビューのapp/views/songs/index.html.erbも作成されているので、コントローラで取得した@songsの内容を表示するように編集する。

<table>
  <thead>
    <tr>
      <th>title</th>
      <th>display_artist</th>
      <th>ranking</th>
      <th>year</th>
    </tr>
  </thead>
  <tbody>
    <% @songs.each do |song| %>
    <tr>
      <td><%= song.title %></td>
      <td><%= song.display_artist %></td>
      <td><%= song.ranking %></td>
      <td><%= song.year %></td>
    </tr>
    <% end %>
  </tbody>
</table>

ルーティングの編集

---

最後にconfig/routes.rbを編集してルートへのルーティングを追加する。

Rails.application.routes.draw do
  root 'songs#index' # 追加：ルートへのルーティングを追加
  get 'songs/index'
  …省略…
end

これで準備が完了したので./bin/rails s -b 0.0.0.0を再起動してhttp://192.168.33.10:3000にアクセスすると下記画像のようにデータが表示される。
だが、見た目がシンプルすぎるので次ステップで見た目を変更してみる。

パーフェクト Ruby on Rails