結論
⇨javascriptやcssなどの構文エラーが原因なので自分が書いたjsファイルの構文を見直す必要がある
エラーの意味
javascript The resource ファイル名 was preloaded using link preload but not used within a few seconds from the window's load event.
⇨プリロードされたリソースがページの load イベントから数秒以内に使用されなかったという意味。 つまりリソース(jsファイルや画像など)が何かの理由で使用できない状態になっている(構文エラーなど)
そもそもpreloaded(プリロード)とは ⇨ウェブページのパフォーマンスを向上させるために使用される技術の一つ。具体的には、ブラウザがページに必要なリソース(例:画像、スクリプト、スタイルシートなど)を事前にダウンロードすることで、ページの読み込み速度を高める目的。
loadイベントとは.
⇨ ウェブページの全てのリソース(HTML、CSS、画像、JavaScriptなど)が正常に読み込まれた時点で発生するJavaScriptのイベント。つまり「ページ読み込み完了」を表す
私の場合のエラーの経緯
jqueryの動作確認をしようとしました。 そこで下記のhtmlファイルのpタグにclass(.edit)をつけてそのpタグがクリックされたら「テスト完了」とコンソールに出力しようとしました。 my_goal.html.slim pタグにclass(.edit)をつける
h1 = "#{@user.name}さんの目標" section h2 = "あなたの#{@monthly_goal.goal_achieved_at.strftime('%Y年%m月%d日')}に達成する目標" p = @monthly_goal.monthly_goal p.edit = link_to '編集'
javascript/packs/my_page.js に.editクラスがついているpタグ(編集というリンク)をクリックするとコンソールに「テスト完了」と表示する
$('.edit').on('click', () => { console.log("テスト完了") });
↓結果エラーが出力されました。
my_page.jsのjqueryに構文ミスがあることに気づきました。
$(document).on('turbolinks:load', function() { $('.edit').on('click', () => { console.log("テスト完了") }); });
このようにすると警告文が出ないようになりました。
この構文ミスは head内でjsファイルを読み込む際にターボリンクが有効になっている場合。( = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload')
jsファイルに↓を記載する必要があるのにしていなかったという構文ミスでした
$(document).on('turbolinks:load', function() { });
application.html.slim
doctype html html head title | SharedGoalApp meta[name="viewport" content="width=device-width,initial-scale=1"] = csrf_meta_tags = csp_meta_tag = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' body = render 'layouts/header' p.notice = notice p.alert = alert = yield