SHOEISHA iD

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

連載記事

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

CodeZine BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
サンプルコードで学ぶRuby on Rails 5実践入門

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

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

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

ダウンロード サンプルファイル (86.0 KB)

 前回は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
" ); }

おすすめ

アクセスランキング

  1. 1
    NVIDIA、AIスーパーコンピューター「Project DIGITS」を発表 NEW
  2. 2
    大企業を芯からアジャイルに──20年以上アジャイル実践してきた市谷氏が語る変革への道
  3. 3
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  4. 4
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  5. 5
    Meta社開発のSSG、「Docusaurus 3.7」リリース NEW
  1. 6
    【成長するための1on1完全攻略術】意義を理解して効果的なミーティングを行うための準備をしよう! NEW
  2. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  3. 8
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット
  4. 9
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  5. 10
    Node.js v23.6.0 リリース、TypeScriptの実行が容易に

アクセスランキング

  1. 1
    NVIDIA、AIスーパーコンピューター「Project DIGITS」を発表 NEW
  2. 2
    大企業を芯からアジャイルに──20年以上アジャイル実践してきた市谷氏が語る変革への道
  3. 3
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  4. 4
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  5. 5
    Meta社開発のSSG、「Docusaurus 3.7」リリース NEW
  6. 6
    【成長するための1on1完全攻略術】意義を理解して効果的なミーティングを行うための準備をしよう! NEW
  7. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  8. 8
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット
  9. 9
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  10. 10
    Node.js v23.6.0 リリース、TypeScriptの実行が容易に
  1. 1
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  2. 2
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  3. 3
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  4. 4
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  5. 5
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  6. 6
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  7. 7
    Google、社内AIエージェント「Google Agentspace」発表
  8. 8
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  9. 9
    「CUDA」 ~マンガでプログラミング用語解説
  10. 10
    テストは増え続ける、でもボトルネックにはできない──テスト効率化の2つのカギを朱峰 錦司氏が解説!

イベント

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

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

メールバックナンバー

アクセスランキング

  1. 1
    NVIDIA、AIスーパーコンピューター「Project DIGITS」を発表 NEW
  2. 2
    大企業を芯からアジャイルに──20年以上アジャイル実践してきた市谷氏が語る変革への道
  3. 3
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  4. 4
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  5. 5
    Meta社開発のSSG、「Docusaurus 3.7」リリース NEW
  1. 6
    【成長するための1on1完全攻略術】意義を理解して効果的なミーティングを行うための準備をしよう! NEW
  2. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  3. 8
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット
  4. 9
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  5. 10
    Node.js v23.6.0 リリース、TypeScriptの実行が容易に

アクセスランキング

  1. 1
    NVIDIA、AIスーパーコンピューター「Project DIGITS」を発表 NEW
  2. 2
    大企業を芯からアジャイルに──20年以上アジャイル実践してきた市谷氏が語る変革への道
  3. 3
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  4. 4
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  5. 5
    Meta社開発のSSG、「Docusaurus 3.7」リリース NEW
  6. 6
    【成長するための1on1完全攻略術】意義を理解して効果的なミーティングを行うための準備をしよう! NEW
  7. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  8. 8
    より良いプロダクトを作り続けるために ――ソフトウェアエンジニアのための3つのキャリア構築マインドセット
  9. 9
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  10. 10
    Node.js v23.6.0 リリース、TypeScriptの実行が容易に
  1. 1
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  2. 2
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  3. 3
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  4. 4
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  5. 5
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  6. 6
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  7. 7
    Google、社内AIエージェント「Google Agentspace」発表
  8. 8
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  9. 9
    「CUDA」 ~マンガでプログラミング用語解説
  10. 10
    テストは増え続ける、でもボトルネックにはできない──テスト効率化の2つのカギを朱峰 錦司氏が解説!