今回は、jQueryのインストール方法について備忘録を書いていきます。
jQueryは、JavaScriptを簡易的に記述できるライブラリで、今でも根強い人気を持つものです。
ライブラリを導入するためには、事前の設定がいくつか必要です。
まずはコマンドを実行しjQueryをインストールしていきます。
% yarn add jquery
jQueryの導入には、jquery-railsというGemを利用することもありますが、今回のようにWebpackerで管理する際は、Node.jsのパッケージを利用します。
yarnコマンドを実行した後は
webpackの管理下に追加する記述を追加で書いていきます。
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
})
)
module.exports = environment
次にapplication.jsでjQueryを呼び出す記述を加えて行きます。
app/javascript/packs/application.js
require ("jquery")
これでjQueryの導入が完了しましたが、
まだ読み込む為の記述がないので書いていきます。
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
上記の記述のうち、上のstylesheet~~~の記述は
turbolinksの関係上、自分はいつもコメントアウトにしています。
下の記述があれば動作は問題なく動いたので、
好きなようにして頂いても構いません。
これでjQueryと読み込みの準備が整いました。
後は好きなように記述していくだけです。