はじめに

Ajaxについて勉強したメモになります
また、Rails及びAjax初学者のため、間違っている可能性もありますので
参考にされる際はご注意ください

環境

Rails 6.1.4
ruby 2.7.3

Ajaxとは

Asynchronous Javascript XMLの略
JavascriptとXMLを使用して、非同期通信を行うこと

非同期通信とは

ページを更新することなく、一部の変更箇所を反映する
反映するまで他の処理ができる

同期通信とは

ページ全体を更新し、一部の変更箇所を反映する
反映するまで他の処理ができない

RailsでAjax処理を実装

コントローラ、ビュー作成

ターミナル

% bundle exec rails g controller Practice index

jqueryインストール

ターミナル

% yarn add jquery

jquery設定

app/config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// ↓追加
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
// ↑追加

module.exports = environment

routes修正

config/routes.rb

Rails.application.routes.draw do
  get 'practice/index', to: 'practice#index'
  post 'practice/index', to: 'practice#index'
end

コントローラ修正

app/controllers/practice_controller.rb

<h1>Ajax</h1>
<%= form_with local: false do |form| %> 
  <%= form.text_field :title %>  
  <%= form.submit "文字列変更" %>  
<% end %>

HTML修正

app/views/practice/index.html.erb

<h1>Ajax</h1>
<%= form_with local: false do |form| %> 
  <%= form.text_field :title %>  
  <%= form.submit "文字列変更" %>  
<% end %>

JS修正

app/views/practice/index.js.erb

$('h1').html("<%= @title %>")

参考にさせていただいたサイト

https://mebee.info/2021/01/31/post-28411/
https://www.sejuku.net/blog/28967
https://qiita.com/jonakp/items/39fecc0f31335328b34e
https://qiita.com/naberina/items/c6b5c8d7756cb882fb20
https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9

【Rails6】Ajax学習メモ