nobu blog

プログラミングやゲームの話など。

*



Ruby on RailsにおけるJavascriptファイルの取り扱い(Rails6)

   

概要

GW中に学んでいたRuby on Railsにおけるフロントエンドのjsの読み込みの扱いに関してのメモ。
Rails6からJS周りの取り扱いが大きく変わったようで、ググって参考にした記事が6でない場合などに混同したので忘備録として。
以前のRailsに関しても知らず、憶測も多いかもしれないのであしからず。

下記を中心に説明。
1. Rails6におけるjsの仕組み
2. アプリケーション全体で使用するjsの定義方法
3. 特定の画面など部分的に使用したいjsの定義方法

説明

概念

Railsでは基本的にwebpackで複数のjsコンパイルして出力する。
webpackはVueなどのSPAフレームワークなどでも多く使われていて、画面やコンポーネント単位で作ったjsなどをまとめて1つのファイルに出力している。
そのおかげで、昔のWEBアプリのようにhtmlでscriptタグで個別にjsの参照を記載しなくても、コンパイルされたjsだけを参照しておけばよくなっている。

Rails6における使用方法

Rails6では下記のjsに参照を書き込む事でコンパイル対象のモジュールを追加できる。
app/javascript/packs/application.js

コンパイルされたjsは、下記のタグヘルパーを記載する事でscriptタグが記載される。

javascript_pack_tag

デフォルトでは共通レイアウト(※)に書かれていて、全てのページにこれが読み込まれるようになっている。
※:app/views/layout/application.html.erb

アプリ用のjsを仕込む方法

アプリでjsを使うには下記の2種類の方法が可能だと考えられる。
方法1:共通レイアウトで参照したjsを利用する
方法2:各画面用にjsを個別にコンパイルして利用する

方法1は全体で使用するような機能、方法2は各画面固有の処理を記載するのに適していると思われる。
(方法2では各画面のボタンなどのUIイベントなど。)

方法1:共通レイアウトで参照したjsを利用する

アプリ用に作成したjsを先ほど説明したapplication.jsに参照を追加する事でコンパイル対象にする。
app/javascript以下の任意のディレクトリもしくは直下にjsを作成する。(packs以下に作らない事。)

app/javascript/user/sample.js

application.jsに作成したjsの参照を追加する。
require(‘jsファイル名’)で追加
(パスはapp/javascriptを起点として記載。)

あとはrails sで起動させば良い。

方法2:各画面用にjsを個別にコンパイルして利用する

アプリで使用したいjsを作成する。(方法1の時と同様のもの)
app/javascript/user/sample.js

その画面用にコンパイルを行うために、新しいコンパイル用の設定をpacksディレクト以下に作成する。

app/javascript/packs/user/application.js

作成したファイルに先ほどと同じように参照を追加する。

使用したい画面(erb)に下記を追記する。

<%= javascript_pack_tag ‘user/application’ %>

共通領域レイアウトではpacks/application.jsでコンパイルされたjsを使用していたが、
このタグを追加する事でpacks/user/application.jsでコンパイルされたjsが参照できるようになり、
画面ごとに個別のjsが参照可能となる。

 - HTML, Javascript, Ruby on Rails