更新日: 2017年03月01日
公開日: 2016年02月11日

作って学ぶRuby on Rails Vol.8 Viewをもっと使いこなそう！

Viewへの動的な処理の追加

Viewへの動的な処理の追加

までに自己紹介ページの年齢部分をAction内で動的に取得しました。前項

現状、app/controllers/top_controller.rbはそれぞれ若干の差はあるかと思いますが、下の図の様になっているかと思います。

app/views/top/profile.html.erbは下の図のような形だとします。

現状では、動的な処理はAction内に全て記述されており、View内ではActionで定義したインスタンス変数を取得しているだけの状態です。

本項では、View内での動的な処理を追加していきます。

<% %>で記述した部分はRubyのソースコードとして扱われると前述していますが、ViewへのRubyソースコードの記述方法は下記の２種類が存在します。

・<%= %>

の部分のコードを実行し、その結果をViewに出力する

・<% %>

の部分のコードを実行する

イコールが付くか付かないかの違いは、実行結果を表示する・しないの違いのみです。

Try Viewでの表示確認Tryapp/views/top/profile.html.erbの<%=%>部分を<%%>に書き換えてみましょう。

前項までに、View内で<%=%>を使用してきましたが、<%=%>の部分には、画面に表示する処理を記述し、<%%>には表示しない処理を追記していくことで、動的なViewを作成していきます。

app/controllers/top_controller.rbとapp/views/top/profile.html.erbを開いてください。

Actionに記述した動的な処理をViewに移植してみましょう。

上の図の赤枠の部分を、Viewの下の図の赤枠部に追記してみましょう。

下記コードが、追記後の状態です。


<div class="profile">
  <h1>プロフィール</h1>
  <div class="profile_image">
  <%= image_tag 'noimage.png' %>
  </div>
  <div class="profile_detail">
  <div class="label">ユーザー名</div>
  <div class="value"><%= @user_name %></div>
  </div>
  <div class="profile_detail">
  <div class="label">生年月日</div>
  <div class="value"><%= @birthday %></div>
  </div>

  <% date_format = "%Y%m%d" %>
  <% birthday = @birthday.to_date %>
  <% age = (Date.today.strftime(date_format).to_i - birthday.strftime(date_format).to_i) / 10000 %>

  <div class="profile_detail">
  <div class="label">年齢</div>
  <div class="value"><%= age %></div>
  </div>
  <div class="profile_detail">
  <div class="label">出身地</div>
  <div class="value"><%= @hometown %></div>
  </div>
  <div class="profile_detail">
  <div class="label">特技</div>
  <div class="value"><%= @skills %></div>
  </div>
  <div class="profile_detail">
  <div class="label">ひとこと</div>
  <div class="value"><%= @remarks %></div>
  </div>
 </div>

前述の通り、表示に利用するコードは<%=%>と記述し、表示しないコードは<%%>で記述しています。

また、下記のように１行ずつ<%%>を記述せずに一括りにしても同様の動作となります。


<div class="profile">
  <h1>プロフィール</h1>
  <div class="profile_image">
  <%= image_tag 'noimage.png' %>
  </div>
  <div class="profile_detail">
  <div class="label">ユーザー名</div>
  <div class="value"><%= @user_name %></div>
  </div>
  <div class="profile_detail">
  <div class="label">生年月日</div>
  <div class="value"><%= @birthday %></div>
  </div>
  <%
  date_format = "%Y%m%d"
  birthday = @birthday.to_date
  age = (Date.today.strftime(date_format).to_i - birthday.strftime(date_format).to_i) / 10000
  %>
  <div class="profile_detail">
  <div class="label">年齢</div>
  <div class="value"><%= age %></div>
  </div>
  <div class="profile_detail">
  <div class="label">出身地</div>
  <div class="value"><%= @hometown %></div>
  </div>
  <div class="profile_detail">
  <div class="label">特技</div>
  <div class="value"><%= @skills %></div>
  </div>
  <div class="profile_detail">
  <div class="label">ひとこと</div>
  <div class="value"><%= @remarks %></div>
  </div>
 </div>

基本的には、Actionで記述した内容を移植しただけになります。

移植後、Actionで記述した年齢の計算処理は不要なので、削除して下さい。