RailsとVue.jsでメールアドレスが登録済みか判定する方法

こんばんは
アロハな男、やすのりです！

今日は会員制のWebアプリ等でよく見かける『このメールアドレスは登録済みです。』みたいな表示をRailsとVue.jsを使って実装しちゃいましょう！
やり方さえわかれば、Vue.jsじゃなくてもAjaxを使えばできると思います！
※今回はRailsをAPIモードで使用しています。
※全てのコードを記述すると長くなるので、多少変更し必要最低限だけ記載します。

結論

Railsのコードが、

routes.rb

  namespace :api do
    scope :v1 do
      post '/auth/check_email', to: 'users#is_registerd?'
    end
  end

users_controller.rb

  def is_registerd?
    @user = User.is_exists?(params[:email])
    render json: @user
  end

こうで、Vue.jsのコードが、

user.js

  isRegisterd({}, email) {
    return axios.post('/api/v1/auth/check_email', {
      email: email,
    })
    .then(response => {
      if (response.data) {
        this.errorMessage = 'すでに登録されているメールアドレスです';
      };
    });
  }

と、なります！

それでは、順番に見ていきましょう！

Railsのコード

さて、それではまずはRailsのコードから見ていきましょう。

routes.rb

  namespace :api do
    scope :v1 do
      get '/auth/check_email', to: 'users#is_registerd?'
    end
  end

最初にルーティングですが、Railsが最初からサポートしてくれるresourcesでは作成されない、メールアドレスが登録済みか確認するためだけの新しいアクションが必要になるため、直接HTTPメソッドや希望のパスやアクションを定義したいコントローラーを記述しちゃいましょう！
※apiやv1はAPIモードでは通例のようなものになっているので今回は説明を省きます！

そうすると出来上がるのが以下のようなルーティングです。

さぁ、これでアクションへの道筋は出来上がりました。
では次に実際にメールアドレスを確認するアクションを定義しちゃいましょう。

users_controller.rb

  def is_registerd?
    @user = User.is_exists?(params[:email])
    render json: @user
  end

それがこちら！

ここではリクエストで送られてきたパラメーターの中から:emailを抜き出しUserモデル内にメールアドレスが存在しているかどうかを確認します。

その後、メールアドレスが既にUserモデル内にあればtrueを、無ければfalseを返します。

そして、その真偽値をjson形式でフロント側へレスポンスとして返して終了です！

Vue.jsのコード

それでは次はVue.jsのコードを見ていきましょう。

user.js

  isRegisterd({}, email) {
    return axios.post('/api/v1/auth/check_email', {
      email: email,
    })
    .then(response => {
      if (response.data) {
        this.errorMessage = 'すでに登録されているメールアドレスです';
      };
    });
  }

Vue.jsのコードもそこまで難しくありませんね。

isRegisterd関数の第2引数にメールアドレスの情報を渡すことで関数内で使用することができます。
そして関数内でAjax処理をしてくれるAxiosを使用し、第１引数に先ほどRailsで定義したアクションへのパスを記述し、第２引数にemailというパラメーター名にメールアドレスの情報を格納してリクエストを送るように記述します。

そして最後に、レスポンスとして返却された値がtrueつまり、すでに登録されているメールアドレスならすでに登録されているメールアドレスですという文をエラーメッセージに格納させます。

あとはそれをVue.js側で表示させてやれば、

冒頭のような表示を実装することができるようになります！

まとめ

いかがでしたか？
意外とコード自体は単純で簡単かと思います！
この記事についてのアドバイスや修正点等、コメントどしどし歓迎しています！！