Ajax
今回実装したい機能
Ajaxを用いてブックマークした際、ボタンの切り替えを非同期で行う。
調べたこと
Ajaxとは何か？
Ajaxとは、Asynchronous JavaScript + XML の略で、非同期通信と呼ばれる通信方法のことを指します。
Ajaxを使用すると画面遷移がなく、データの一部だけ更新することができるので、操作性が良くなります。
同期通信、非同期通信の違い
同期通信と非同期通信の違いは、リクエストとレスポンスのタイミングが違うことです。
同期通信
- リクエストからレスポンスの一往復が終わらないと、次のリクエストを出せない。
サーバーから受け取った情報をもとにページ全体を１から表示するので時間がかかる。
非同期通信- レスポンス待ちでもページ全体の処理が止まることなく、別の操作が可能。
非同期通信の本質は、通信のリクエストとレスポンスのタイミングをずらせるので、
他の処理を並行して行えることです。
非同期通信を読み込みなしでページの一部だけ更新できる事と誤解している人が多いですが、これはAjaxの仕組みになります。
Ajaxの実装方法
- フォームヘルパーに
remote trueを設定する。 2.『〇〇.js.erb』ファイルを作成する。 - jsファイルに更新処理を記述する。
1. フォームヘルパーにremote trueを設定する。
今回の例ではlink_toメソッドを例に解説します。
<%= link_to bookmarks_path(board_id: board.id), id: "js-bookmark-button-for-board-#{board.id}", class:"float-right", method: :post, remote: true do %> <%= icon 'far', 'star' %> <% end %>
このようにフォームヘルパーにオプションとしてremote: trueをつけてあげることで、フォームを送信する際にHTML形式ではなく、JS形式で送信できるようになります。
2.『〇〇.js.erb』ファイルを作成する。
『〇〇.js.erb』ファイルでは以下の３つのことが可能になります。
1. ファイルに記述したjavascriptのコードを実行できる。
2. ERBタグを使用することができる。
3. インスタンス変数を使用することだできる。
これらの特徴により、画面遷移なしで一部の読み込みだけするような処理を簡単に記述することができます。
3. jsファイルに更新処理を記述する。
$("#js-bookmark-button-for-board-<%= @board.id %>").replaceWith("<%= j(render('boards/bookmark', board: @board)) %>");
上記のようなコードを書くだけで、画面遷移なしでブックマークの解除が実装できます。
Ajax実装のまとめ
- フォームヘルパーに、
remote: trueを記述するとJS形式に変換してくれる。 - コントローラーの処理が終わると、『〇〇.js.erb』ファイルがレンダリングされる。
- 『〇〇.js.erb』では、javascriptやERBなどが使え、ページの一部だけを更新する処理を記述することができる。
参考にしたサイト
