はじめに
Rails6のアップデートで、JavaScriptを設置する場所や設定方法がRails5以前とは変わったので、Rails6でJavaScriptを使う方法について書きます。
この記事に書いてあること
- Rails6でJavaScriptを使うには、具体的にどのようなコードを書けば良いのか
この記事に書いていないこと
- Webpackerとは
- アセットパイプラインとは
- Ajaxとは
Rails6でJavaScriptを使う方法
Viewの設定
例として、app/views/home/index.html.erbを作成して以下のように記述します。
index.html.erb
<h1 id="hello">Hello World</h1>
<%= javascript_pack_tag 'home/index' %>
javascript_pack_tag 'home/index'の意味は、「app/javascript/packs/home/index.jsを読み込んでね〜」という意味です。
JSファイルの設定
JSファイル（app/javascript/packs/home/index.js）を作成します。
index.js
document.addEventListener('DOMContentLoaded', () => {
console.log(document.getElementById('hello'));
});
言うまでもありませんが、例のJSの処理は、たんにid="hello"の要素をconsoleに表示するというものです。
※ルーティングとコントローラはここに書いていませんがもちろん必要なので、各自で設定してください
結果
デベロッパーツールでConsoleを見てみると、id="hello"の要素を取得できていることが分かります。（つまり、JSが動いています）
ちなみにHTMLを見てみると、以下のとおりです。
javascript_pack_tagはscriptタグとして出力されるということが分かりました。