😺
Rails6でjavascriptのファイルを追加する方法
記事の内容
Rails6でjavascriptのファイルを追加する方法を記載する
対象読者
Rails6でプロジェクトを作成し、javascriptの処理を追加したい人
環境
- Rails 6
- ruby 3.1
Rails6の環境構築
jsの処理の追加方法
jsのファイルを追加する
Rails6の場合、 app/javascript/packs/ 配下に追加可能
$ touch app/javascript/packs/test.js
※test.js というファイルを追加
jsの記述を追加
test.js
document.addEventListener('turbolinks:load', () => {
alert("test")
})
追加したjsをapplication.jsで読み込む
application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
// ここを追加
import "./test"
ブラウザで確認
test というアラートが表示されたらOK
※defaultの Yay! You’re on Rails! という表示が出るページにはjsが読み込まれていないので注意
note
勉強法やキャリア構築法など、エンジニアに役立つ記事をnoteで配信しています。
Discussion