#author("2021-04-07T08:46:14+00:00","default:src128","src128") &tag(Rails6/jQuery); *目次 [#lc695b48] #contents *関連ページ [#b403a336] *参考情報 [#cf7fc130] -[[【Rails6】jQueryがなかなか使い始められない人へ - Qiita:https://qiita.com/iiyama_makoto/items/940b130fd20540fd70f1]] *組み込み手順 [#s0205b8f] -以下のコマンドを実行。 yarn add jquery -webpackの設定ファイルを編集。jqueryのパスは相対パス指定が必要("jquery"のみだと動かない)。 #pre{{ const { environment } = require('@rails/webpacker') //ここから const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery' }) ) //ここまで module.exports = environment }} *webpackerで使う [#fcdfcd0b] -app/javascript/packs/application.jsを編集し、以下を追加。 #pre{{ require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery") // ←の1行を追加 // (後略) }} -app/javascript/test.jsを作成 #pre{{ $(function() { console.log("test"); }); }} -application.jsに組み込む。 #pre{{ require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery") require("test.js") // ←の1行を追加 }} *sprocketsで使う [#o008e1d3] -app/assets/javascripts/application.jsを作成(Rails6ではデフォルトで存在しない)。 #pre{{ function hello() { window.alert('hello world') } -app/assets/config/manifest.jsを編集。javascriptsの行を追加。 #pre{{ /= link_tree ../images //= link_directory ../stylesheets .css //= link_directory ../javascripts .js }} }} -これで適当なindex.html.erbなどから呼び出せるはず。 #pre{{ <button onclick="hello()">Hello!</button> }}