2021年9月16日現場Rails Chapter8-2-2 AjaxでRailsサーバーと通信する

前回はクライアント側でイベントハンドラとして用意してあったJavaScriptコードを実行してタスクを非表示にしていましたが、今回はAjax通信をした後にAjaxのリクエストボディにJavaScriptコードを返却してそれをブラウザ側で実行するという方法で削除機能の実装を行います。

Viewファイル

# app/views/tasks/index.html.slim
table.table.table-hover
  thead.thead-default
(略)
  tbody
    - @tasks.each do |task|
      tr id= "task-#{task.id}" # tr要素にタスクのid情報を与える
        td= link_to task.name, task

前回での方法との違う点で、サーバ側は、DOM要素としてどの削除ボタンがクリックされたことによってAjax通信が発生したのかが判別出来ないため、あらかじめDOM要素側にタスクのid情報を与えておく必要があります。　

Controllerファイル

# app/controllers/tasks_controller.rb
def destroy
  @task.destroy
end

JavaScriptファイル

# app/views/tasks/destroy.js.erb
document.querySelector("#task-<%= @task.id %>").style.display = 'none';

var message = document.createElement('p');
message.innerText = 'タスク「<%= @task.name %>」を削除しました。残りのタスクは<%= Task.count %>件です。';
document.querySelector('table').insertAdjacentElement('beforebegin', message);

一行目のdestroyアクションに対応するコードに加えて、削除と同時に「残りのタスクは〇〇件です」といったメッセージを表示する記述を行っています。

Railsでは上記のようにサーバーサイドで生成したJavaScriptからなるレスポンス（またはこのレスポンスからなる画面更新までのプロセス）のことをServer-generated JavaScript Responses(SJR)といいます。

手軽にテンプレートやヘルパー、モデルなどのサーバーサイドの資産を簡単に使えるメリットがあることに対して、複雑なJavaScriptでSJRを行ってしまうと一つの画面に関するコードがあちこちに散らばってしまって共通化など管理がしづらい点があります。

rails-ujsとは？

remote: trueオプションを加えるとAjax通信が送信されますが、それは、rails-ujsというActionView添付のjavaScriptライブラリによって処理されています。また、rails-ujsによって、Ajaxリクエストを送信時に、関連するイベントを発行する役割も持ちます。

Gitについても少し復習しました

[画像引用]

masterブランチ…ローカルの中心となる統合ブランチで、他のローカルの作業ブランチと繋がったもの。
origin/masterブランチ…ローカルにある、リモートのmasterブランチを追跡するリモート追跡ブランチ。

①masterブランチから作業ブランチを切ります。その作業ブランチにて、実際の作業などを行うコードを書いていきます。

②fooブランチで変更した内容をリモートリポジトリに反映するまでの流れは、 fooリポジトリをadd→commitで、ファイルの追加・変更をローカルリポジトリに反映します。最後にpushをすることで、リモートリポジトリに反映できます。ただし、ここで反映されるのは画像のリモートリポジトリfooの部分であり、masterではないところに注意が必要です。

③リモートリポジトリのmasterに反映させるには、プルリクを出して、確認後マージボタンを最終的に押すことで、masterリモートリポジトリに反映されます。マージボタンを押した後に、fooリモートリポジトリを削除するのをオススメします。

④リモートリポジトリのmasterからローカルのmasterブランチにpull(git fetch + git merge)すると、リモートリポジトリに反映した内容をブランチにも反映させることができます。 pullすると、origin/masterブランチ(追跡ブランチ)を超えて、直接masterブランチに反映することが出来ます。

※Gitを操作する時はgit branchコマンドで自分がどこにいるのかを確認するのが大切です。