【Ruby on Rails】テンプレートについて

2021年10月8日

MVCの表示担当V(ビュー)について勉強します。ビューはテンプレート(erbファイル)に書かれたものを使ってブラウザに表示をします。テンプレートの使い方を覚えておくことで、効率よくページの作成ができるようになりますよ

テンプレートの基本

Railsの基本はコントローラでこさえたインスタンス変数などをテンプレートに埋め込むのが基本の流れですよ！

テンプレートの書式

Railsのテンプレート(erbファイル)は、HTML文書の中にRubyコードを埋め込んだものです。<% %>または<%= %>で囲んだ部分はRubyのコードとして解釈されます。Ruby部分が動的にHTMLを生成され、ブラウザに送られます。

<%= %>式の結果が文字列に変換されて、そのまま表示される
<% %>コードは評価されるけど、文字列の挿入などは行われない
to_sメソッドで出力される

<%= 式 %>が出力されるときは、その中の四季に対してto_sメソッドが呼ばれています。Rubyのオブジェクトにはすべてto_sメソッドが備えられています。

ちなみにアクションがなくてテンプレートだけある場合は変数が空の状態で表示されますが、テンプレートがなくてアクションがある場合は、UnknownFormatというエラーが発生します。

renderメソッド

アクションの実行が終わるとRailsは自動的にアクションと同名のテンプレートを使ってHTMLを生成します。アクションの中でrenderメソッドを呼び出すと、別のテンプレートを使ってレンダリングすることも出来ます。

別のアクション用のテンプレートを共有するときには引数にアクション名を指定してください。例えばtestアクションでnoteテンプレートを使いたい場合は下記の様な指定になります。

 def test
  render "note"
 end

app/view/呼び出したコントローラディレクトリ以外のテンプレートを使いたい場合はapp/viewフォルダを起点とした相対パスで指定出来ます。その際、ファイル名の.html.erbは省略可能です。

HTML特殊文字の変換

Ruby内でJavaScriptのようなコードを含めた場合、表示する際に文字列が変換されます。

タグをそのまま表示させたい場合は<%== %>を使います。

	def step7
		@comment = "<strong>安全な表示</strong>"
	end
<p><%== @comment %></p>
<p><strong>安全な表示</strong></p>

HTML特例文字の変換を抑えるには次のようにhtml_safeメソッドを用いることも出来ます。

<p><%= @comment.html_safe %>

このメソッドは文字列に「HTML文書に埋め込んでも安全ですよ」というアピール。

link_toの引数で特殊文字

link_toメソッドの方にタグを生成するメソッドの引数でも、特殊文字の変換が行われます。Railsでは、<%= %>を書き、Action Viewのメソッドを使っていれば安全なHTMLを生成できるようになっています。引数にタグを埋め込みたい場合は、html_safeメソッドを使います。

書式の指定とヘルパーメソッド

Railsのビューの機能をいろいろ試してみましょう

数値、日付、文字列

<%= sprintf(“底辺%d cm、高さ%d cmの三角形の面積は %.2f平方cm",@teihen , @takasa ,@teihen*@takasa*0.5) %>

sprintfを使うことで数字の桁数や小数点の精度を決めることが出来ます。数値の他に日付もYmdHMDなどの形式を使うことでカスタマイズして表示することも可能です

number_with_delimmiterメソッドを使うと、3桁ごとにカンマを入れることも出来ます。

ヘルパーメソッドの作成

テンプレート内で使われるヘルパーメソッドを自分で書くことも出来ます。例として、改行をHTMLのbrタグに変換するtiny_formatoメソッドを定義してみましょう。

app/helpersディレクトリの下にlesson_helper.rbというファイルを新規作成して、次のような内容を書き入れてください。

module LessonHelper
  def tiny_format(text)
  	h(text).gsub("¥n", "<br />").html_safe
  end
end
	def step8
		@message = "改行コードで¥n改行してね"
	end
<p><%= tiny_format(@message) %></p>
出力結果

改行コードで
改行してね

こんな感じになります。他の人のプロジェクトに入って見慣れないモジュールなどがあれば、helperメソッドが作られていないか確認すると良いかもしれませんね。

リンクと画像

RailsのActionViewには、リンクや画像のためのタグを簡単に生成するヘルパーメソッドも用意されています。

リンク

link_toを使うことでHTMLのaタグのようなものが使えます。link_toメソッドには2つの引数を指定します

  1. リンクのテキスト
  2. パス

という感じに指定します。

<% link_to “Home" , root_path %>

root_path,:rootはトップページのリンクを指すことが出来ます。

<p> <%= link_to "Home" , :root , data {confirm: "本当に？"} %></p>

こんな感じにdataを追加すると本当に遷移するかどうか確認が入ります。HTMLのメソッドオプションを指定することもできるので必要に応じて追加し、カスタマイズが出来ます。

link_to を link_to_unless_currentにすることで現在のページの場合はリンクを貼らなくなります。

画像

画像を表示させるには以下のような記述で表示出来ます

<% image_tag(“rails-logo.svg" , size:64×20″ alt: “Ruby on Rails" , align: “top") %>

画像のパスはapp/assets/imagesディレクトリになります。image_tag(“/images/rails.png")のようにパスを/(スラッシュ)で始めることで、publicディレクトリにある画像が使われます。

一般的なタグの出力

HTMLのタグは、通常Rubyのコードとは別にして<%= %>の外に置きます。Rubyのコードを使ってタグを記述する必要があるときは、tagメソッドやcontent_tagメソッドを使います。

条件分岐と繰り返し

条件分岐や繰り返しの構文を利用すると、テンプレートを効率よく簡潔に記述出来ます。

条件分岐

テンプレートでは「<% if 条件式 %> 〜 <% else %> 〜 <% end %>」でテキストやHTMLのタグを囲むと、条件式の結果によって表示を切り替えることができます。間には「<% elsif 条件式 %>」をはさむことも出来ます。

<% if @zaiko > 0 %>
在庫の残りは<%= @zaiko %>個です。
<% else %>
品切れです
<% end %>

上記の結果だと、在庫の数がある場合は個数を表示して、ない場合は品切れですという表示に切り替わります。

繰り返し

繰り返す回数を指定したい場合はtimesメソッド、配列やハッシュの要素数の繰り返しをしたい場合はeachメソッドを使うことで繰り返しの処理を行うことが出来ます。

らんらんらんと表示させたい場合は以下のように繰り返すことで表示が出来ます。

<% 3.times do %>
らん
<% end %>

また、テーブルの要素などを繰り返しで作りたい場合はこんな感じ

def loop_test
 @fruits = {"いちご" => 100 , "メロン" => 2500 , "スイカ" => 750 , "バナナ" => 150}
end
<table border="1" cellpading="4">
<% @fruits.each do |key,val| %>
<tr>
 <th><%= key %></th>
 <td style="text-align: right"><%= number_with_delimiter{val} %>円</td>
</tr>
<% end %>
</table>

Ruby on RailsRuby_on_Rails

Posted by watanabe