0Pricing
Ruby Academy · レッスン

ビューとレンダリング

レスポンスを返します。

「ビューとレンダリング」はCoddyKit上の無料Ruby Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはRuby Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Ruby Academyコースには全4レッスンが含まれています。

ビューとは

ビューは、クライアントに送信するレスポンス（通常はHTML）を生成するテンプレートです。コントローラーが準備したデータをページに変換します。

  • ビューは app/views に配置します。
  • app/views/articles のように、コントローラーごとにまとめられます。
  • デフォルトのテンプレート名はアクション名と一致します。

規約に基づくレンダリング

デフォルトでは、アクションはアクション名と同じ名前のテンプレートをレンダリングします。ArticlesController の index アクションは、明示的な render 呼び出しなしで app/views/articles/index.html.erb をレンダリングします。

def index
  @articles = Article.all
  # automatically renders articles/index.html.erb
end

ERBテンプレート

デフォルトのテンプレート言語はERB（Embedded Ruby）です。HTMLとRubyを組み合わせて記述します：

  • <%= ... %> は値を出力します。
  • <% ... %> は出力せずにコードを実行します。
<h1>Articles</h1>
<% @articles.each do |article| %>
  <p><%= article.title %></p>
<% end %>

レイアウト

レイアウトは、ヘッダー、ナビゲーション、フッターなどの共通マークアップで各ビューを囲みます。デフォルトの app/views/layouts/application.html.erb には <%= yield %> が含まれており、そこにアクションのビューが挿入されます。

<!-- application.html.erb -->
<html>
  <body>
    <%= yield %>
  </body>
</html>

パーシャル

パーシャルは、ファイル名がアンダースコアで始まる再利用可能なテンプレートの断片です。render でレンダリングすると、マークアップの重複を避けられます。

<!-- _article.html.erb -->
<p><%= article.title %></p>

<!-- in index.html.erb -->
<%= render "article", article: @article %>

コレクションのレンダリング

コレクションを render に渡すと、各項目につき1回ずつパーシャルがレンダリングされます。これは慣用的で便利な短縮記法です。Railsはモデルからパーシャル名を推測します。

<%= render @articles %>

<!-- renders _article.html.erb for each article -->

ビューのヘルパー

Railsには、HTMLを安全に生成するヘルパーが用意されています。リンクには link_to、フォームには form_with、画像には image_tag を使用します。これにより、テンプレートを簡潔で一貫したものに保てます。

<%= link_to "View", article_path(@article) %>
<%= image_tag "logo.png" %>

その他の形式でレスポンスを返す

コントローラーはHTML以外の形式も返せます。render json: はAPI向けにJSONを送信し、respond_to はクライアントが要求した形式に応じて異なる形式を提供します。

def show
  @article = Article.find(params[:id])
  render json: @article
end

respond_to ブロック

respond_to を使うと、1つのアクションで複数の形式を処理できます。同じアクションから、ブラウザーにはHTMLを、APIクライアントにはJSONを返せます。

def show
  @article = Article.find(params[:id])
  respond_to do |format|
    format.html
    format.json { render json: @article }
  end
end

ステータスコード

status: を使ってレスポンスのHTTPステータスを設定します。:ok（200）は成功時、:created（201）は作成に成功した後、:unprocessable_entity（422）はバリデーションに失敗したときに使用し、クライアントが正しく反応できるようにします。

render :new, status: :unprocessable_entity
render json: @article, status: :created

エスケープと安全性

ERBは <%= %> の出力を自動的にHTMLエスケープします。これにより、ユーザーデータによるクロスサイトスクリプティングを防止できます。内容を完全に信頼できる場合に限り、raw や html_safe で安全なコンテンツとして扱ってください。誤って使用すると、XSSの脆弱性を再び招きます。

理解度チェック

ビューとレンダリングについての理解度を確認します。

まとめ：ビューとレンダリング

レスポンスを返す方法を学びました：

  • アクションは規約に従って対応するERBビューをレンダリングします。
  • レイアウトはビューを囲み、パーシャルは断片を再利用します。
  • link_to や form_with などのヘルパーでHTMLを構築します。
  • render json: と respond_to でAPIを提供し、適切なステータスコードを設定します。
  • ERBは出力をエスケープしてXSSを防ぎます。

これでコントローラーとルーティングのコースは完了です。

よくある質問

「ビューとレンダリング」レッスンは無料ですか？

はい。「ビューとレンダリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Ruby Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Ruby Academyコースには全4レッスンが含まれています。

「ビューとレンダリング」で何を学びますか？

レスポンスを返します。 ブラウザで直接実行するハンズオンコードでRuby Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Ruby Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのRuby Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「ビューとレンダリング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このRuby Academyレッスンでコードを書いて実行できますか？

はい。すべてのRuby Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ルートとリソース
  2. コントローラーとアクション
  3. Strong Parameters
  4. ビューとレンダリング
← Ruby Academyに戻る