Rails6 bootstrapとjQueryを使用する手順

2020.10.06
rails
bootstrap, jquery, Rails

Rails6環境で標準となった、railsでWebpackが利用できるWebpackerを使用してbootstrapとjQueryを導入するまでの手順を記述してます。

1. 環境
2. bootstrapとjQueryインストール
3. Bootstrap設定
4. jQuery設定
5. Bootstrap使い方
6. jQuery使い方

環境

OS windows10 pro 64bit
ruby 2.7.1
rails 6.0.3.2

※windows10にrubyをインストールして実行する手順はこちら
※windows10にRuby on Railsをインストールして利用する手順はこちら

bootstrapとjQueryインストール

yarnを利用してインストールします。
※windows10にscoopを使ってnode.jsをインストールする手順はこちら

nodeがインストールされていればyarnは、下記を実行すればインストールされます。

npm install -g yarn

1	npm install -g yarn

railsプロジェクトを作成します。

rails new rails-test

1	rails new rails-test

対象のrailsのプロジェクト直下で下記のコマンドを実行します。

cd rails-test
yarn add bootstrap jquery popper.js

1 2	cd rails-test yarn add bootstrap jquery popper.js

自分の場合は作成したプロジェクト名が「rails-test」なのでrail-testファルダ配下で実行してます。

プロジェクト配下にあるpackage.jsonにbootstrapとjqueryが追加されていることが確認できます。

{
  "name": "rails_test",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

{

"name": "rails_test",

"private": true,

"dependencies": {

"@rails/actioncable": "^6.0.0",

"@rails/activestorage": "^6.0.0",

"@rails/ujs": "^6.0.0",

"@rails/webpacker": "4.2.2",

"bootstrap": "^4.5.0",

"jquery": "^3.5.1",

"popper.js": "^1.16.1",

"turbolinks": "^5.2.0"

"version": "0.1.0",

"devDependencies": {

"webpack-dev-server": "^3.11.0"

}

Bootstrap設定

「app\javascript」ファルダ内にある「src」という名前でフォルダを作成します。

作成した「src」フォルダ内に「application.scss」を作成します。

「application.scss」を以下の内容で編集します。

@import '~bootstrap/scss/bootstrap';

1	@import '~bootstrap/scss/bootstrap';

次に、「app\javascript\packs」にあるwebpackのデフォルトのエントリーポイント「application.js」に下記を追加します。

import 'bootstrap'
import '../src/application.scss'

1 2	import 'bootstrap' import '../src/application.scss'

jqueryも利用するのでついでに「application.js」に下記を追加しておきます。

require("jquery")

1	require("jquery")

jQuery設定

「config\webpack」ファルダ配下にあるローダーやプラグインの設定を行う「environment.js」に下記を追加します。

const webpack = require('webpack')

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

const webpack = require('webpack')

environment.plugins.prepend('Provide',

new webpack.ProvidePlugin({

$: 'jquery/src/jquery',

jQuery: 'jquery/src/jquery'

})

)

Bootstrap使い方

bootstrapを適当なテンプレートに、適応してみます。

<table class="table table-dark">
    <thead>
        <tr>
            <th>name</th>
            <th>price</th>
        </tr>
    </thead>

    <tbody>
        <% @cars.each do |car| %>
            <tr>
            <td><%= car.name %></td>
            <td><%= car.price %></td>
            </tr>
        <% end %>
    </tbody>
</table>

<thead>

<tr>

<th>price</th>

</tr>

</thead>

<tbody>

<% @cars.each do |car| %>

<tr>

</tr>

<% end %>

</tbody>

</table>

Webpackerのコンパイルに少し時間がかかりますが、bootstrapが使用できていることが確認できます。

jQuery使い方

jqueryも利用してみます。

<table class="table table-dark">
    <thead>
        <tr>
            <th class="test">name</th>
            <th>price</th>
        </tr>
    </thead>

    <tbody>
        <% @cars.each do |car| %>
            <tr>
            <td><%= car.name %></td>
            <td><%= car.price %></td>
            </tr>
        <% end %>
    </tbody>
</table>

<script>
$(function() {
  $('.test').css('color', 'Red');
});
</script>