【概要】

1.結論

2.どのように使うか

3.なぜjsファイルに書き込まなかったのか

4.ここから学んだこと

1.結論

直にhtml.erbファイルで"script"を記述しscript内にjavascript言語を記載する！

2.どのように使うか

任意のhtml.erb内で

****.html.erb

<script>
.
.
.

</script>

と記載してJavascriptを記載するだけです！
注意点としてapplication.html.erbで
<%=yiled%>を使用してヘッダーフッダーを適用している場合は反映させる順番に注意です。
HTMLが読み込まれるよりも前にJavascriptを適用させてしまうとブラウザの検証ツールのconsoleでエラーがでます。

3.なぜjsファイルに書き込まなかったのか ---------------------------------------- 結論からいうと、jsファイルを読み込んでくれなかったり、リロードを一回挟まないと読み込んでくれませんでした。内容としてはパスワード表示非表示を行っていましたが、検索するとたくさん出てくるのでここでは割愛します。

Rails6.0
Vscode
を使用しています。

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./security")　#➡︎該当のファイル

と記載し、secrurity.jsにjavascript言語を記載し、

app/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%=　javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

と記載してあるのでjsファイルが適用されるはずと思いきや全く反映されませんでした。

また、jsファイルにてパスワードの表示非表示をプログラムしていましたが反応がないのでいろいろ参考にしました。下記のプログラムを最初に記載しました。

app/javascript/packs/security.js

document.addEventListener("DOMContentLoaded", function(){}

パスワードの表示非表示はできましたが、一度リロードを押さないと反映がされませんでした。なのでjsファイル問題は解決していませんが、とりあえずやりたいことはできたのでよしとします。（可読性はよろしくないですが）

4.ここから学んだこと ---------------------------------------- このエラーの中でhtml/css/javascript/の読み込む順番やDOMがどの段階で形成されていくのかが大変勉強になりました。tutbolinksやdocumentloadedについてはまだまだ勉強が足りていないですが、流れだけでも把握できたのはかなり大きいです。scriptにしたとたんすぐに解決したのも、書く順番を把握していたおかげでした。

参考にしたURL
"DOMContentLoaded周りの処理を詳しく調べてみました"
"【JS】addEventListenerが機能しない理由についてご教示ください"
"DOMContentLoadedイベントとloadイベントの違い[タイミング]"