スポンサーリンク
概要
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
1 |
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> |
アプリ用の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
1 2 3 |
window.onload = function () { alert("hoge"); }; |
application.jsに作成したjsの参照を追加する。
require('jsファイル名')で追加
(パスはapp/javascriptを起点として記載。)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") // 追加 require ('user/sample') // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) |
あとはrails sで起動させば良い。
方法2:各画面用にjsを個別にコンパイルして利用する
アプリで使用したいjsを作成する。(方法1の時と同様のもの)
app/javascript/user/sample.js
その画面用にコンパイルを行うために、新しいコンパイル用の設定をpacksディレクト以下に作成する。
app/javascript/packs/user/application.js
作成したファイルに先ほどと同じように参照を追加する。
1 2 |
// 追加 require ('user/sample') |
使用したい画面(erb)に下記を追記する。
<%= javascript_pack_tag 'user/application' %>
共通領域レイアウトではpacks/application.jsでコンパイルされたjsを使用していたが、
このタグを追加する事でpacks/user/application.jsでコンパイルされたjsが参照できるようになり、
画面ごとに個別のjsが参照可能となる。
スポンサーリンク
まとめ
RailsにおけるJavaScirptに関する取り扱いの説明を行った。
独自の仕組み等が多く入っていてややこしいので、慣れが必要である。
下記で技術書半額セールの内容を紹介していますので、興味がある方は参照してみてください。