はじめに
やりたいこと
- いいね機能のAjax対応を実装したい
- そのためにjQueryを導入したい
動作環境
ruby 2.6.5 / Rails 6.0.3.4
やってみて
Rails６から標準装備されているWebpackerを利用することで簡単に実装できました。
多くの記事がRails5までの情報でとっっっても遠回りしたので、6以降の方は僕のように無駄な時間を使わないでいただけたら…
参考URL
Railsガイド > Rails で JavaScript を使用する
手順
- jQueryのインストール
- Webpackの設定
- application.jsの設定
- 動作確認
jQueryのインストール
そもそもjQueryとは
JavaScriptをより簡単に記述するためのライブラリのひとつ。
したがって、jQuery（ライブラリ）を使うのであればJavaScript（元のプログラミング言語）にコンパイル（翻訳）する必要があります。
コンパイルする方法はいろいろありますが、初学者故、とりあえず簡単なWebpackerを使用していこう！というのが本記事の主旨であります。
ではまず、jQueryのインストールを行います。
% yarn add jquery
Rails5以前の導入方法ではjquery-railsというGemをインストールするのが基本線のようですが、Webpackerで管理する際はyarnコマンドを使用してインストールします。
GemをGemfileからインストールしていたのでこちらの記事を参考に削除しました
> GemfileでインストールしたGemを削除する
yarnとは
JavaScriptのパッケージマネージャー。Node.jsで動作するパッケージを管理する。
Node.jsとは
本来フロントサイド開発用の言語であるJavaScriptをサーバーサイドで使うための「環境」のこと
Node.jsのおかげで簡単にAjax対応ができたりする。
つまり、Webpackerという翻訳機にjQueryという言語をyarnというサーバー用の説明書で登録した、という感じでしょうか（違ってたらごめんなさい）
Webpackの設定
Webpackの設定ファイルで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
application.jsの設定
application.jsでjQueryを呼び出せるようにします。
//中略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 追記
require('jquery')
//中略
以上で導入は完了です。
動作確認
jQueryが問題なく動作しているか確認します。
好きなページに次のコードを転記します。
<p>テスト</p>
<script type="text/javascript">
$(document).ready(function() {
$("p").text("成功！！");
});
</script>
p要素のテキストに”成功！！”を代入するようになっています。
(成功例）
このように「テスト」ではなく「成功！！」と表示されていれば動作確認は完了です。
おわりに
いろいろな記事を調べてgemを導入したりしていたのですが、Webpackerを使えば簡単に実装できました。
特に今回、JavaScriptとjQueryを調べていく中で、Node.jsのことを表面的にでも理解できたのはよかったかなと思います。
参考にさせていただいた記事
エンジニアの入り口 > 初心者向け！3分で理解するNode.jsとは何か?
Ruby / Rails 初学者向けの記事を書いています。
今後も週3〜4記事ペースで更新していきたいと思いますので、初学者のみなさん、ぜひフォローお願いします！！
最後までお読みいただきありがとうございました！
✔︎