記事概要

RailsでJavaScriptを新規作成する方法について説明する。

言語やフレームワーク

1.で作成したファイルにコードを記述する

app/javascript/[ファイル名].js

function test (){
  console.log("jsファイルの読み込み完了")
};

window.addEventListener('turbo:load', test);
window.addEventListener("turbo:render", test);

ファイルをインポート可能に設定する

config/importmap.rb

# 最終行に追記
pin "[インポート名]", to: "[ファイル名].js"

# 例
pin "test", to: "test.js"

window.addEventListener('turbo:load', test);
- ページ読み込みをトリガーにして、loadイベントでイベント発火する
- イベント発火により、test処理が起動される
window.addEventListener("turbo:render", test);
- ページのレンダリングをトリガーにして、loadイベントでイベント発火する
- イベント発火により、test処理が起動される