Ruby
Rails
フロントエンド

Webデザイナーが初めてrailsのviewを書くときに覚えておくと便利なコードまとめ

はじめに

会社で普段デザイナーも含めrailsのviewを書いているんですが、
デザイナーの子がわからない...っていう状況に陥ってるのをよく見るので、
自分がviewを書き始めたときにこれを覚えておけばなんとかなったってものをまとめました。

<% ~ %>

出力結果を出力しないコード。
制御構文(if文、each文)などの記述に利用します。

具体例

sample1.html.erb
<% if hoge.present? %>
<p>ふが</p>
<% end %>

出力結果

<p>ふが</p>

<%= ~ %>

結果を出力するコード。
変数を出力するときなどに使います。

具体例

sample2.html.erb
<%= "ほげ" %>

出力結果

ほげ

<%# ~ %>

コメントを書くときに使います。

link_to

<%= link_to 文字列, リンクのパス, option %>

リンクの生成に使用します

具体例
https://www.google.com/を別窓で開くリンクを作成

sample3.html.erb
<%= link_to "リンクのテスト", "https://www.google.com/", target: :_blank %>

出力結果

<a href="https://www.google.com/" target="_blank">リンクのテスト</a>

参考
http://railsdoc.com/view#%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E7%94%9F%E6%88%90(link_to)

image_tag

<%= image_tag 画像のパス, alt: "", option %>

画像の出力

具体例

sample4.html.erb
<%= image_tag "hoge.png", alt: "hoge", class: "image" %>

出力結果

<img src="hoge.png" alt="hoge" class="image">

if文

<% if 条件文 %>
 条件文がtrueだったときの処理
<% end %>

条件に対して
その条件が成り立つときに処理を実行します。

具体例

sample5.html.erb
<% cat = "cute" %>
<% if cat == "cute" %>
  <p>猫は可愛い</p>
<% end %>

出力結果

<p>猫は可愛い</p>

each文

<% オブジェクト.each do | 変数 | %>
 実行する処理
<% end %>

オブジェクト内の要素を順番に処理を行うメソッドです。

具体例

sample6.html.erb
tag_list = ["犬","猫","うさぎ"]

<% tag_list.each do | tag | %>
  <p><%= tag %></p>
<% end %>

出力結果

<p></p>
<p></p>
<p>うさぎ</p>

参考サイト

Ruby on Railsドキュメント
http://railsdoc.com/