Ruby on Railsビュー(view)の基本 – ビューの役割と使い方

2024-01-11

当サイトでは一部リンクに広告が含まれています

Ruby on Rails は、MVC（Model-View-Controller）アーキテクチャを採用しています。
その中でも、ビュー（View）はアプリケーションの外観やインターフェースを担当する部分であり、HTML、CSS、JavaScript を用いてユーザーに情報を表示する重要な役割を果たします。

この記事では、Ruby on Rails のビューについて初心者向けに解説します。

ビューとは

ビューは、MVC アーキテクチャの中で、コントローラーから渡されたモデルの情報を元に、実際の画面表示を行う役割を担います。

ビューの主な役割は、HTML テンプレートとして情報を表示し、デザインや UI を担当する CSS を組み合わせることで、ユーザーに見やすく、使いやすい UI を提供することです。

ビューの使い方

ビューは、Rails アプリケーションの app/views ディレクトリ内に保存されます。
各アクションに対して、コントローラーと同じ名前のファイルが自動的に作成されます。

例えば、PostsController の index アクションに対するビューは、app/views/posts/index.html.erb というファイルに保存されます。

.html.erb は、HTML と Ruby の組み合わせのファイル形式を示しています。

以下は、簡単なビューの例です。

app/views/welcome/index.html.erb というファイルを作成し、以下のコードを追加します。

<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> - My App</title>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

このコードは、HTML の基本構造に加えて、<%= @name %>という ERB タグを含んでいます。
このタグは、コントローラーから渡された@name 変数を表示するために使用されます。
コントローラーからビューに変数を渡すには、@をつけたインスタンス変数を使用します。

以下は、WelcomeController の index アクションに対する例です。

class WelcomeController < ApplicationController
  def index
    @name = "Alice"
  end
end

ビューを表示するには、ルーティングにビューのアクションを指定する必要があります。

例えば、config/routes.rb ファイルを編集し、以下のようにルートを設定します。

Rails.application.routes.draw do
  root 'welcome#index'
end

これにより、http://localhost:3000/にアクセスすると、WelcomeController の index アクションに対応するビューが表示されます。
@name 変数に設定された値が、ビュー上に表示されるはずです。

コントローラーからビューへの情報の渡し方

ビューで表示する情報を渡すには、コントローラーで変数を定義し、ビュー内でそれを参照する必要があります。

以下の例では、index アクションで定義された@users 変数を、ビュー内で参照しています。

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

<h1>Users</h1>
<ul>
  <% @users.each do |user| %>
    <li><%= user.name %></li>
  <% end %>
</ul>

ビュー内では、ERB タグ(<% %>や<%= %>)を使用して、Ruby のコードを埋め込むことができます。

<% %>は、Ruby のコードを実行するために使用されます。

一方、<%= %>は、Ruby のコードを実行し、その結果をビューに表示するために使用されます。

レイアウト

ビューには、レイアウトと呼ばれるものがあります。
レイアウトは、アプリケーションの共通部分を定義するために使用されます。

例えば、以下のように app/views/layouts/application.html.erb というファイルを作成し、アプリケーション全体で共通のレイアウトを定義することができます。

<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> - My App</title>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

このコードでは<%= yield(:title) %>と<%= yield %>という ERB タグを使用して、ビューで指定されたコンテンツを表示します。
ビューで content_for メソッドを使用することで、レイアウト内で定義した yield タグに値を渡すことができます。

以下は、app/views/users/index.html.erb というビュー内で、content_for メソッドを使用して title 変数を定義している例です。

<% content_for :title, "Users" %>
<h1>Users</h1>
<ul>
  <% @users.each do |user| %>
    <li><%= user.name %></li>
  <% end %>
</ul>

パーシャル

パーシャルは、ビュー内で再利用される部分ビューです。
例えば、複数のビューで同じような部分がある場合、パーシャルを作成して、その部分を再利用することができます。

以下は _user.html.erb という名前のパーシャルを作成し、app/views/users/ディレクトリに配置する例です。

<li><%= user.name %></li>

このパーシャルを、app/views/users/index.html.erb で使用するには、以下のように render メソッドを使用します。

<% content_for :title, "Users" %>
<h1>Users</h1>
<ul>
  <% @users.each do |user| %>
    <%= render partial: 'user', locals: { user: user } %>
  <% end %>
</ul>

render メソッドには、以下のようなオプションを指定することができます。

partial: 使用するパーシャルの名前を指定します。

例えば、_user.html.erb の場合は、user と指定します。

locals: パーシャルで使用するローカル変数を指定します。

例えば、上記の例では、user という名前のローカル変数を指定しています。

まとめ

Ruby on Rails のビューは、Web アプリケーションの外観を定義する重要な要素です。
ビューでは、HTML、CSS、JavaScript などを使用して、ユーザーにとって使いやすい UI を実現することができます。
また、ビュー内で Ruby のコードを実行することもできるため、コントローラーからビューに情報を渡すことができます。

ビューの機能を理解することで、より使いやすい Web アプリケーションを開発することができます。