RailsのAjaxの苦手意識を消したい

#初めに
RailsのAjaxやら非同期やらが難しそうでなかなか手が出せずにいたけどそろそろ勉強してみる

#とりあえず投稿文字の反映をさせる

rails g controller words index 

でとりあえずコントローラーをつくる

indexに

index.html.erb

<h1 id="word"></h1>
<%= form_with url: '/words/post' do |f| %>
    <%= f.text_field :word %>
    <%= f.submit %>
<% end %>

と書く。

form_withはデフォルトで非同期通信を行ってくれるらしいのでこのままで大丈夫。

urlをアクション名で指定したかったがうまくできなかったので/words/postを書いている。

そのあとwords_controller.rbに

words_controller.rb

class WordsController < ApplicationController
  
  def index
  end

  def post
    @word = params[:word]
  end 
  
end

と書く

postにparams[:word]が送られてそれを@wordに入れている。

この時にviewsに書いてあるpost.js.erbが実行されるらしい。

ということで@wordを表示するためのコードをpost.js.erbに書く

post.js.erb

$('#word').html("<%= @word %>");

よくわからないがidがwordとなっているものの中身を<%= @word %>にするというコード

これで実行すると入力した文字が画面に表示されることになる。

#検索結果の表示

つぎにAjaxでの検索結果の表示を実装したいと思う。

とりあえず

rails g model user name:string age:integer
rails g controller users 

をしてモデルとコントローラーを作る。

検索するためにデモのデータが必要になるから

Gemfileに

gem 'faker'

してbundle install

そのあと

db/seedに

db/seeds.rb

100.times do 
    user = User.new(name: Faker::Name.first_name, age: rand(100))
    user.save 
    if user.save
        puts "#{user.name}を作成"
    end 
end 

とすると100件のサンプルデータが作成できる。

コントローラーに検索結果を表示するためのindexを検索する際のアクションsearchを設定する

users_controller.rb

class UsersController < ApplicationController

    def index 
    end 

    def search
        @user = User.where 'name like ?', '%' + params[:name] + '%'
        @user = @user.to_json.html_safe
    end 
    
end

searchは@user に検索結果を入れてそのあとjsonの型式にしている。
なんでこれが必要かはよくわからないけど必要なよう。
html_safeはHTML形式のコードをそのまま出力するために必要。

さっきと同じように非同期でsearchアクションを行うとsearch.js.erbが実行されるので検索結果を表示するコードをsearch.js.erbに書きます。

search.js.erb

var user = <%= @user %>
var result = ''
user.forEach(function(e){
    result += '<li>' + e.name + ':  ' + e.age + '</li>'
});
$('#result').html(result);

user に　@user　を入れてそれをforEachで繰り返し処理しています。
resultに

taro 18みたいな感じで値を入れていきます。

index.html.erbは

index.html.erb

<%= form_with url: '/users/search' do |f| %>
    <%= f.text_field :name %>
    <%= f.submit %>
<% end %>

<table id="result"></table>

こんな感じです。

検索結果がvar resultに入れられて$('#result').html(result)でidがresultのところに検索結果が入っているresultを入れるという感じ。

#最後に

まだほんとに基本中の基本しかわからないのでこれから知識を増やしていきたい。
何か間違っているところがあればご指摘いただければと思います。