rails-ujs 復習

最近は使う機会が減ってきつつある rails-ujs について復習。

リソース: Rails で JavaScript を利用する - Railsガイド

UJS(Unobtrusive JavaScript)

Unobtrusiveは「控えめな」という意味。地味にRailsを支えているJS、みたいなイメージかな。

Railsでは、JavaScriptをDOMに追加する際の手法を「UJS: Unobtrusive（控えめな）JavaScript」と呼んでいます。

View helper by rails-ujs

rails-ujs を使うことでいくつかの view helper が使えるようになる。

アセットパイプラインを無効にしない限り、rails-ujsはJavaScriptの他に通常のRubyビューヘルパーも提供して、DOMに適切なタグを追加します。

local オプション

form に対して local オプションが使える。

<%= form_with(model: @article, id: "new-article", local: false) do |form| %>
  ...
<% end %>

remote オプション

link_to に remote オプションが使える。

<%= link_to "記事", @article, remote: true %>

Rails側をjs/jsonリクエストに対応させる

respond_to do |format| を使うことで１つのアクションで jsやjsonリクエストを対応させられる。

  # app/controllers/users_controller.rb
  # ......
  def create
    @user = User.new(params[:user])

    respond_to do |format|
      if @user.save
        format.html { redirect_to @user, notice: 'User was successfully created.' }
        format.js
        format.json { render json: @user, status: :created, location: @user }
      else
        format.html { render action: "new" }
        format.json { render json: @user.errors, status: :unprocessable_entity }
      end
    end
  end

format.js は app/views/users/create.js.erb というViewファイルに対応し下記のような内容でAJAXに対応させることができる。

var users = document.querySelector("#users");
users.insertAdjacentHTML("beforeend", "<%= j render(@user) %>");

See also. element.insertAdjacentHTML - Web API | MDN

CSRF token の取得

const token = document.getElementsByName(
  "csrf-token"
)[0].content;

rails-ujs　簡単な歴史