基本

Ruby on Railsのビュー（View）を作成する

Ruby on RailsのビューはMVCアーキテクチャの「V」にあたる部分で、ユーザーに表示するHTMLを生成する役割を担います。Railsではerbテンプレートエンジンを使い、HTML内にRubyコードを埋め込むことで動的なページを構築します。この記事では、ビューファイルの作成方法からERBの書き方、レイアウトの仕組みまで解説します。

基本的な使い方

コントローラー作成時に生成されるapp/views/コントローラー名/フォルダに.html.erb形式のファイルを作成します。ファイル名はコントローラーのアクション名に合わせます。

app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    # アクション内に処理がなくても
    # app/views/posts/index.html.erbが自動表示される
  end
end
app/views/posts/index.html.erb
<h1>投稿一覧</h1>
<p>ここにコンテンツが表示されます。</p>

このように、コントローラーのアクション名と同じ名前のビューファイルを配置するだけで、対応するURLにアクセスしたときにHTMLが表示されます。

ERBテンプレートの書き方

.html.erbファイルと通常の.htmlファイルの違いは、ERBタグを使ってRubyコードを実行できる点です。主に2種類のERBタグがあります。

app/views/posts/index.html.erb
<!-- <%= %> : Rubyコードを実行し、結果をHTMLに出力 -->
<h1><%= @title %></h1>

<!-- <% %> : Rubyコードを実行するが、結果は出力しない -->
<% if @user.present? %>
  <p>こんにちは、<%= @user.name %>さん</p>
<% else %>
  <p>ゲストさん、ようこそ</p>
<% end %>

<!-- 繰り返し処理 -->
<ul>
  <% @items.each do |item| %>
    <li><%= item.name %>: <%= item.price %>円</li>
  <% end %>
</ul>

<%= %>は値を出力するときに使い、<% %>はif文やeach文などの制御構文に使います。=を付け忘れると値が表示されないので注意してください。

レイアウトの仕組み

各ビューファイルにはbody部分のみを記述します。HTMLの共通部分（head、ヘッダー、フッターなど）はapp/views/layouts/application.html.erbというレイアウトファイルで管理されています。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>MyApp</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag "application" %>
    <%= javascript_pack_tag "application" %>
  </head>
  <body>
    <header>
      <!-- 共通ヘッダー -->
    </header>

    <main>
      <%= yield %>
    </main>

    <footer>
      <!-- 共通フッター -->
    </footer>
  </body>
</html>

<%= yield %>の部分に、各ビューファイルの内容が自動的に埋め込まれます。これにより、ヘッダーやフッターなどの共通部分を一箇所で管理でき、各ビューではコンテンツ部分だけを記述すればよくなります。

スタイルシートの適用

ビューにCSSを適用するには、app/assets/stylesheets/ディレクトリにスタイルシートファイルを作成します。

app/assets/stylesheets/posts.scss
.post-card {
  border: 1px solid #ddd;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 8px;

  h2 {
    color: #333;
    font-size: 1.4em;
  }
}
ポイント

SCSSファイルの追加でエラーが出た場合は、Gemfileにgem 'sassc-rails'を追記し、bundle installを実行してください。

ヘルパーメソッドの活用

Railsにはビューで使える便利なヘルパーメソッドが多数用意されています。

app/views/posts/index.html.erb
<!-- リンクの生成 -->
<%= link_to "ホーム", root_path %>
<%= link_to "投稿詳細", post_path(@post) %>

<!-- 画像の表示 -->
<%= image_tag "logo.png", alt: "ロゴ", width: 100 %>

<!-- フォームの作成 -->
<%= form_with model: @post do |form| %>
  <div>
    <%= form.label :title, "タイトル" %>
    <%= form.text_field :title %>
  </div>
  <div>
    <%= form.label :content, "内容" %>
    <%= form.text_area :content %>
  </div>
  <%= form.submit "保存" %>
<% end %>

link_toはHTMLのaタグを生成し、image_tagはimgタグを生成します。form_withはモデルに紐づいたフォームを自動生成してくれる強力なヘルパーです。

注意

ERBテンプレートで<%= %>を使ってユーザー入力を表示する際、Railsは自動的にHTMLエスケープを行います。意図的にHTMLを出力したい場合はrawメソッドや.html_safeを使いますが、XSS攻撃のリスクがあるため信頼できるデータにのみ使用してください。

まとめ

  • app/views/コントローラー名/アクション名.html.erbにビューファイルを配置する
  • <%= %>で値を出力、<% %>で制御構文を記述する
  • レイアウトファイル（application.html.erb）の<%= yield %>にビューが埋め込まれる
  • スタイルシートはapp/assets/stylesheets/に配置する
  • link_to、image_tag、form_withなどのヘルパーメソッドを活用する
  • Railsは自動的にHTMLエスケープを行い、XSS攻撃を防止する