はじめに
今回は表題にある通り、入力形式の時のコードの書き方とただの表示形式のコードの書き方が今になり、少し理解したので、簡単な例を挙げてアウトプットしたいと思います。
環境
- Windows, WSL
- Docker
- Ruby 3.2.3
- Rails 7.1.3
1. フォーム形式で表す
マイページの情報を編集する画面を作成している想定です。メールアドレス、名前、アバター画像を編集できるようなコードとなっています。
<%= form_with(model: current_user, local: true) do |f| %>
<div class="mb-3">
<%= f.label :email, class: 'form-label' %>
<%= f.email_field :email, class: 'form-control' %>
</div>
<div class="mb-3">
<%= f.label :full_name, class: 'form-label' %>
<%= f.text_field :full_name, class: 'form-control' %>
</div>
<div class="mb-3">
<%= f.label :avatar, class: 'form-label' %>
<%= f.file_field :avatar, class: 'form-control' %>
</div>
<%= f.submit 'Update', class: 'btn btn-primary' %>
<% end %>
特徴
-
入力フィールド: ユーザーが情報を入力するためのフィールド（
email_field,text_field,file_field）が使われています -
form_withメソッド: これはRailsのフォームビルダーで、モデルに基づいたフォームを簡単に作成できるものです。model: current_userで、現在のユーザーの情報をフォームにバインドしています。 -
CSSクラス: Bootstrapのクラス（例:
form-label,form-control）が使われていて、スタイルが整っています。
2. 表示形式
次は先ほどの編集画面とは異なり、単純にマイページで自身の情報を確認できる画面のコードとなります。
<div class="mb-3">
<label class="form-label">Email</label>
<p class="form-control-plaintext"><%= current_user.email %></p>
</div>
<div class="mb-3">
<label class="form-label">Full Name</label>
<p class="form-control-plaintext"><%= current_user.full_name %></p>
</div>
<div class="mb-3">
<label class="form-label">Avatar</label>
<p>
<%= image_tag current_user.avatar_url, class: 'rounded-circle', size: '50x50' %>
</p>
</div>
特徴
-
情報表示:
current_user.emailやcurrent_user.full_nameを表示するための部分になります。ユーザーの情報を直接表示するだけなので、入力フィールドはありません。 -
form-control-plaintextクラス: これはBootstrapのクラスで、読み取り専用のテキストを表示するために使われています。スタイルがシンプルで、編集できないことを示しています。 -
image_tag: アバター画像を表示するために使われていて、current_user.avatar_urlでユーザーのアバター画像のURLを取得しています。
まとめ
- フォーム部分はユーザーが情報を入力するためのインターフェースで、モデルと連携してデータを送信する役割があります。
- ユーザー情報表示部分は、すでに登録されている情報を見せるだけで、変更はできないようになっています。
この2つは、ユーザーのプロフィールを表示しながら、情報を更新するためのインターフェースを提供するために組み合わせられているもの。少し修正するだけで表示形式に変えたり、編集できるようなフォーム形式に変えたりと、便利だなと感じました。