RailsのJavascriptの記載場所

導入

viewファイルにJSを以下のように記載することはあまりコードとしてよろしくないので、適切な箇所に記載するようにします。

form.html.erb

|
|
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const todayButton = document.getElementById("today-button");
    const visitDayField = document.getElementById("content_visit_day");

    todayButton.addEventListener("click", () => {
      const today = new Date().toISOString().split("T")[0];
      visitDayField.value = today;
    });
  });
</script>

手順

JSのファイルを作成したのは、app/javascriptフォルダ内にしました。
このファイルに記述した内容は、どのViewでも使うことができます。

app/javascrip/script.js

document.addEventListener("DOMContentLoaded", () => {
  const todayButton = document.getElementById("today-button");
  const visitDayField = document.getElementById("content_visit_day");

  todayButton.addEventListener("click", (event) => {
    event.preventDefault();
    const today = new Date().toISOString().split("T")[0];
    visitDayField.value = today;
  });
});

※ここの記述は、フォームに「本日ボタン」を作るためのものです。

次にapp/javascript/packs/application.jsに上記で作成したファイルをimportしました。

app/javascrip/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

import "script.js"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

以上で、viewファイルにJSが動作すると思います。