Rails6でJavaScriptを使う方法

はじめに

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タグとして出力されるということが分かりました。

参考文献