0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Ruby on Railsにおけるajax処理について

Posted at

アプリケーションで取り扱いデータの処理内容が多くなってきたり、大容量データをデータベースとやり取りする時にAjaxを使用してデータ通信をすることでパフォーマンスの改善につながります。
ajaxを使用しないと更新の際データ通信時間が長すぎて503エラーが出たりするのに対して、ajax処理を導入することでエラーを回避したりできるメリットなどもあるようです。

#環境情報
まず環境によってコードの書き方などが変わって来るらしいので私のrails環境を記入しときます。
ruby2.6.5
rails 6.0.4

#基本的なajaxの使い方
railsに限らずajaxの一般的な使い方はこちらのような内容になります。
一般的なアプリケーションだとボタンなどをクリックするアクションをしてから読み込み処理をしてそれからサーバー再度でどのような返答をすればいいかの処理を決めてという風なやり取りをスレうするのに対してajaxだとユーザーからのアクションをしなくてもJavaScript側から取得できるすべてのイベントからリアルタイムにイベントを発火させることができる。非同期通信でページ遷移なしで
スムーズにフロントエンド側に結果を反映できるのが特徴です。
データをすべて読み込んでから結果を返すやり方だとユーザー側もその間待たなくちゃいけないので、リアルタイムでやり取り出来て必要最低限のアプリケーションを動かすことになるのでユーザビリティーやアクセシビリティーの向上にもつながると思います。

#Railsでのajax処理の書き方
RubyOnRailsではView側のヘルパーメソッドに(form_tag)などで:remote=>trueを指定してあげることでajax導入を導入することができます、特にGemを使用するなどのことはなく非常に簡単に導入できます。

inbdex.html.erb
<%= form_tag({:controller => '<コントローラ名>', :action => 'index'}, :remote => true, :class => 'hoge') do -%>
<%= hidden_field_tag :sample_name1, 'sample_name1' -%>
<%= submit_tag('Start sample', :class => 'btn btn-primary btn-sm') -%>
<% end %>

Controller側でその アクションに対応する処理を行い、render でレスポンスを指定します。

デフォルトではレスポンスとしてフロントエンド側にJavaScriptの処理が戻ってきます。そのレスポンス用JavaScriptは View ファイルにJavaScriptテンプレートを記述して用意します。

とりあえずこれまでです、説明できるようになったら追記します

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?