はじめに

今回の記事ではRailsプロジェクトにおいて、JavaScriptが動作しないというエラーが起きた原因と解決方法について書く。

実際に起こっている現象

ヘッダーのリンクをクリックしたときにログインしていなければトップページへ遷移するように設定している。遷移後のページではslickによってGIFがスライダー表示される。slickはスライダーを作成するためのJQueryのプラグイン。
slickは下記のようにapplication.jsで設定している。

import "@hotwired/turbo-rails"
import $ from "jquery";
window.$ = $;
window.jQuery = $;
import "slick-carousel";

$(document).ready(function(){
  $('.slider-3').slick({
    // Slickのオプション設定
  });
});

リンクからトップページにアクセスした時に、slickがうまく作動せずスライだーを表示させることができなかった。しかし、root_pathへのURLを直接入力したり、ページをリロードするとslickが適用されるという現象が起きた。

解決方法

Railsプロジェクトで利用しているTurboというJavaScriptのライブラリによってslickの初期化が行われていなかったことが原因だった。
TurboはRails7ではデフォルトで有効化されており、ページの遷移を高速化するために、ページ全体の再読み込みを行わずにページの一部を変更できるよう。これによってページの読み込み時に一度だけ実行されるはずのSlickの初期化コードが実行されていなかったことが、問題の原因だった。
そこで、Turboのturbo:loadイベントを監視し、このイベントが発火したときにSlickなどのJavaScriptプラグインの初期化を行うことでこの問題を解決することができた。

先ほどのapplication.jsを以下のように修正した。

import "@hotwired/turbo-rails"
import $ from "jquery";
window.$ = $;
window.jQuery = $;
import "slick-carousel";

document.addEventListener("turbo:load", function() {
  $('.slider-3').slick({
    // 処理内容
  });
});

これにより、"turbo:load"というイベントを監視し、Turboが新しいページのコンテンツを読み込んで表示が完了した時点でイベントが発火し、slickによってスライダーが作成される。

まとめ

Rails7においてターボリンクはデフォルトで有効化されている。フォーム・リンクからのリクエストは全てFetch APIを利用した非同期リクエストになり、HTMLが直接レスポンスされる。その際にページの読み込みはせずbody要素の内容だけが差し替えられる。JavaScriptのコードなしでSPAのような感覚でWebアプリを操作できる。Turboは以下の4種類がある。

Turbo Drive
- 通常のページ遷移と異なり、ページ全体の再読み込みを避け、代わりに<body>タグ内のコンテンツのみを置き換える。これにより、ページ遷移が高速になる。
Turbo Frames
- <turbo-frame>タグを使用して、ページの特定の部分だけを更新することができる。JavaScriptを記述せず、ページの特定の部分だけを更新することが可能。
Turbo Streams
- ページの複数の部分を同時に動的に更新することができる。
Turbo Native
- iOSやAndroidのネイティブアプリケーションにおいて利用される。

現在作成しているWebアプリにおいてTurboを利用できそうな部分が多いため、学習しながら実装していきたい。