【Rails】JavaScriptについて

記事概要

Ruby on RailsのJavaScriptについて、まとめる

前提

• Ruby on Railsでアプリケーションを作成している

JavaScriptとは

仕組み

ImportMap

JavaScriptのファイルを読み込む仕組み

手順(ファイル作成)

1. app/javascriptフォルダに、[ファイル名].jsを手動作成する
2. config/importmap.rbを編集し、ファイルをインポート可能にする
   config/importmap.rb

   # 最終行に追記
   pin "[インポート名]", to: "[ファイル名].js"
   
   # memo.jsファイルをmemoとしてインポート可能にする
   pin "memo", to: "memo.js"
   

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

   # 最終行に追記
   import "[2.で指定したインポート名]"
   
   # 上記で指定したインポート名で、インポートを行う
   import "memo"
   

4. 1.で作成したファイルが正常に読み込まれているかを確認する

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

手順(ファイルの読み込み)

ファイルが保存されている場合でも、アプリにJavaScriptが読み込まれない場合がある
下記を実行すると正常に処理される可能性がある

1. ターミナル.appで下記を実行

   # アプリのディレクトリにいることを確認
   % pwd
   /~/[アプリ名]
   
   % rails assets:precompile
   % bin/importmap
   
   # 念の為サーバーも再起動し、ブラウザ画面で挙動を確認
   % rails s
   
   # 画面をリフレッシュした後、動作確認を行う
   

Ruby on Railsまとめ