【Rails7】Ajax + Stimulusでメールアドレスが登録済みかどうかチェックする方法 (jQueryなしで実装)

class UsersController < ApplicationController

  ・・・

  # メールアドレスがすでに登録されているか（ユーザーが存在するか）どうかチェックする
  def is_registered?
    user = User.find_by(email: params[:email]) # クリエパラメータに埋め込んだEメールアドレスからユーザーを検索（いなければnull)
    render json: user
  end

end

post "signup/check_email", to: "users#is_registered?"

Prefix               Verb    URI Pattern                      Controller#Action
signup_check_email   POST   /signup/check_email(.:format)     users#is_registered?

// Eメールアドレスのバリデーション
emailValidation() { // inputイベントが発生すると以下の処理が実行される

  ・・・

  // ① //
  const csrfToken = document.getElementsByName('csrf-token')[0].content // CSRFトークンを取得
  const options = { 
    method: "POST", // POSTメソッドを指定
    headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRF-Token': csrfToken // CSRFトークンを設定
          }
  }

  // ② //
  const params = { // 入力したEメールアドレスをパラメータオブジェクトに代入する
    email: emailInput.value
  }

　// ③ //
  const query_params = new URLSearchParams(params)  // オブジェクト形式のparamsをクエリ文字列に変換

　// ④ //
  fetch("/signup/check_email" + "?" + query_params, options)
  // →http://localhost:3000/signup/check_email?email={入力したEメールアドレス} に POST送信

}

// ③ //
const query_params = new URLSearchParams(params)

// 例)
const query_params1 = new URLSearchParams({"foo" : 1 , "bar" : 2});
query_params1.toString();
// "foo=1&bar=2"

const query_params2 = new URLSearchParams({"email" : "info@example.com"});
query_params2.toString();
// "email=1info%40example.com" ←(エスケープ処理により @ が %40 に変換される)

// ④ //
fetch("/signup/check_email" + "?" + query_params, options)
// →http://localhost:3000/signup/check_email?email={入力したEメールアドレス} に POST送信

// Eメールアドレスのバリデーション
emailValidation() {

  ・・・

  const csrfToken = document.getElementsByName('csrf-token')[0].content // CSRFトークンを取得
  const options = { 
    method: "POST", // POSTメソッドを指定
    headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRF-Token': csrfToken // CSRFトークンを設定
          }
  }

  const params = { // 入力したEメールアドレスをパラメータオブジェクトに代入する
    email: emailInput.value
  }

  const query_params = new URLSearchParams(params)  // オブジェクト形式のparamsをクエリ文字列に変換

  // users#is_registered?アクション に POSTリクエスト(クリエパラメータでemail情報の送信)
  fetch("/signup/check_email" + "?" + query_params, options)
  /***** ↓ 追記(ここから)  *****/
    .then(response => response.json()) // レスポンスを JSON オブジェクトとしてパースする
    .then(response => {
      if (response) { 
          // レスポンスにユーザー情報が返ってきた場合の処理（すでにユーザーが登録済み場合）
      }else{
         // レスポンスにユーザー情報が返って来なかった場合の処理（ユーザーが未登録の場合）
      }
    })
  /******  ここまで  ******/
}

class UsersController < ApplicationController
  protect_from_forgery except: :is_registered? # ← 「InvalidAuthenticityToken」エラー対策

  ・・・

  # メールアドレスがすでに登録されているか（ユーザーが存在するか）どうかチェックする
  def is_registered?
    user = User.find_by(email: params[:email]) # クリエパラメータに埋め込んだEメールアドレスからユーザーを検索（いなければnull)
    render json: user
  end

end

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="signup"
export default class extends Controller {
  static targets = [
                    "name",
                    "email",
                    "password",
                    "password_confirmation",
                    "submit",
                    "error_name",
                    "error_email",
                    "error_password",
                    "error_password_confirmation"
                    ]

  // ユーザー名(表示名)のバリデーション
  nameValidation() {
　　・・・
  }

  // Eメールアドレスのバリデーション
  emailValidation() {
    const emailInput = this.emailTarget // Eメールアドレスの input
    const emailError = this.error_emailTarget // エラーメッセージ
    const emailRegex = /^[a-zA-Z0-9_+-]+(\.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/ // 正規表現パターン

    if(emailInput.value === ""){ // 入力フォームが空の場合
      emailInput.style.border = "2px solid red"
      emailError.textContent = "Eメールアドレスを入力してください"
      emailError.style.color = "red"
    }else if(!emailRegex.test(emailInput.value)){ // 入力した値がemailRegexの正規表現パターンにマッチしない場合
      emailInput.style.border = "2px solid red"
      emailError.textContent = "有効なEメールアドレスを入力してください"
      emailError.style.color = "red"
    }else{ // 正規表現パターンにマッチする場合
      const csrfToken = document.getElementsByName('csrf-token')[0].content // CSRFトークンを取得
      const options = { 
        method: "POST", // POSTメソッドを指定
        headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-Token': csrfToken // CSRFトークンを設定
              }
      }
      const params = { // 入力したEメールアドレスをパラメータオブジェクトに代入する
        email: emailInput.value
　　  }
      const query_params = new URLSearchParams(params) // オブジェクト形式のparamsをクエリ文字列に変換
      // users#is_registered?アクション に POSTリクエスト(クリエパラメータでemail情報の送信)
      fetch("/signup/check_email" + "?" + query_params, options)
        .then(response => response.json())
        .then(response => {
          if (response) { // レスポンスにユーザー情報が返ってきた場合（すでにユーザーが存在する場合）
            emailError.textContent = 'すでに登録されているメールアドレスです'
            emailInput.style.border = "2px solid red"
            emailError.style.color = "red"
          }else{ // ユーザーが存在しない場合
            emailInput.style.border = "2px solid lightgreen"
            emailError.textContent = ""
          }
        })
    }
  }

  // パスワードのバリデーション
  passwordValidation() {
　　・・・
  }

  // 送信ボタンの有効化
  validSubmit() {
　　・・・
  }

  // Eメールアドレスのバリデーション
  emailValidation() {
    ・・・

    // セットされているTimeoutをクリアする
    clearTimeout(this.timeoutEmail)

    // 300ms後に処理Aを実行する
    this.timeoutEmail = setTimeout( ()=> {
 　　　
　　　　// 処理A

    }, 300) // ← タイマーを設定する(300ms後に処理Aを実行)
  }

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="signup"
export default class extends Controller {
  static targets = [
                    "name",
                    "email",
                    "password",
                    "password_confirmation",
                    "submit",
                    "error_name",
                    "error_email",
                    "error_password",
                    "error_password_confirmation"
                    ]

  // ユーザー名(表示名)のバリデーション
  nameValidation() {
　　・・・
  }

  // Eメールアドレスのバリデーション
  emailValidation() {
    const emailInput = this.emailTarget // Eメールアドレスの input
    const emailError = this.error_emailTarget // エラーメッセージ
    const emailRegex = /^[a-zA-Z0-9_+-]+(\.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/ // 正規表現パターン

    // セットされているTimeoutをクリアする
    clearTimeout(this.timeoutEmail)

    // 300ms後に下記処理を実行する
    this.timeoutEmail = setTimeout( ()=> {
      if(emailInput.value === ""){ // 入力フォームが空の場合
        emailInput.style.border = "2px solid red"
        emailError.textContent = "Eメールアドレスを入力してください"
        emailError.style.color = "red"
      }else if(!emailRegex.test(emailInput.value)){ // 入力した値がemailRegexの正規表現パターンにマッチしない場合
        emailInput.style.border = "2px solid red"
        emailError.textContent = "有効なEメールアドレスを入力してください"
        emailError.style.color = "red"
      }else{ // 正規表現パターンにマッチする場合
        const params = { // 入力したEメールアドレスをパラメータオブジェクトに渡す
          email: emailInput.value
        }
        const options = { // POSTメソッドを指定
          method: "POST"
        }
        const query_params = new URLSearchParams(params) // オブジェクト形式のparamsをクエリ文字列に変換

        // users#is_registered?アクション に POSTリクエスト(クリエパラメータでemail情報の送信)
        fetch("/signup/check_email" + "?" + query_params, options)
          .then(response => response.json())
          .then(response => {
            if (response) { // レスポンスにユーザー情報が返ってきた場合（すでにユーザーが存在する場合）
              emailError.textContent = 'すでに登録されているメールアドレスです'
              emailInput.style.border = "2px solid red"
              emailError.style.color = "red"
            }else{ // ユーザーが存在しない場合
              emailInput.style.border = "2px solid lightgreen"
              emailError.textContent = ""
            }
          })
      }
    }, 300) // ← タイマーを設定する(300ms後に処理を実行)
  }

  // パスワードのバリデーション
  passwordValidation() {
　　・・・
  }

  // 送信ボタンの有効化
  validSubmit() {
　　・・・
  }