Rails ビュー(ERB) とは？初心者でもわかりやすい書き方を解説

バックエンド開発•2025/2/6

Ruby Ruby on Rails

はじめに

RailsはWebアプリケーションを開発するうえで人気のあるフレームワークです。

この中で ビュー (View)と呼ばれる部分は、ユーザーが画面上で目にする見た目を定義する大切な役割を担います。

Railsでビューを作成する際には、ERBと呼ばれる仕組みを使ってHTMLにRubyのコードを埋め込みます。

しかし、初めてRailsを触る人にとっては、どうやってERBを活用すればいいか、どんな書き方があるのか戸惑うことも多いのではないでしょうか。

そこで本記事では、Railsの ビュー (ERB) とは何か、また実務でも役立つような書き方を初心者の皆さんにわかりやすく解説します。

この記事を読むとわかること

Railsで使われるビュー(ERB)の基本的な仕組み
ERBファイルの書き方とHTMLとの組み合わせ方
コントローラとの連携の流れ
レイアウトや部分テンプレート(パーシャル)を活用した効率的な開発手法
ヘルパーメソッドを使った実務での工夫

ここから先は、できるだけ専門用語をやさしく説明しながら、具体例を挙げていきます。

短いコードを交えつつ、なぜそれが必要なのかを実務のシーンに沿って解説していきますので、最後まで一緒に学んでいきましょう。

Railsのビュー(ERB)とは何か

Railsは大きく分けて モデル (Model) 、 ビュー (View) 、コントローラ (Controller)という三つの要素で構成されます。

ビューは、Webページの見た目を作る役割を担当します。

ここで使われるテンプレートとして多くの場合、ERBという形式が採用されています。

ERBの基本的な働き

ERBはEmbedded Rubyの略称で、HTMLにRubyコードを埋め込むためのテンプレートエンジンです。

HTMLの中に <% %> や <%= %> という特殊なタグを使ってRubyコードを書けるのが特徴です。

たとえば <%= %> のようなタグで囲んだ部分は、実際にページが表示される時に、Rubyコードの実行結果が文字列に変換されて埋め込まれます。

一方 <% %> だけで囲んだ部分は、Rubyコードの実行はされるものの、表示はされません。

実務では、繰り返し処理や条件分岐などをHTML内に埋め込んで動的なページを作るときに重宝します。

ERBファイルの拡張子

Railsにおけるビュー用ファイルは、拡張子として多くの場合**.html.erb**という形式が使われます。

これは、HTMLファイルにERBテンプレートが混在していることを示しています。

たとえば app/views/users/index.html.erb のような名前のファイルがあれば、それはユーザーの一覧ページを表すためのテンプレートファイルであると判断できます。

この拡張子を正しく使うことで、Railsがビューとして解釈し、ERBタグを正しい形で処理します。

ERBを使うメリットと実務での利用シーン

Railsでは、ビューにERBを使うことでHTMLを動的に生成できます。

とてもシンプルなルールで、Rubyの変数やメソッドをページ内に組み込めるのが最大の利点です。

実際の現場では以下のようなシーンでERBがよく活用されます。

データベースから取得したユーザー情報を一覧表示
「名前」や「メールアドレス」などのフォーム表示とフォーム送信時のエラー表示
ログイン中ユーザーの名前やプロフィールを表示
条件によって文言やスタイルを切り替える(ログイン中かどうかで表示を切り替えるなど)

ERBを理解すれば、ユーザーが求める情報を適切に画面へ表示する仕組みを容易に作れます。

ERBファイルの基本構文を理解する

それでは、具体的にERBのコードがどのように書かれるのかを見ていきましょう。

ここではほんの一例を示します。


<!-- index.html.erb の一部例 -->
<h1>ユーザー一覧</h1>

<ul>
  <% @users.each do |user| %>
    <li><%= user.name %>（<%= user.email %>）</li>
  <% end %>
</ul>

先ほど触れた <% %> と <%= %> の使い分けがポイントです。

<% %>: Rubyコードを実行するが、画面には表示されない
<%= %>: Rubyコードを実行し、その結果を画面に表示する

この例で言うと、 <% @users.each do |user| %> ではループを実行しているだけであり、実行結果は文字列として表示されません。

一方 <%= user.name %> はRubyコードの実行結果を文字列として表示するため、実際のページにはユーザーの名前が表示されます。

コントローラとの連携方法

ビューはRailsの構造上、コントローラに呼ばれる形で表示処理が行われます。

次のようなコントローラがあった場合を考えてみましょう。


class UsersController < ApplicationController
  def index
    @users = User.all
  end
end

ここでは @users という変数が定義されています。

Railsでは、コントローラ内で インスタンス変数 (@付きの変数)を定義すると、そのままビューでも利用できます。

つまり、先ほどの index.html.erb では @users を自由に使えるわけです。

このように、**「コントローラがインスタンス変数を用意し、それをERBビューで使う」**という流れが実務でも基本的なパターンとなります。

実務に役立つコーディングのコツ

初心者の方は、ERBファイル内にRubyコードをべったり書いてしまうケースがあるかもしれません。

しかし実務では、ビジネスロジックや複雑な処理はコントローラやモデルに寄せて、ビュー側はなるべくシンプルに保つ方が後々の保守が楽になります。

以下のような点を意識すると、より読みやすいERBビューになります。

1. 短いロジックだけを埋め込む

条件分岐やループの繰り返し程度にとどめておく。

2. 複雑なロジックはモデルやヘルパーに委譲

例えば、ユーザーの年齢計算などはモデル側でメソッドを用意し、ERBでは user.age のように表示だけ行う。

3. Rubyコードのネストを深くしない

多重の条件分岐をERBファイルに書くと読みづらくなるため、ヘルパーに切り出すのが無難。

こうした工夫によって、ERBファイルが整理され保守性が高まります。

レイアウトを活用した全体デザインの統一

Railsでは、アプリ全体で共通のヘッダーやフッター、サイドバーなどを定義したい時に、 レイアウト (layout)という仕組みが使われます。

多くの場合、 app/views/layouts/application.html.erb というファイルがデフォルトのレイアウトとして機能します。

このレイアウト内には <%= yield %> と書かれた箇所があり、ここが各アクションのビューを差し込むポイントになります。

簡単な例を見てみましょう。


<!-- application.html.erb -->
<!DOCTYPE html>
<html>
<head>
  <title>MyRailsApp</title>
</head>
<body>
  <header>
    <h1>アプリ共通のヘッダー</h1>
  </header>

  <%= yield %>

  <footer>
    <p>アプリ共通のフッター</p>
  </footer>
</body>
</html>

yield の部分に、個々のビュー(例: users/index.html.erb)が挿入されます。

これにより、複数のページで同じデザインを簡単に共有できるのがメリットです。

実務では、例えばヘッダーメニューや検索フォームをレイアウトにまとめて置くことが多いです。

部分テンプレート(パーシャル)の使い方

Railsでは、 部分テンプレート (パーシャル)を活用してビューを部品ごとに分割できます。

たとえば、同じ要素を複数のビューで使い回す場合や、1つのビューが長くなる場合に、パーシャルを使ってコードを整理します。

パーシャルファイルは名前が _ (アンダースコア)で始まるのが特徴です。

たとえば _user.html.erb というパーシャルファイルを作成し、ユーザー表示に関するHTMLをまとめておきます。


<!-- _user.html.erb -->
<li><%= user.name %>（<%= user.email %>）</li>

これを利用する側は、次のように書きます。


<!-- index.html.erb -->
<h1>ユーザー一覧</h1>
<ul>
  <% @users.each do |user| %>
    <%= render partial: "user", locals: { user: user } %>
  <% end %>
</ul>

こうすると、繰り返し部分がきれいに分割され、必要に応じて他のビューからも使い回しができるようになります。

条件分岐や繰り返し構文の応用

ERBビューの中で、条件分岐や繰り返しを使うケースは多々あります。

以下では、よく使われるパターンをいくつか紹介します。

if文での表示切り替え

ユーザーがログインしているかどうかで表示を切り替えたい場合などには、次のように書きます。


<% if @current_user %>
  <p>こんにちは、<%= @current_user.name %>さん</p>
<% else %>
  <p>ゲストとしてアクセスしています</p>
<% end %>

実務では、会員限定機能や権限のあるユーザーのみ表示可能なメニューなどの実装に使われます。

ループ処理でのリスト表示

すでに見たように、繰り返し処理には <% @items.each do |item| %> のような記述を使います。

これは、データベースから取得した一覧を表示する際には不可欠です。


<h2>商品の一覧</h2>
<ul>
  <% @items.each do |item| %>
    <li>
      <%= item.name %> : <%= item.price %>円
    </li>
  <% end %>
</ul>

実務では、売り上げレポートの一覧、売上金額の統計表示など、あらゆるシーンで繰り返し処理が活躍します。

フォームの作成とフォームヘルパー

Railsでは、フォームを作成する際にフォームヘルパーがよく使われます。

シンプルな例として、新規ユーザー登録フォームをイメージしてみましょう。


<!-- new.html.erb -->
<h1>ユーザー登録</h1>

<%= form_with(model: @user, local: true) do |f| %>
  <div>
    <label>名前</label>
    <%= f.text_field :name %>
  </div>

  <div>
    <label>メールアドレス</label>
    <%= f.email_field :email %>
  </div>

  <div>
    <%= f.submit "登録" %>
  </div>
<% end %>

このように書くと、Railsはモデル(ここでは @user)に対応したフォーム部品を自動生成してくれます。

実務ではバリデーションエラー時にエラーメッセージを表示させたり、ユーザーの入力が保持されたりと、とても便利です。

ちなみに form_with のほかにも form_for や form_tag などのヘルパーメソッドが存在しましたが、近年のRailsでは form_with が主流です。

ビューに書くべきでないロジック

初心者の方がやりがちなのは、ビューの中にビジネスロジックを詰め込みすぎることです。

たとえば「ユーザーが18歳以上なら表示する文言を変える」といった判定をビューに直接書くケースがあるかもしれません。

しかし、こうしたロジックは基本的にモデルで定義しておいた方がスッキリします。

モデル側で User#adult? のようなメソッドを定義しておき、ERBではその戻り値をチェックするだけにすると読みやすくなるでしょう。


<% if user.adult? %>
  <p>成人済みユーザーです</p>
<% end %>

このように、ビューは最低限の表示に関わる処理だけを担当するのが望ましいです。

Railsヘルパーを上手に使う

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

代表的なものとしては、リンクを生成するための link_to メソッドがあります。


<%= link_to "ユーザー一覧へ", users_path %>

これだけで、URLを指定しなくてもルーティング情報からリンクを生成してくれます。

他にも、日付のフォーマットを整形するヘルパーや、改行をHTMLの <br> に変換するヘルパーなど、さまざまなものが用意されています。

実務では独自のヘルパーを作って共通処理をまとめることも多いです。

実務で起こりがちなエラーと対処法

Railsのビュー(ERB)を扱う中で遭遇しがちなエラーをいくつか挙げてみましょう。

変数の名前を間違える

実務でよくあるのが「コントローラで @users と書いたのに、ビューで @user と書いてしまった」などのケースです。

Railsの場合、変数名が正しく一致していないと nil エラーや undefined method エラーが発生します。

こうしたミスは、コントローラとビュー双方の変数名をそろえることで回避します。

ERBタグの正しい使い分けミス

<%= %> と <% %> を混同してしまい、画面に余計な文字列が出てしまう、あるいは表示されるべきデータが表示されないことがあります。

「表示したいときは <%= %>、処理だけのときは <% %>」というルールを徹底することで、防ぎやすくなります。

部分テンプレートの呼び出し時に変数を渡し忘れる

パーシャルを render partial: "user" の形で呼び出したのに、locals: で必要な変数を渡していない場合、パーシャル内部で user が使えなくてエラーになることがあります。

実務では、パーシャル側で必要な引数が何かを定義しておき、呼び出す側で必ず locals: で渡すようにするのが定石です。

コードをまとめるテクニック: ヘルパーとパーシャルの併用

大規模開発や長期運用の現場では、ビューの行数が増えすぎてしまうと保守性に大きく影響します。

そのため、共通パターンをヘルパーとパーシャルに切り出すという方法がよく取られます。

1. 繰り返し構文そのものはパーシャルへ

同一の複雑なリスト表示をパーシャルにし、変数だけ変更すれば使えるようにしておく。

2. 日付のフォーマットや文字列処理はヘルパーへ

フォーマット処理だけで数行になる場合は、ヘルパーメソッドにまとめておく。

3. 条件分岐が複雑な場合は、モデルやヘルパー側で完結

ビュー側はif user.show_promotion? のような形に留めておくと読みやすい。

こうした手法は、複数人で作業する場合やコードレビューを行う場合にも役立ちます。

ERBとフロントエンド技術との組み合わせ

Railsのビューは、単純にHTMLを生成するだけでなく、JavaScriptやCSSと組み合わせて動的なページを作れます。

たとえば、Railsの標準的なアセットパイプラインを使い、JavaScriptファイルやCSSファイルを管理します。

ERBが生成した動的要素に対してJavaScriptが動作するように設計すれば、ユーザーの操作に応じて画面遷移や非同期通信(Ajax)を行うことも可能です。

実務では、簡単なAjax呼び出しをERBビューから行うケースや、Vue.jsやReactといったSPAフレームワークを組み合わせるケースもあります。

しかし、まずはERBを理解し、Rails標準の仕組みで画面を生成できるようになることが大切です。

i18n(多言語化)とERB

多言語サイトを作る場合、Railsのi18n機能を併用してビューを多言語化することが一般的です。

ERB内で t('messages.welcome') のように書くと、設定された言語ファイルの内容を取得して表示できます。

実務では、海外向けサービスや日本語と英語を切り替えるサービスなどで頻繁に活用されています。

HTMLの安全な出力とエスケープ

Railsのビューは、デフォルトでHTMLエスケープを行います。

つまり、 <%= %> で表示された文字列に対して、悪意のあるHTMLやJavaScriptが埋め込まれないように自動で対策してくれます。

万が一、HTMLをそのまま出力したい場合は raw メソッドを使ったり、sanitize メソッドを使って安全性を確保しながら表示することが可能です。

実務では、ユーザーが投稿するコメントなどをそのまま出力すると、XSS(クロスサイトスクリプティング)のリスクがあるため、Railsのデフォルトの振る舞いは大変便利です。

開発効率を上げるためのツール

Railsはアプリケーションをまとめて起動・管理するための仕組みが充実しています。

ERBでビューを編集した際も、サーバーを再起動しなくても即座に変更が反映されるケースが多いです。

また、rails generate コマンドを使うと、コントローラとともにビューファイルのひな形も自動生成できます。

実務で小まめに変更を繰り返す場合も、こうしたツールのおかげでスピーディーにビューを修正できます。

ERBビューの保守・運用で気をつけたいこと

運用が長期化すると、ERBファイルがどんどん増え続ける傾向があります。

結果的に「あれ、どこでこのHTMLを書いているんだっけ？」と迷うことが増えてしまいます。

そのため以下のような点を意識しましょう。

ディレクトリ構造を整理する

コントローラごとに app/views/users/ や app/views/products/ のようにわかりやすく配置する。

パーシャルの命名をルール化する

例えば _form.html.erb と _list.html.erb など、用途がわかる名前に統一する。

レイアウトを適切に分割する

特定の機能だけに適用されるレイアウトが必要な場合、application.html.erb とは別に作る。

こうした管理方法を徹底することで、複数人開発や長期運用でもトラブルを減らせます。

パフォーマンスを意識したERBビューの書き方

ERBのコードが増えすぎると、画面表示が重くなる場合があります。

ただし、多くの場合はデータベースのクエリ数や不要な画像読み込みなどが原因で、ERBの処理が直接原因になることはそれほど多くはありません。

それでも以下の点に気をつけると、ビューのパフォーマンスが維持しやすくなります。

1. 無駄なループを避ける

同じ結果を複数回ループで取得しないように、コントローラやモデル側で処理をまとめる。

2. N+1問題をチェックする

ビューで関連するデータを繰り返し呼び出していないか確認し、必要であれば .includes などを使ってあらかじめロードしておく。

3. 部分テンプレートの呼び出し回数に注意

極端にパーシャルの呼び出しが多い場合、ビューが遅くなるケースもあるため、場面に応じてまとめられないか検討する。

実務では、ビューの最適化と同時に、クエリの最適化も合わせて考えることが大切です。

JavaScriptとの連携による操作性の向上

Railsビューをより使いやすくするためには、JavaScriptとの連携も欠かせません。

最近はReactやVue.jsなどを導入して、フロントエンド側でも機能を強化するケースが増えています。

しかし、シンプルなアプリケーションなら、ERB上にJavaScriptのコードを埋め込んで動きをつけるだけで十分なこともあります。

例えば、フォーム送信時にAjaxリクエストを行い、ページ全体をリロードせずに一部だけ更新するといった操作を、RailsとERB、そしてJavaScriptで実装できます。

エラーやフラッシュメッセージの表示

ユーザー操作によって、何かエラーが発生したり、処理が完了したことを伝えたい場合はフラッシュメッセージがよく使われます。

たとえばコントローラ側で次のように書きます。


def create
  @user = User.new(user_params)
  if @user.save
    flash[:notice] = "ユーザーが登録されました"
    redirect_to users_path
  else
    flash[:alert] = "エラーが発生しました"
    render :new
  end
end

そしてビュー側(たとえば application.html.erb のレイアウト)で、フラッシュがあれば表示する仕組みを用意しておきます。


<% if flash[:notice] %>
  <p style="color: green;"><%= flash[:notice] %></p>
<% end %>
<% if flash[:alert] %>
  <p style="color: red;"><%= flash[:alert] %></p>
<% end %>

これでユーザーに対して、「処理が成功した」「エラーが起きた」などの情報をわかりやすくフィードバックできます。

Rails ビュー(ERB)の覚えておきたいまとめ

ここまで、Railsのビュー(ERB)とは何か、その基本的な書き方や実務上のコツについて解説してきました。

ERBはHTMLとRubyを混在させるための仕組みであり、Railsアプリの見た目を動的に作るうえで欠かせません。

コントローラから渡された変数を使って表示内容を切り替えたり、部分テンプレートを活用してコードを整理したりすることで、開発の効率がアップします。

以下ではいくつかポイントを改めて強調します。

ビューに書くロジックは最小限に留め、複雑な処理はモデルやヘルパーへ
レイアウトや部分テンプレートでコードを分割する
フォームヘルパーを活用して入力フォームを簡単に扱う
フラッシュメッセージでユーザーに処理結果をわかりやすく伝える

長期運用を想定するなら、ディレクトリ構造の管理やコメントの付け方、チーム内ルールの統一なども大切になります。

まとめ

本記事では、 Rails ビュー (ERB) とは何か 、そして具体的な書き方や実務での利用シーンを解説しました。

初心者の皆さんがつまずきやすいポイントや、実務を念頭に置いたコード整理のコツを幅広く取り上げています。

まずは小さな画面をERBで作り、コントローラから渡されたデータを表示させる流れを一通り経験してみるとよいでしょう。

繰り返しや条件分岐、部分テンプレートなどを使いこなせるようになれば、Railsでの開発はよりスムーズになります。

そこからレイアウトを使って共通部分をまとめたり、ヘルパーを定義してビューをよりシンプルに保ったりすれば、保守もしやすいアプリケーションが作れます。

何度か手を動かしていくうちに、自然とERBの書き方が身についていきます。

ここで紹介した内容をヒントに、Railsでのビュー開発を楽しんでみてくださいね。