[Ruby on Rails]Ajaxを実現しているデフォルトのJavaScript機能

初めに

今回はRuby on Railsで元々組み込まれているもので、Ajax通信を実現しているJavaScriptの機能について掘り下げる

前提

Ajax

「Asynchronous JAvaScript + XML」の略。JavaScriptとXMLを用いてサーバー側との通信を「非同期」で行い、通信結果によって動的にページの一部だけ書き換える手法のこと

非同期通信

コンピュータ間で、送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式

非同期通信であれば、送信者は受信を待たずして続けてリクエストを送ることもできる。他の処理を並行して行えるのが強み

rails new した時のpackage.json

以下のような構成となっている。

今回はAjaxを実現しているrails/ujs、turolinksについて掘り下げていく。

 ...
 "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "turbolinks": "^5.2.0"
  },

本題

1.rails-ujs

画面の制御を補助するライブラリ。役割は以下の二つ

1. link_toなどのヘルパーメソッドに、data属性を付与することで確認ダイアログや二重送信防止の機能を実装できる

Ex. form_withに、確認ダイアログ機能を実装する

  <div class="actions">
    <%= form.submit data: { confirm: 'ユーザー作成してもよろしいですか？'} %>
  </div>

dataをキーとして、オブジェクト形式で渡してあげることで、JavaScriptを書かなくても簡単に実装できる。

2. Ajaxを手軽に実装できる

form_withは、デフォルトでAjaxができるようになっている。local: trueをつけると通常の同期通信となる。

2.Turbolinks

Ajax通信で受け取ったレスポンスの情報を、bodyタグ内を入れ替え表示させる。高速でページ遷移を実現するライブラリ。

独自の発火イベント

bodyタグ内を入れ替えて表示する挙動により、一般的にページが読み込まれたときのDOMContentLoadedやonloadなどのイベントが使用できない。Turbolinks上では、独自のturbolinks:loadを活用する。
applicaiton.js

...
document.addEventListener("turbolinks:load", () => {
  console.log("読み込みました")
})

この他にもクリックされた時に発火されるturbolinks:clickや、キャッシュされたバージョンへのアクセス時、新しいバーションアクセス時と2回発火するturbolinks:renderなどの独自の発火イベントがある。

キャッシュの活用

ブラウザの「戻る」「進む」でページ遷移をすると、Restoration Visitsという仕組みにより、キャッシュがあればリクエストを行わずに参照し、なければ新しいページを読み込む挙動となっている。これにより、知覚的なパフォーマンスを向上させる狙いがある