SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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を生成しています。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
サンプルコードで学ぶRuby on Rails 5実践入門連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9914 2017/01/16 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング