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 1 year has passed since last update.

RailsプロジェクトでJavaScriptが動作しない問題とその解決方法

Posted at

はじめに

今回の記事では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種類がある。
  1. Turbo Drive

    • 通常のページ遷移と異なり、ページ全体の再読み込みを避け、代わりに<body>タグ内のコンテンツのみを置き換える。これにより、ページ遷移が高速になる。
  2. Turbo Frames

    • <turbo-frame>タグを使用して、ページの特定の部分だけを更新することができる。JavaScriptを記述せず、ページの特定の部分だけを更新することが可能。
  3. Turbo Streams

    • ページの複数の部分を同時に動的に更新することができる。
  4. Turbo Native

    • iOSやAndroidのネイティブアプリケーションにおいて利用される。
  • 現在作成しているWebアプリにおいてTurboを利用できそうな部分が多いため、学習しながら実装していきたい。
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?