Ruby on Rails6でのjQueryの実装方法(Windows10 + 仮想環境)

Rails5までの実装方法を試してみてもjQueryが動かなかったので調べてみると、
Railsのversionが上がり、Rails6になってからはjQueryの実装方法が変わったようなので、
自分の勉強もかねて、読んでくださる方々に共有させていただきます。


※プログラミング初心者ですので、おかしい点などがありましたら指摘してもらえると助かります。

## 開発環境
- 使用PC：Windows10
- 仮想環境：vagrant + CentOS7
- テキストエディタ：VSCode
- Ruby version：ruby2.5.8
- Rails version：6.1.1

## 実装したい環境

Ruby on Rails6での環境でjQueryを実装したい

## 目次
1. jQueryインストール
2. application.jsのファイル先の変更
3. Webpackの設定
4. application.jsの設定
5. 外部ファイル作成


#### 1. jQueryインストール
Rails5までのverでは、GemfileにjQueryを記載して`bundle install`していた。しかし、Rails6ではWebpacketを利用してjQueryをインストールします。

【Windowsの人はこちらのコマンド yarnが使えない人用】
` npm add jquery `

【Macの人はこちらのコマンド yarnが使える人用】
` yarn add jquery `

#### 2. application.jsのファイル先の変更

Rails5ではapplication.jsファイルは
【Rails5の場合】
app/assets/javascript/application.js

にあった。しかしRails6では
【Rails6の場合】
app/javascript/packs/application.js 

ファイルの場所が変わっている。

application.jsの head 内に以下のコードが追記されているか確認する。
追記されていない場合は追記する。

``` app/javascript/packs/application.js 
<head>
// ～他のコードが記載されている
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
//　↑のコードが記載されているか
</head>
```



#### 3. Webpackの設定

Webpackの設定に以下を追記する。

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'
    })
)
// ここまで
module.exports = environment
```

#### 4. application.jsの設定

【Rails6の場合】

``` app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require ('test.js')  //追加　自分が決めたjsのファイル名

```

【Rails5の場合】

``` app/assets/javascript/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

```

僕はRailsのバージョンが違うと何が変更されるのかなど、よくわかっておらず、Rails5のapplication.jsのコードの下や上にRails6のコードを書いたりしててjQueryが動かなかったので注意が必要かもです。

#### 5. 外部ファイル作成

次に**外部ファイルにjQueryコードを書いていく。**
今回は例としてtest.jsとファイル名をする。
ファイルは app/javascript/ このjavascriptフォルダより下に格納する。

※フォルダを新たに作って、その下に格納してもいい。

``` app/javascript/test.js 

$(function() {
$(".title").css("color", "red");
});

```

今回は例として post/index.html.erb にjQueryを実行してみる。
viewやコントローラーやモデルなどはすでに作られている前提で書いていきます。

``` app/views/posts/index.html.erb

<title>Hello World</title>

```

実際に `rails s` して確認してみる。

![unnamed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880028/7bc39d1f-c80d-4a78-f0a6-2348cfeec4a6.png)


正常に動きました。

【jQueryを導入していない場合の結果】
![unnamed (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880028/f64943a8-d733-1ea6-5119-026300836e07.png)


4.　でapplication.js に require ('test.js') を追加したので
どのViewファイルでも test.js（好きなファイル名） に書き込めばjQueryが実行される。

app/views/posts/index.html.erb　に直接jQueryを書き込むこともできるが、
重くなったり、管理がしづらかったりなど、あまり使われていないです。

``` app/views/posts/index.html.erb

<title>Hello World</title>

<script>
$(".title").css("color", "blue");
</script>

```

最後まで見てくれてありがとうございます。
プログラミングの勉強一緒に頑張りましょう！