😺

Rails6でjavascriptのファイルを追加する方法

2022/02/09に公開約1,100字

記事の内容

Rails6でjavascriptのファイルを追加する方法を記載する

対象読者

Rails6でプロジェクトを作成し、javascriptの処理を追加したい人

環境

  • Rails 6
  • ruby 3.1

Rails6の環境構築

https://zenn.dev/ring_belle/articles/e6412a7b6557d5

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が読み込まれていないので注意

Discussion

ログインするとコメントできます