Ruby On Rails 学習記録 [2] View編

View

前述の例ではコントローラから出力を直接生成しました。
今回は、一般的な ERBテンプレート を利用した出力の生成を行ってみたいと思います。
ERBテンプレート とは、HTML に Ruby scriptを埋め込むための 仕組みです。
HTML がベースとなっているため、最終的な出力をイメージしながら開発を進められるというメリットがあります。

  • 任意の Ruby scriptを埋め込めるので、条件分岐や繰り返しなどの処理も自由に記述できる。
  • ビューヘルパーを利用することで、データベースから取得した値に基づいたリンクやフォーム要素などをシンプルなコードで生成できる。

テンプレート変数の設定

Hello World という メッセージを表示するサンプルを作成します。
まずは、リクエスト処理の起点として、コントローラークラスのアクションメソッドから準備します。
前回までの変更を踏まえた上で、 hello_controller.rb に要素を追加していきます。

class HelloController < ApplicationController
  ## 前回までの編集分は混乱を避けるために割愛する.
  def view
    @msg = 'Hello World'
  end
end

テンプレートファイルの作成

テンプレートファイルを単独で作成するコマンドはないので、ファイルは自分で作成します。
今回はhello_controller#view に対応するテンプレートファイルなので、 hello ディレクトリの view.html.erb ファイル(hello/view.html.erb) を作成します。

その中で、動的な処理は <%...%><%=...%> を用いて記述します。

以下のような使い分けをします。

<% 任意のコード %>
<%= 何らかの値を返す式 %>

それでは実際に HelloController の @msg に入った内容を表示するview のサンプルを作成してみます。

<!-- views/hello/view.html.erb -->
<div id="main">
<%= @msg %>
</ div>

テンプレート変数を HelloController で 定義しましたが、これは、 @変数名 で参照できるようになっています。

サンプルの実行

まず、config/routes.rb へ以下の ルート定義を指定します。

get 'hello/view'

これで、以下のアドレスでサンプルへアクセスできるようになります。
http://localhost:3000/hello/view
アクセス後、Hello World と 画面に表示されていることを確認してから次へ進んでください。

ビューの自動生成について紹介

rails generate コマンドでは、コントローラークラス(アクションメソッド)と合わせてテンプレートファイルの自動生成も可能です。
以下は、hello コントローラーのshow アクション と 対応するテンプレートファイル hello/show.html.erb を自動生成する例です。

rails generate controller hello show
#=> hello/show.html.erb が生成される.

また、 rails generate controller hello index show new のように引数を渡すことで、複数のアクションをまとめて生成することもできます。
生成すべき、アクションが予めわかっている場合は、このようにまとめて必要なファイル(やコード)を生成してしまう方が手軽でしょう。

アクションメソッドの省略について

たとえば、rails では、 以下のようなURLにアクセスするときにhelloコントローラにnothingメソッドが実装されていない場合、アクションメソッドを介さずに、テンプレートファイルhello/nothing.html.erbを検索、実行します。 URL : http://localhost:3000/hello/nothing

共通レイアウトの適用

先程のhttp://localhost:3000/hello/viewの実行結果をBrowserのページのソースを表示から確認してみましょう。
テンプレートファイルで定義したものよりも随分多くのコンテンツが出力されていることが確認できます。
自動で付与されているコンテンツは app/views/layouts/application.html.erb で定義されているものです。
Rails では デフォルトで、 application.html.erb<%= yield %> に個別のテンプレート(例えばhello/view.html.erb)を埋め込んだ上で最終的な出力を生成します。
application.html.erb のことをレイアウトテンプレート、あるいは、単に レイアウト と呼びます。
レイアウトは、サイトのデザインの外枠だと捉えてください。レイアウトを利用することでヘッダ・フッタ・サイドメニューなどの繰り返し、用いられるサイト共通のデザインを一箇所にまとめることできます。
メリットは以下です。
- サイトデザインを変更する場合もレイアウトだけを変更すれば良い。
- 個別のテンプレートには、ページ固有のコンテンツだけを記述すればよい。
- サイト構成などに一貫性ができるため、使い勝手も向上する。

DRY になるし、 統一感も増すよってことですね。

コメント構文

<%# ... %>

erb 標準のコメント構文
ブロックの内部をすべてコメントとみなす。

#

通常の <% %> の内部で用いる。

<% msg = 'this is not a comment. 
   # これはコメントです。 >

<% if false %> ... <% end %>

条件分岐構文を利用したコメントアウト.
条件式がfalse なので 常に配下のコメントは無視されるという構図になっている.
主なユースケースとしては、デバッグ時などに、特定の機能やレイアウトを一時的に無効化したい場合などが考えられます。

<% =begin %> ... <% =end %>

上で紹介した if 文を用いたコメントアウトですが、本来の if の 意図が誤解されてしまう可能性もあるので、本来は条件分岐を利用せずに済ませるべきでしょう。
そのような場合には、この見出しのコメントアウトを利用すべきでしょう。
ただしこれを利用する場合は、 =begin , =end のいずれも 行頭に配置する必要があります。注意が必要です。

<%
=begin
>
<% msg = 'ここは無視されます' %>
<%
=end
>

<!--...-->

これは標準的なHTMLのコメントです。
ERB は あくまでも HTML をベースとしているので HTML のコメントも利用できます。
ただし、今まで紹介したものと異なり、Browser側で処理されるコメントなので、内容がBrowser側からも見えてしまうことに注意してください。