Uncaught ReferenceError:~~is not defined
調べたところ「〜〜の変数や関数が定義されていないから使えmasenn」というエラーのようです。
また今回の$ is not definedは、「jQueryが読み込まれていない段階でjQueryの関数は使えないよ！」と言われていることがわかりました。
しっかり</body>直前でCDNを読み込んでいるのに何故と詰まってしまいました。
# layouts/application.html.erb <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body>
結論
早速ですが結論は、記述していた組み込みコードのjquery-3.3.1.slim.min.jsはjQueryのスリムビルドと呼ばれるバージョンで、非推奨の機能やAjax機能が削除された軽量版だったからでした。
ずっとjQueryが読み込めていない線のみで調べていたので非常に紆余曲折を経たのですが、組み込みコードを取ってきたBootstrapのサイトを再度見た時に、「jQueryはスリム版」という気になる文言に気づきました。
リンク先はjQuery公式ページで全て英語だったので、あまりよくわからなかったのですが、
『BootstrapでAjaxを使うときの注意点』https://www.inet-solutions.jp/technology/jquery-ajax-bootstrap/
を読み、jQuery公式サイトからスリムではない組み込みコードを取ってきたところ、無事動くようになりました。
まとめ
一番最初の、CDN読み込み段階でつまづいていたとは疑いもしていませんでした。 解決策までの紆余曲折の間では、 gemfileからの読み込みを試みたり、レイアウトファイルいじってみたり、webpackの設定が何か間違っているのではないかetc考えたりして、非常に多くの時間を使ってしまいました。 とはいえ大きくわかりやすく書いてあった訳だしと反省しました。 特にこの初心者のうちからちゃんと読んで、わからなければ調べるようにして行けば、何かが起こった時にスムーズに検証を進められるのではないかと思いました。
