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 3 years have passed since last update.

外部のHTML,CSS,JavaScriptをRailsで表示させる(Turbolinksが原因っぽい)

Last updated at Posted at 2021-06-08

自作のWebアプリケーションを作成するときに、あらかじめHTMLテンプレートでテンプレートを作成した後に、それをRailsのアプリケーションに反映させよう、と言う考えのもと、作成しました。

結論めっちゃ失敗した

簡単に失敗したところ記載します。

単純にassets/stylesheet/に配置

CSSは読み込んでくれました。
ただ中身に注意。
特にimage-urlなどrubyのcssと通常のcssで記法が異なる点があります。
ここまではまだ良かったです。

ネックはJavaScript

もうこれは思い出したくないくらいエラーが出ました。
その度に解決方法を模索して、結果として下記を実行したら、解消されました。

①jQueryの導入
これは割と初期でやりました。

②複数のjsファイルを全部application.jsに転記
これは全然ダメでした。

③application.jsの初期で記述されているrequireをコメントアウトして、importで追加のjsファイルを読み込む
これが効果抜群でほぼ解決しました。

追記:Turbolinksが悪さをしていたっぽい

特にエラーが出ていた時はjQueryが読み込まれていないことが原因でした。
Uncaught TypeError: webpack_require(...) is not a functionが出ていました。
該当の行を確認すると、確かにjQueryが読み込まれていないことが原因。

で、調べてみるとTurbolinksが悪さをしている可能性が。
【Rails】初心者向け!画面遷移の高速化を行うTurbolinksについて図を用いて詳しく解説

Turbolinksは簡単に言うとページの表示を高速化させるためのライブラリです。
いわゆる非同期処理というものです。

しかし一方で、readyやwidowのイベントが発火しない、といったトラブルが発生しているようです。

今回はこれがほぼ可能性が高い。

なぜならapplication.jsに

window.jQuery = window.$ = require("./jquery.min")

というwindowのイベントを定義していたにもかかわらず、イベントが発火していなかったから。

特にRails4以降は標準で入っているライブラリなので、jsが読み込まない、ということであれば、デフォルトで入っているライブラリを一つずつコメントアウトしてみると良いかもしれません。
(もちろんページの表示速度は遅くなるだろうが。)

言ってもまだ全部解決してない

まだ解決してないし、なぜ初期で記述されているrequireがダメだったのかは考察が必要ですが、一旦、やりたいことできたので、ほんとにホッとしてます。

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?