こんにちは
未経験から転職を目指すものです
今回はrailsアプリに
jQueryを入れて
画面に動きをつけていこうと
思います。
環境
- macOS Monterey 12.３.1
- Ruby 3.1.2
- Bundler 2.3.10
- Rails 6.1.4.7
jQueryインストール
まずはjQueryをインストールしていきます。
rails5以前はjquery-railsというGemをインストールするのが
主流のようですが
webpacker管理するには
yarnコマンドを使用しないといけないので、
yarnを使用してjQueryをインストールしていきます。
$yarn add jquery
yarn add v1.22.18
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ jquery@3.6.0
info All dependencies
└─ jquery@3.6.0
✨ Done in 1.72s.
インストールできました。
webpackerの設定とjQueryの呼び出し
Webpackの設定ファイルでjQueryを管理下として認定します。
app/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'
})
)
//ここまでを追加
module.exports = environment
続いて
application.jsでjQueryを呼び出します。
app/javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
require('jquery') //追加
以上でjQueryを使える環境が整いました。
参考