Tag: Rails6/jQuery

目次

関連ページ

参考情報

組み込み手順

  • 以下のコマンドを実行。
    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>
    

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-04-09 (金) 14:39:34