Rails6/jQuery の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Rails6/jQuery へ行く。
• Rails6/jQuery の差分を削除

#author("2021-04-09T05:39:34+00:00","default:src128","src128")
#author("2022-08-02T05:17:44+00:00","default:src128","src128")
&tag(Rails6/jQuery);
*目次 [#lc695b48]
#contents
*関連ページ [#b403a336]
*参考情報 [#cf7fc130]
-[[【Rails6】jQueryがなかなか使い始められない人へ - Qiita:https://qiita.com/iiyama_makoto/items/940b130fd20540fd70f1]]
-[[Rails6でのjQuery導入方法 - Qiita:https://qiita.com/tatsuhiko-nakayama/items/b2f0c77e794ca8c9bd74]]

*組み込み手順 [#s0205b8f]
-以下のコマンドを実行。
 yarn add jquery
-webpackの設定ファイルを編集。jqueryのパスは相対パス指定が必要("jquery"のみだと動かない)。
-webpackの設定ファイルenvironments.jsを編集。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>
}}