Rails + jQueryでAjaxの動作テストをしてみる

# はじめに
Rails + jQueryでAjaxの動作テストをしてみました。
フォームのテキスト項目に入力したユーザー名をキーに、usersテーブルを検索して、検索結果をフォームに表示する動作を、Ajaxで実現してみました。
尚、当記事は、こちらのサイトを参考にさせて頂いております。

参考URL 
https://qiita.com/yuki-n/items/fdc5f7d5ac2f128221d1 

# 環境
- Vagrant + Ubuntu 16.04.5 LTS
- Rails 5.2.4.2
- jQuery

# やった事
scaffoldで雛形を作成します。
jQueryが動くように動作環境を整備します（手順は省略）。

```command
$rails new scaffold_sample
$cd scaffold_sample
$rails g scaffold user name:string age:integer
$rails db:migrate
```

indexビューにテキスト項目と、検索結果を表示する項目を作成します。

```index.html.erb 
<input type=form id="form" placeholder="ユーザー名を入力" style="width: 250px;"/>
<p id="result1"></p>
```

coffeeスクリプトは利用しないで、jQueryを利用するため、javascrpts/user.coffeeの拡張子を、jsに変更します。そして、ビューのイベントに対応する処理と、イベントが駆動された時にAjax通信を行う設定を記述します。

```javascrpts/user.js 
$(document).on('turbolinks:load', function(){
    // blurは、テキスト項目からロストフォーカスした時に発生するイベント
    $(document).on('blur', '#form', function(e){
    e.preventDefault();
    
    //テキストで入力した値を変数にセット
    var input = $.trim($(this).val());  
    
    //ajax通信の設定
    $.ajax({
      url: '/users/search',             //searchメソッドへ遷移
      type: 'GET',                      //メソッドを指定
      data: ('keyword=' + input),       //テキスト項目に入力した値を変数にセット
      processData: false,               //おまじない
      contentType: false,               //おまじない
      dataType: 'json'                  //データ形式を指定
    })
    .done(function(data){               
       })
  });
});
```

userコントローラの中に、searchメソッドを作成するので、searchメソッドへのルートを設定します。

```routes.rb
 resources :users do
    collection do
      get 'search'
    end
  end
```

usersコントローラの中に、searchメソッドを作成します。Viewのテキスト項目に入力した値が、jsファイルの中で、keyword変数にセットされて、コントローラに渡されてきます。コントローラの中では、keyword変数をキーに、Userテーブルを検索して、検索結果を、@user変数にセットしています。そして、json形式でrenderします。render先は、searchというビューあるのではなく、ajaxを利用する場合、遷移元（indexビュー）に遷移される事になります。

```users_controller.rb 
def search
    @user = User.find_by(name: params[:keyword])
    render json: @user
  end
```

jsファイルに、ajax通信が成功した後の処理（.doneの中身）を記述します。

```javascrpts/user.js 
$(document).on('turbolinks:load', function(){
    // blurは、テキスト項目からロストフォーカスした時に発生するイベント
    $(document).on('blur', '#form', function(e){
    e.preventDefault();
    
    //テキストで入力した値を変数にセット
    var input = $.trim($(this).val());  
    
    //ajax通信の設定
    $.ajax({
      url: '/users/search',             //searchメソッドへ遷移
      type: 'GET',                      //メソッドを指定
      data: ('keyword=' + input),       //テキスト項目に入力した値を変数にセット
      processData: false,               //おまじない
      contentType: false,               //おまじない
      dataType: 'json'                  //データ形式を指定
    })
    //ajax通信が成功したらdoneに入る （dataには@usersが入る)
    .done(function(data){               
        // data変数の中身を、viewの#result1に表示する
        $(data).each(function(i, user){ 
            $('#result1').text(user.id + " " + user.name)
        });
      })
  });
});
```

# 動作確認

rails sで、http://192.168.33.10:3000/users にアクセスします。
適当にデータを新規更新します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94029/d38906d3-1f2e-7b63-3782-73219704e66e.png)

hemeと入力して、ロストフォーカスすると、#result1に検索結果が表示されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94029/a8b7154e-529a-73b1-1b4e-9db930416b24.png)

aopoと入力して、ロストフォーカスすると、#result1に検索結果が表示されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94029/2ba45afa-c39f-5c77-5961-b5621466d615.png)