Railsコードリーディング

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

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

2009/4/3

icon Ajaxでのパーシャル

 パーシャルの機能は、前述したように複数の画面で共通部品として再利用するだけでなく、もう1つ、別の使い方もあります。

 それは、Ajaxを使って画面の一部を変更する際に利用するというものです。画面の一部を動的に変更するときにパーシャルを利用することで、初期表示とAjaxによる表示を共通化できます。

 言葉では説明が難しいので、実際の例を使って説明します。再び、SKIPの「アンテナの整備」の画面で説明します。

 「アンテナの整備」では、自分が必ずチェックしたいブロガーの新規投稿を通知するSKIP独自のアンテナという機能の管理ができます。具体的には、画面上から新しいアンテナを追加できるようになっています。

Ajaxでパーシャルを利用
画面4 Ajaxでパーシャルを利用した部分

 画面4の赤い枠線で囲まれた部分が、Ajaxによって一部が書き換えられる場所です。赤い枠線の直下にある「アンテナの追加」のところで、アンテナの名称を入れて「追加」ボタンを押すと、リロードされることなく赤い枠線部分が再表示されて、新たなアンテナが追加されます。プログラム上の処理は、以下のようになっています。

  1. サーバ側にアンテナを追加するようリクエストが送られる
  2. サーバ側でデータベースのデータを追加する
  3. 追加変更した結果、そのデータベースのデータをHTMLに変換してクライアントに返す
  4. 画面上の赤い枠線部分が、サーバ側から戻されたHTMLで書き換える

 3の工程でクライアントに返すHTMLは、画面全体ではなく、Ajaxで変更する画面の一部になります。このときに利用しているのが、ERBの説明でサンプルとして登場したapp/views/mypage/_antennas.html.erbというパーシャルです。この部分をパーシャルにしておくことで、最初にERBで処理する際に部品として表示し、なおかつ、Ajaxで書き変わる際にも同じ部品が使えるという訳です。

 Ajaxで呼び出されるサーバサイドは、以下のように記述します。

359
360
361
362
  def add_antenna
    Antenna.create(:user_id => session[:user_id], :name => params[:name])
    render :partial => 'antennas', :object => find_antennas
  end
app/controllers/mypage_controller.rb

 361行目のrenderメソッドで、antennasのパーシャル(_antennas.html.erb)を呼び出しています。このパーシャルが実行(評価)されて、HTML部品としてクライアントに返されます。

 また、画面全体を表示するには、以下のように記述します。

26
27
28
  <div id="antennas_list_container">
    <%= render :partial => 'antennas', :object => @antennas -%>
  </div>
app/views/mypage/_manage_antenna.html.erb

 こちらは前節で解説したとおり、ERBで処理するように画面の一部として挿入しています(27行目)。このようにパーシャルをうまく使うことで、画面側であっても似たようなコードの重複を避けることができます。

icon 共通部品を分離して使うヘルパー

 パーシャルが画面上の部品の共通利用だったとするならば、ヘルパーは画面まわりの処理の共通化といえます。

 ERBファイルの中では、基本的にHTMLを記述していき、必要に応じて<%= … %>を使ってRubyのコードを埋め込んでいくスタイルになっています。しかし、複雑なロジックになってしまうことがあります。

 ERBファイルの中に長いRubyのコードを書いてしまうと、可読性が下がりますし、ロジック部分のテストと画面表示のテストが混ざり、保守性も悪くなります。

 このような場合に活躍するのがヘルパーです。ヘルパーはロジック部分を切り出して、通常のRubyコードで記述できます。このコードはapp/helpersディレクトリに配置されます。

 SKIPの例で見てみましょう。

06
07
08
    <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>
app/view/mypage/_antennas.html.erb

 実は、今回の最初の例で説明した、icon_tagというアイコンを表示するメソッドは、ヘルパーで表現されていました(7行目)。ヘルパー内では、以下のように記述しています。

16
17
18
19
20
21
22
module SkipHelper

  # アイコンタグを参照する
  def icon_tag(name, options = {})
    result = content_tag(:span, '&nbsp;', {:class =>"ss_sprite ss_#{name}"}.merge(options))
    options[:margin] ? result + " " : result
  end
app/helpers/skip_helper.rb

 ヘルパーは、Rubyのクラスとメソッドという形で実現します。20、21行目は、出力する文字列を生成しています。このヘルパーメソッド内で生成されたHTMLの断片が、ERB側でHTMLに挿入されます。

 このようなシンプルなメソッドとはいえ、コードがERBファイルの中に組み込まれてしまうと読みにくくなります。また、こうしておくことで、このメソッドを別の場所から再利用することもできます。

 Railsアプリケーションごとに、独自のヘルパーメソッドを追加できます。しかし、ActionViewにも標準で多くの便利なヘルパーが用意されています。自作してみる前に、必要なヘルパーがないか探してみると良いでしょう。

関連リンク:
リンク Rails API ドキュメント
http://api.rubyonrails.org/

icon 次回からは応用編!

 画面側の処理はどうしても煩雑(はんざつ)になりがちですが、ActionViewのレイアウトやパーシャル、ヘルパーなどの仕組みを活用することで、シンプルでDRYなコードが書けるようになります。

 SKIPではあまり使われていないので、今回は紹介を割愛しましたが、ActionViewには、BuilderというXMLを構築する仕組みや、JavaScriptGenerator(RJS)というJavaScriptを記述せずにRubyでAjaxを実現できる仕組みなど、便利な機能が揃っています。

 今回まででRailsの基本的な構造や読み方については終わりです。次回からは応用編ということで、SKIPで使っているオープンな技術やオープンソースのミドルウェアを、どうやってRailsアプリケーションで活用しているのかに焦点を当てて、コードリーディングを行っていきます。

 そのコンセプトに立って次回は、OpenIDというインターネット上での認証の仕組みについての解説と、それをSKIP上でRailsアプリケーションとしてどうやって組み込み、実現しているのかを解説する予定です。

prev
3/3
 
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 記事ランキング

本日 月間