記事概要

Ruby on Railsのビューについて、まとめる

前提

Ruby on Railsでアプリケーションを作成している

基本情報

ファイルパス

app/views/[コントローラー名]/[アクション名].html.erb

記載方法

文字情報

コントローラーの情報	記述	説明
受け取らない	HTML要素
受け取る	`<%= Rubyコード %>`	RubyコードをHTMLに埋め込み、ブラウザに表示される
受け取る	`<% Rubyコード %>`	RubyコードをHTMLに埋め込めるが、ブラウザに表示されない

ID情報を含めたルーティング

ルーティングの/:id部分にテーブルのID情報を与えることで、任意のパスに移動できる

パターン	説明	例
URIパターン	URIパターンの`/:id`部分に、`/#{レコード情報を格納した変数.id}`を記述	`"/tweets/#{tweet.id}"`
Prefix	Prefix_pathの後に、`(レコード情報を格納した変数.id)`を記述	`tweet_path(tweet.id)`

コメントアウト

<%# コメントアウト %>

ヘルパーメソッド

ビューでHTMLタグを出現させたりテキストを加工するために使用するメソッドの総称

ヘルパーメソッドを使用する利点は、下記

パスの指定やRubyの埋め込みなどの記述がシンプルになるため
セキュリティ上の問題を解消するため

まとめ(データ表示)

単一レコード情報の表示

表示するカラムを指定し、カラムの情報を表示する

<!-- インスタンス変数に格納されている単一レコード情報のカラムを表示 -->
<%= @インスタンス変数名.カラム名 %>

<!-- @postに格納されているレコードのcontentカラムを表示 -->
<%= @post.content %>

複数レコード情報の表示

繰り返し処理などを使用し、値を1つずつ表示する

eachメソッド

詳細は、こちらを参照

<!-- @postsに格納されているレコードのcontentカラムを順番に表示 -->
<% @posts.each do |p| %>
  <%= p.content %>
<% end %>

user_signed_in?メソッド

詳細は、こちらを参照

<% if user_signed_in? %>
    <!-- ログインユーザーの場合 -->
    <%= link_to "ログアウト", destroy_user_session_path, data: { turbo_method: :delete } %>
<% else %>
    <!-- ログアウトユーザーの場合 -->
    <%= link_to "ログイン", new_user_session_path %>
    <%= link_to "新規登録", new_user_registration_path %>
<% end %>

current_userメソッド

詳細は、こちらを参照

# ログインユーザーIDが必要なルーティング
"/users/#{current_user.id}"

renderメソッド

部分テンプレートを呼び出す際に利用するメソッド
※コントローラーに同名のメソッドが存在するが、別物

partialオプション

呼び出す部分テンプレート名を指定する

<!-- ビューファイルと同じフォルダにある_sample.html.erbを呼び出す -->
<%= render partial: "sample" %>

<!-- ビューファイルと異なるフォルダにあるapp/views/shared/_sample.html.erbを呼び出す -->
<%= render partial: "shared/sample" %>

localsオプション

部分テンプレートで使用できる変数を指定する

<!-- 部分テンプレートにて、"hello!"という文字列の代入された変数postが使用できる -->
<%= render partial: "sample", locals: { post: "hello!" } %>

まとめ(ヘルパーメソッド)

form_withメソッド

フォームを実装するためのヘルパーメソッド
HTMLのformタグの代わりに使用する
サンプルコードを参照

記述

doからendまでがフォームとして認識される

<%= form_with url: "/posts", method: :post, local: true do |f| %>
  <!-- 処理記述 -->
<% end %>

urlオプション

urlオプションに指定されたリクエストのパスに、フォームの情報を送る
コントローラーに、インスタンス変数の生成は不要

<%= form_with url: "/posts", method: :post, local: true do |form| %>
  <!-- 処理記述 -->
<% end %>

modelオプション

modelオプションに指定されたインスタンス変数の状態によってリクエストを送るアクションを自動的に判断し、フォームの情報を送る

インスタンス変数の状態とは、インスタンス変数に保存されている内容のこと

	新規作成	編集
フォーム送信	newアクションから、createアクションにフォーム情報を送信	editアクションから、updateアクションにフォーム情報を送信
インスタンス変数	中身は空	中身は空ではない
例	`@item = Item.new`	`@item = Item.find(params[:id])`

コントローラーに、インスタンス変数を生成

<!-- コントローラーに、インスタンス変数@tweetを生成-->

<%= form_with(model: @item, local: true) do |f| %>
  <!-- 処理記述 -->
<% end %>

引数

オプション名	説明
urlオプション	フォームの情報を送るリクエストのパスを指定
modelオプション	インスタンス変数を指定し、リクエストのパスを自動判断
methodオプション	フォームの情報を送るリクエストのHTTPメソッドを指定。オプションの初期値は`:post`なので、`post`メソッドを指定する場合は省略することが可能
localオプション	リモート送信であるAjaxでの通信を無効にするかどうかを指定。`true`にすると無効になる

フォームの部品を生成する主なヘルパーメソッド

label

フォームの項目名を表示する

引数
- name属性にあたる名前が入る
- テーブルのカラム名がフォームの項目名として表示される

text_field

1行のテキストボックス

引数
- name属性にあたる名前が入る
- name属性の値がデータを扱う際の名前であるキーになる
maxlengthオプション
- 入力できる最大文字数を指定する
- 最大文字数を超過して登録しようとした場合、最大文字数に自動でカットされる
- maxlength: "6"は最大6文字入力できる

number_field

1行の数値入力ボックス(数字を増減させるためのボタンが利用可能)

引数
- name属性にあたる名前が入る
- name属性の値がデータを扱う際の名前であるキーになる

password_field

パスワード入力ボックス(入力したテキストがアスタリスクなどに置き換えて表示される)

引数
- name属性にあたる名前が入る
- name属性の値がデータを扱う際の名前であるキーになる

check_box

チェックボックス(複数選択可能)

引数
- name属性にあたる名前が入る
- name属性の値がデータを扱う際の名前であるキーになる

radio_button

ラジオボタン(複数の中から1つしか選択できない)

引数
- name属性にあたる名前が入る
- name属性の値がデータを扱う際の名前であるキーになる

submit

送信ボタン

引数
- 送信ボタンに表示する文字列になる

全体

autofocusオプション
- autofocus: trueを記述したフォームに、カーソルがあたった状態でページが開く

検索フォーム

<!-- collectionを使用し、tweetsコントローラーにsearchアクションのルーティングを作成 -->

<%= form_with(url: search_tweets_path, local: true, method: :get) do |f| %>
  <%= f.text_field :keyword, placeholder: "投稿を検索する" %>
  <%= f.submit "検索" %>
<% end %>

link_toメソッド

リンクを作成するためのヘルパーメソッド
HTMLのaタグの代わりに使用する

記述方法

URL指定

<%= link_to 'リンクに表示する文字', 'リンク先のURL' %>

<%= link_to 'Googleへ移動', 'https://www.google.co.jp' %>

パス指定

<%= link_to 'リンクに表示する文字', 'パス', method: :HTTPメソッド %>

<%= link_to '新規投稿ページへ移動', '/posts/new', method: :GET %>

Prefix

<%= link_to 'リンクに表示する文字', Prefix_path %>

<%= link_to '新規投稿ページへ移動', new_post_path %>

メソッド別対応

GETメソッド

methodを削除可能であるため、基本的には記述しない

<%= link_to 'リンクに表示する文字', 'パス' %>

<%= link_to '新規投稿ページへ移動', '/posts/new' %>
<%= link_to '新規投稿ページへ移動', new_post_path %>

DELETEメソッド

削除対象を区別するために、テーブルのidカラムを指定する
data: { turbo_method: :delete }を記述する

<!-- リンクに表示する文字をクリックすると、URIパターン+削除対象(テーブルのidカラム ※値はパラメーターとして連携される)とDELETEメソッドのリクエストを送信する -->
<%= link_to 'リンクに表示する文字', "URIパターン/#{テーブル.id}", data: { turbo_method: :delete } %>

<!-- 削除リンクをクリックすると、URIパターン(/tweets/)+削除対象(tweetsテーブルのidカラム)とDELETEメソッドのリクエストを送信する -->
<%= link_to '削除', "/tweets/#{tweet.id}", data: { turbo_method: :delete } %>
<%= link_to '削除', tweet_path(tweet.id), data: { turbo_method: :delete } %>

image_tagメソッド

imgタグを生成するためのヘルパーメソッド

第一引数に下記どちらかを指定する
- app/assets/images配下の画像ファイル
- public配下の画像ファイル
  ファイル名の前に/が必要

<!-- app/assets/imageに、画像ファイルmenu.pngを格納 -->
<%= image_tag 'menu.png' %>

<!-- publicに、画像ファイルmenu.pngを格納 -->
<%= image_tag '/menu.png' %>

Ruby on Railsまとめ

ビュー