Railsコードリーディング

第4回 ActionViewを使ったソースコードを読もう

倉貫 義人
松村 章弘
TIS株式会社
SonicGarden

2009/4/3

優れたプログラマはコードを書くのと同じくらい、コードを読みこなせなくてはならない。優れたコードを読むことで、自身のスキルも上達するのだ(編集部)

icon ユーザーが最初に体験するのは“見た目”

- PR -

 第3回「ActiveRecordを使ったソースコードを読もう」では、MVCのM(モデル)の部分に当たるActiveRecordを使ったソースコードについて、データベースアクセスを中心に解説しました。

 今回は、ユーザーが目にする画面に関連した、MVCのV(ビュー)の部分に当たるActionViewについて、Ajaxなどの話も含めながら解説します。

 ActionViewの主な役割は、ユーザーのWebブラウザに表示されるHTMLを動的に生成することです。

 Railsで作られるWebアプリケーションは、ユーザーからのアクションをコントローラで受け取り、必要に応じてモデルを通じてデータベースへのデータの出し入れを行い、最後にビューで画面表示を行います。

 実際にユーザーが見る画面を表示するのはWebブラウザの仕事なので、ActionViewではサーバ側のRailsアプリケーション内でHTMLを生成するところが役割になります。

 ActionViewには、画面のもととなるHTMLを生成するうえで、以下に示すような特徴があります。

  • 画面の一部をRubyで記述することができる(テンプレートエンジン)
  • 画面の全体構成を、複数の画面で揃えることができる(レイアウト)
  • 画面の一部分を、部品として共通して利用することができる(パーシャル)
  • 画面表示に関する共通処理を分離して再利用することができる(ヘルパー)

 これらの特徴は、どれもRailsの基本思想の1つであるDRY(同じことを繰り返さない)の考え方を実現したものになっています。今回の記事では、それぞれについて詳しく説明していきます。

icon コードリーディング題材「SKIP」

SKIPデモサイト 今回も、オープンソースの組織活性化アプリケーション「SKIP」を題材として扱います。SKIPを導入することで、社員同士のコミュニケーションを増やし、組織を活性化することができます。現在、ver1.0.2が最新で公開されています。

 今回扱うソースコードのバージョンは、最新版ではなく第3回と同じく1.0.1です。入手方法は、第3回に書かれていますので、そちらを参考にご利用ください。

 今回は、画面側ということでAjaxの処理など、言葉の説明だけでは動きのイメージがつかめない個所もあるかと思います。それについては以下のデモサイトで実際の動きを試しながら読むと理解しやすくなるでしょう。

関連リンク:
リンク オープンソース「SKIP」
http://www.openskip.org/
リンク 「SKIP」デモサイト
http://www.openskip.org/demo/
リンク SKIP ver.1.0.1のソースコード(GitHub)
http://github.com/openskip/skip/tree/v1.0.1
リンク SKIP ver.1.0.1のダウンロード
http://www.openskip.org/ja/download/download_archives/

icon ERB(テンプレートエンジン)

 Railsでは、HTMLを生成する際の仕組みとして、ほかのWebフレームワークと同様にテンプレートの考え方を採用しています。Railsのテンプレートエンジンには、Rubyを組み込めるERBが採用されています。

 テンプレートの考え方は至ってシンプルで、HTMLで記述されたテキストファイルの一部に、Rubyで書かれたコードを埋め込み、ERBを通すことで、Ruby部分が処理されて完全なHTMLとして出力されるというものです。

ERBの仕組み

 Railsでは、ERB用のテンプレートとして書かれるViewのソースコードは、app/viewsディレクトリの中に、コントローラの名前に対応したディレクトリごとで格納されます。ファイル名は、app/views/groups/index.html.erbのように付けられます。

 実際の画面を見ながら説明した方が分かりやすいので、SKIPの画面で見ていきましょう。

 画面1は、SKIPの「自分の管理」ページにある「アンテナの管理」という機能です。分かりやすくするために赤く囲まれている部分のソースコードを見てみましょう。ファイルの個所は、app/view/mypage/_antennas.html.erbです。

アンテナの管理画面
画面1 アンテナの管理

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<ul id="antennas_list">
<% antennas.each do |@antenna| -%>
  <li id="antenna_<%= @antenna.id -%>" class="antenna" style="border: 1px solid silver; margin-bottom: 5px; padding-bottom: 5px;">
    <%= hidden_field_tag("authenticity_token", form_authenticity_token) %>

    <div style="border-bottom: 1px dashed silver; background-color: #f0f0ff;">
      <%= icon_tag 'transmit' -%>
      <span class="editable_antenna_name" id="editable_antenna_name_<%= @antenna.id -%>"><%=h @antenna.name -%></span>
      <a id="add_antenna_item_link_<%= @antenna.id %>" class="add_antenna_item_link" href="#">[アイテム追加]</a>
      <a id="delete_antenna_link_<%= @antenna.id %>" class="delete_antenna_link" href="#">[削除]</a>
    </div>
    <ul id="antenna_items_list_<%= @antenna.id %>" class="antenna_items_list" style="cursor: move; margin-left: 25px;">
      <%= render :partial => 'antenna/antenna_item', :collection => @antenna.antenna_items, :locals => {:antenna_id => @antenna.id} %>
    </ul>
  </li>
<% end -%>
</ul>
app/view/mypage/_antennas.html.erb

 上記のHTMLの本文中に、<% %>や<%= %>などのHTMLではない部分に囲まれたコードがあります。この部分が、ERBによって処理されるRubyのコードになります。

 7行目を見てみましょう。<%= … %>というタグが使われています。このタグをHTMLの中に記述しておくと、ERBで処理される際に該当部分のRubyコードが実行(評価)され、その結果を文字列として埋め込まれます。

 7行目では<%= %>の中で「icon_tag」というメソッドを呼び出しています。icon_tagというメソッドは、引数で指定した名前のアイコンファイルを表示するHTMLを生成するものです。従って、この部分は「transmit」という名前のアイコンを表示するHTMLになります。

 次に、2行目を見てみましょう。今度は、<% … %>で囲まれています。先ほどとは異なり、「=」が付いていません。

 このタグで囲まれた部分は、Rubyのコードの実行(評価)した結果をHTMLに挿入しません。どのような使い方をするのかというと、each文で繰り返し処理を行う際などに利用します。ここでは、2行目の「do」から、16行目の「end」までを繰り返し処理します。こうするとHTML上で何度も同じようなコードを書くことが防げますし、数が動的に変わる場合などにも対応できます。

 このほか、テンプレート上だけのコメントを残したい場合は、<%# … %>で囲みます。こうすると、ERBが処理する際に“なかったこと”になります。まだいくつかの記法がありますが、基本的にこの3つを知っていれば、ほとんどのActionViewのソースコードは読めるようになります。

 
1/3
next

Index
ActionViewを使ったソースコードを読もう
Page1
ユーザーが最初に体験するのは“見た目”
コードリーディング題材「SKIP」
ERB(テンプレートエンジン)
  Page2
全体の見た目を揃えるレイアウト
共通の部品を扱うパーシャル
  Page3
Ajaxでのパーシャル
共通部品を分離して使うヘルパー
次回からは応用編!

index Railsコードリーディング 〜scaffoldのその先へ〜

 Ruby/Rails関連記事
プログラミングは人生だ
まつもと ゆきひろのコーディング天国
 ときにプログラミングはスポーツであり、ときにプログラミングは創造である。楽しいプログラミングは人生をより実りあるものにしてくれる
生産性を向上させるRuby向け統合開発環境カタログ
Ruby on Rails 2.0も強力サポート
 生産性が高いと評判のプログラミング言語「Ruby」。統合開発環境を整えることで、さらに効率的なプログラミングが可能になる
かんたんAjax開発をするためのRailsの基礎知識
Ruby on RailsのRJSでかんたんAjax開発(前編)
 実はAjaxアプリケーション開発はあなたが思うよりも簡単です。まずはRuby on Railsの基礎知識から学びましょう
Praggerとnetpbmで作る画像→AA変換ツール
Rubyを使って何か面白いものを作ってみよう!
 一般的な画像をアスキーアートに変換するツールを作ってみる。さらに出力にバリエーションを持たせてみよう
コードリーディングを始めよう
Railsコードリーディング〜scaffoldのその先へ〜(1)
 優れたプログラマはコードを書くのと同じくらい、読みこなす。優れたコードを読むことで自身のスキルも上達するのだ
  Coding Edgeフォーラムフィード  2.01.00.91


Coding Edge フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Coding Edge 記事ランキング

本日 月間
ソリューションFLASH