👻

[Rails] PFで使用したgem:simple_form

2023/05/15に公開

Ruby

今日は、前回ポートフォリオの記事の中の使用したgemの中から一つ、
gem:simple_formについて便利だったので書きたいと思います！

gem:simple_formについて

deviseでログイン機能を実装していたがもっと短くコードをかけて、簡易的にカスタマイズできる！！

gem:simple_form：概要

Railsに標準で含まれているform_forヘルパーメソッドよりも、
シンプルで簡潔なDSL（Domain-Specific Language）を提供し、
フォームの作成やカスタマイズを簡単に行うことができるもの。

【特徴】

シンプルなDSLを提供し、コードの読みやすさと書きやすさを実現。
レスポンシブ対応やBootstrapなどのフレームワークとの連携が容易にできる。
オプションで、入力フィールドのラベルやエラーメッセージの表示方法、フォームのスタイルなどを
カスタマイズすることができる。

このような入力フォームを作成するとして...

gem:simple_formを使用した場合としなかった場合でどのくらい変わるのか。
以下のタブに入れておきます！

gem:simple_form使用した場合との比較

【gem:simple_formを使用】

<div class="auth-form container">
  <h2 class="auth-form__title">Log in</h2>
  <%= render "public/shared/links" %>
  <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
    <%= f.input :email, autofocus: true, autocomplete: "email" %>
    <%= f.input :password %>
    <%= f.check_box :remember_me %>
    <%= f.label :remember_me %>
    <%= f.submit "Log in", class: 'auth-form__submit' %>
  <% end %>
</div>

【使用しなかった場合】

<div class="auth-form container">
  <h2 class="auth-form__title">Log in</h2>
  <%= render "public/shared/links" %>
  <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
    <div class="form-group">
      <%= f.label :email %>
      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :password %>
      <%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
    </div>
    <div class="form-check">
      <%= f.check_box :remember_me, class: "form-check-input" %>
      <%= f.label :remember_me, class: "form-check-label" %>
    </div>
    <%= f.submit "Log in", class: 'auth-form__submit btn btn-primary' %>
  <% end %>
</div>

deviseではdefaltでHTMLフォームがあるので、書くのがめんどくさいなどはないと思うが、
カスタマイズするのが少々描きづらいので、simple_formを使用すると簡単にすることができます😀

使用方法

前提条件としてdeviseでログイン機能は実装済みのものとする。

Gemfileにsimple_formを追加。

gem 'simple_form'

記述できたら、simple_formをインストール！　bundle install

これで使用可能です！
Simple Formの使用を開始するには、
Simple Formが提供するヘルパーsimple_form_forを使用するだけ！

以上！

gem:simple_formについて

gem:simple_form：概要

gem:simple_form使用した場合との比較

使用方法

Discussion