7
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

jQueryが導入できないRuby on rails バージョン6.0.0の人に告ぐ、、瞬速jQuery導入法

Last updated at Posted at 2020-09-01

ども、

今回はAjaxが導入できない人や、
ドロワーなどを実装しようとして記事丸コピしたが、
何故かできない人に向け、


基本に立ち返り、jQuery ほんんんとに導入できているか問題を解消スべく この記事を書かせてもらいたいと思います。

この番組は

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.4.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'

の環境でお送りさせてもらいます。

では
まずは、
Gemfileからいじっていきましょ:relaxed:

gem 'jquery-rails'

こちらをみんなが読み込めるように一番下に追加!

続いてJavascript ファイルをいじりまそう

javascript/application.js


require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('../fadeIn')
require('./preview')


//= require rails-ujs 
//= require turbolinks
//= require jquery 
//= require jquery_ujs 
//= require_tree .

こんな漢字。

最後にこれを忘れているかが多いのではないでしょうか!?

config/webpack/environment.jsの設定です。

config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery',
  })
)
module.exports = environment

僕はここで完全に泥沼っていました笑

これで
以上です。

何か間違っている所があれば、
大変お手数ですが、この記事を見てくださった人が被害を受けないためにもコメントお願いします!!

jQUery入れたけどどこで使うねんという人にはこの記事がオススメ💖

フリーターでも分かる、jQuery基礎
[
jQueryでできること10選。動的サイトの制作やプログラミングを簡略化!]
(https://techacademy.jp/magazine/30852)

めちゃ手こずったAjax いいね機能作成、、メモ書きとして。Ruby on rails6.0.0

7
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?