【Rails】JavaScriptの新規作成方法

記事概要

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

言語やフレームワーク

	使用技術
フロントエンド	HTML JavaScript
バックエンド	Ruby 3.2.0 Ruby on Rails 7.1.5.1
データベース	MySQL
インフラ	-
API	-
その他	-

前提

• アプリは別途作成済みである

サンプルアプリ(GitHub)

手順

1. JavaScriptのコードを記述するjsファイルを手動作成する
   app/javascript/[ファイル名].js
2. 1.で作成したファイルにコードを記述する
   app/javascript/[ファイル名].js

   function test (){
     console.log("jsファイルの読み込み完了")
   };
   
   window.addEventListener('turbo:load', test);
   window.addEventListener("turbo:render", test);
   

3. ファイルをインポート可能に設定する
   config/importmap.rb

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

4. 読み込んだファイルをアプリケーションで動作させられるように、設定を追加する
   app/javascript/application.js

   // 最終行に追記
   import "[上記で記述したインポート名]"
   
   // 例
   import "test"
   

5. ターミナルでrails sコマンドを実行し、サーバーを起動する
6. http://localhost:3000/にアクセスする
7. コンソール画面を確認し、jsファイルの読み込み完了と表示されていることを確認する
   

備考

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