Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

scaffoldで生成されたコードから紐解くRails 5の基本構成

サンプルコードで学ぶRuby on Rails 5実践入門 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/01/16 14:00

 前回はRails 5のプロジェクト作成、scaffoldで自動生成したソースコードを元にルーティングを確認しました。第3回となる今回は、実際の動作をソースコードと関連付けて各アクションについて解説します。

目次

scaffoldを利用したRailsアプリケーションの基本動作確認(続き)(1)

 前回まではscaffoldで自動生成したソースコードのうち、ルーティングを確認しました。今回からは自動生成されたUsersコントローラーの各アクションを、実際の動作と見比べながら解説します。

Usersリソース一覧(indexアクション)

 まずUsersリソース一覧、つまりuserコントローラーのindexアクションへアクセスをします。先ほどの実行結果のURIを確認するとURIは/usersですので、http://localhost:3000/usersへアクセスします。以下のような画面が表示されるはずです。

図1 http://localhost:3000/users
図1 http://localhost:3000/users

 アクセスすると分かる通り、まだusersテーブルには何も入っておらず空なので、Usersリソースに関するレコードは何も表示されません。ここで対応するusersコントローラーのソースコードを確認します。

リスト1 app/controllers/users_controller.rb
class UsersController < ApplicationController
…(中略)…
  def index
    @users = User.all
  end
…(中略)…

 indexメソッドが追加されており、ActiveRecordのallメソッドを使用して全てのUserモデルを@usersインスタンス変数に代入しているコードが自動生成されています。コントローラーでアサインされたインスタンス変数はビュー側で利用することができるようになります。

 対応するビュー側のソースコードを確認します。

リスト2 app/views/users/index.html.erb
…(中略)…
  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
…(中略)…

 ビューファイルで@usersをeachでループしてuserレコードのnameとemailをテーブルで表示し、それぞれのレコードの操作であるShow(表示)、Edit(編集)、Destroy(削除)が定義されていることが分かります。

 link_toはRailsが提供するヘルパーメソッドの1つです。文字通りリンク(アンカーテキスト)のhtmlを出力します。第1引数にリンクの表示文字列、第2引数にパスを指定します。第3引数以降はハッシュでオプションを指定することができます。

 なお、ShowとDestroyの第2引数は少し特殊な省略形となっており、userレコードそのものが指定されています。これに対応するパスは/users/:idで、(userオブジェクトのid値が1の場合は)/users/1のようなパスが生成されます。

 Editの第2引数にあるedit_user_pathはRailsが提供するURLヘルパーです。これに、モデルオブジェクトを渡すことで、対応するパスを生成できます。edit_user_pathは/users/:id/editを表しますので、(userオブジェクトのid値が1の場合は)/users/1/editのようなパスが生成されます。

Userモデルインスタンス生成(newアクション)

 Usersリソース一覧から実際にusersテーブルへレコードを作成してみましょう。http://localhost:3000/usersの画面からNew Userのリンクをクリックすると以下の画面へ遷移します。

図2 http://localhost:3000/users/new
図2 http://localhost:3000/users/new

 nameとemailの入力画面が出力されました。name、emailを適当に入力してCreate Userボタンをクリックするとusersテーブルのレコードを入力して生成することができます。レコード作成前に該当するコントローラーとビューファイルを確認してみましょう。

リスト3 app/controllers/users_controller.rb
class UsersController < ApplicationController
…(中略)…
  def new
    @user = User.new
  end
…(中略)…
リスト4 app/views/users/new.html.erb
<h1>New User</h1>

<%= render 'form', user: @user %>

<%= link_to 'Back', users_path %>

 コントローラーではUserモデルのインスタンスをnewして@userインスタンス変数に代入しています。ビューではformという部分テンプレートを、renderメソッドを用いてレンダリングしています。renderメソッドはRailsが提供するヘルパーメソッドで、ビューファイルを特定のブロックごとに切り出す用途として使います。切り出されたテンプレートのことを部分テンプレートと呼びます。

 第1引数が部分テンプレートの名前です。第2引数では、userというローカル変数に@userインスタンス変数を代入しています。こうすることで、form部分テンプレートでuserという変数を使用することができます。

 それではform部分テンプレートを確認してみましょう。部分テンプレートはリソースと同一のビューディレクトリに、アンダースコアが付与されたファイル名のものが呼び出されます。このケースではapp/views/users/_form.html.erbが部分テンプレートとなります。

リスト5 app/views/users/_form.html.erb
<%= form_for(user) do |f| %>
…(中略)…
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :email %>
    <%= f.text_field :email %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

 form_forヘルパーメソッドでUserモデルのレコードを生成するためにuser変数を使用したフォーム関連のhtmlを作成しています。form_forメソッドの引数にActiveRecordのインスタンスを指定して変数fをブロックに渡しています。このように定義すると、ブロック内で「f.label :name」とすることでラベルのhtmlを、「f.text_field :email」とすることでテキストフィールドのhtmlを生成できます。

 具体的には「<label for="user_name">Name</label>」というhtmlと「<input type="text" name="user[name]" id="user_name">」というhtmlが生成されます。テキストフィールドのname属性の値がuser[name]、id属性の値がuser_nameとなっていることに注目してください。リソース名+リソースのカラム名のルールでid値が生成されることが分かります。

 f.submitメソッドはCreate Userボタンのhtmlを生成しています。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 竹馬 力(チクバ ツトム)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:サンプルコードで学ぶRuby on Rails 5実践入門

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5