Rails6/jQuery の履歴(No.3)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Rails6/jQuery へ行く。
  • 1 (2021-04-07 (水) 17:42:43)
  • 2 (2021-04-07 (水) 17:46:14)
  • 3 (2022-04-11 (月) 15:28:18)

Tag: Rails6/jQuery

目次†

関連ページ†

参考情報†

• 【Rails6】jQueryがなかなか使い始められない人へ - Qiita
• Rails6でのjQuery導入方法 - Qiita

組み込み手順†

• 以下のコマンドを実行。

  yarn add jquery

• webpackの設定ファイルを編集。jqueryのパスは相対パス指定が必要("jquery"のみだと動かない)。

  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で使う†

• app/javascript/packs/application.jsを編集し、以下を追加。

  require("@rails/ujs").start()
  require("turbolinks").start()
  require("@rails/activestorage").start()
  require("channels")
  require("jquery")  // ←の1行を追加
  // (後略)
  

• app/javascript/test.jsを作成

  $(function() {
    console.log("test");
  });
  

• application.jsに組み込む。

  require("@rails/ujs").start()
  require("turbolinks").start()
  require("@rails/activestorage").start()
  require("channels")
  require("jquery")
  require("test.js")  // ←の1行を追加
  
  

sprocketsで使う†

• app/assets/javascripts/application.jsを作成(Rails6ではデフォルトで存在しない)。

  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などから呼び出せるはず。

  <button onclick="hello()">Hello!</button>