Rails6でjqueryとBootstrapのインストール手順と導入方法

こんにちは。
4児パパです。

新年あけましておめでとうございます。
今年も何卒宜しくお願い致します。

今年は2020年。ようやく東京オリンピックの年がやってきましたね。オリンピックのおかげで日本の経済状況は良い方向になると願っています。

Rails6でjQueryとBootstrapの導入方法

私がRails6にて開発している際にjqueryとbootstrapの導入した手順と導入方法をお伝えします。

jqueryはjavascriptのライブラリでその一部である。javascriptのライブラリは今では多くあり、なおかつ日々改良され種類も豊富になってきましたよね。
私自身、今年度はReactを導入したいなと思っています。

さて、javascriptいわゆるjsについて、ここでは何ができるかそして使い方などの細かい事は省いていきますね。

yarnとwebpackerのインストール

Rails6はyarnとwebpackが必須となります。
$ brew install yarn --ignore-dependencies
https://papa-programing.jp/rails6-new/に置いて、Rails6ではyarnとwebpackのインストールが必要な事をお伝えしていますので、ぜひご参照ください。

jqueryをインストール

$ yarn add jquery でRailsプロジェクトにjequeryを導入します。
ただyarnのバージョンが低いと、このコマンド後に、
$brew upgrade yarnをしなさいとアドバイスされたり、怒られたりします。


ここではエラーの再現性をスクリーンショットし忘れたので省きますね。
私の場合、$ yarn -v 1.19.1からの1.21.1にupgradeしました。後々に割とupgradeしないとエラーがおきましたので。

jqueryがインストールされたどうかの確認

$yarn add jqueryをインストール後、package.jsonのファイルを開けて確認します。

{
  "name": "bootstrap_test",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "jquery": "^3.4.1"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.2"
  }
}

ここで”jquery”の3.4.1のバージョンがインストールされたのを確認できました。

jqueryインストール後の環境を整えます

$ yarn add jquery後に、app/javascript/packs/applicationsとconfig/webpack/environment.jsにて追記します。

Rails5.2系ですとnode_modulesのファイル内にてフォルダが生成され、その中にjqueryが$yarn add jquery後格納されます。

const { environment } = require('@rails/webpacker')

#addition from here
environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}))
#until here

module.exports = environment_

ここのpopper.jsを記載しているのは、bootstrapを導入する前提で書いています。

もしbootstrapを使用しないで、jqeuryのみを必要でしたら、javascriptの配下に”src”のディレクトを作成し、config/webpack/environment.jsの中身は下記のようにするのも一つの書き方です。

const { environment } = require('@rails/webpacker')

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

javascript/packs/application.jsにjqueryを使用できる様書く

webpacker/environment.jsを追記後、
app/javascript/packs/application.jsにて、require(“jquery”) を追記をします。

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') #add

Rails6でBootstrapの導入方法

Railsだけではなく、ワードプレスのテーマにもTwitter社が提供しているBootstrapは以前よりも多いですよね。オシャレですし、私も愛用させて頂いております。何よりものこのグリッド方式は、開発の手間も省けます。

BootstrapのRailsへのインストール

$ yarn add bootstrap jquery popper.js

Bootstrapがインストールされたかどうかの確認

package.jsonのファイルにて、bootsrapが正常にインストールされているかが記載されます。

{
  "name": "bootstrap_test",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.2"
  }
}

application.sccsファイルの作成

app/javascripts配下にてsrcのディレクトリを作り、application.sccsを作成します。そして@import ‘~bootstrap/scss/bootstrap’; 　を記載します。

@import '~bootstrap/scss/bootstrap';

その後に、app/javascript/packs/application.jsのファイルにて、

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

turbolinksは導入しなかった

今開発している中ではturbolinksはrails newの際、オプションでskipしました。
webpackに依存していますし、jsとの相性でエラーが多くなってしまうのかなと。ただいつでも必要性が出たら柔軟に対応していきます。

プログラミングで今年こそは変わりたいあなたへ

エンジニアの素晴らしい所は、開発したものが”形になり”世の中の人へ利用してしもらえる事。このご時世エンジニア無しではサービスが成り立たない事。

優しい道のりは無いが最短を目指す

独学で学び始めると確実にどこかで躓きます。その躓き具合で挫折に繋がります。「私には向かない。」「もともとエンジニアではなかったし。」と言った具合に、せっかく学び始めたものを諦めてしまいます。

私の経験上、優しい道はありません。ただプログラミングを学ぶ際のその躓きや悩みは、学び方や環境一つで良い方向に転換していきます。

プログラミングスクールに入るのが最短

私の経験上プログラミングスクールに入って、学び上げる事が最短ですかね。
今では沢山のプログラミングスクールがありますが、私はやはり出身のDive Into Codeをお勧めします。
代表の野呂さんに当時は何度か教えていただきました。腹落ちするまで、夜中まで付き合って頂きました。

そして横のつながりも強いです。卒業してなおコミュニティーに参加でき、半永久的に教材は閲覧する事ができます。

エンジニア一人でも知り合いになる

以前4年前ぐらいですかね、Railsのセミナーの講師をしていたエンジニアの先輩は今でも交流があり、我が家に泊まりに来て頂けるほどの仲よくして頂いております。

本職がエンジニアでは無い私ですが、Railsやワードプレスで本番環境に置いてエラーやバグで困ってしまい、どうしようもない時に何度か助けて頂きました。

実際にはその先輩からの付き合いで、沢山のエンジニアの方々と知り合う事ができ、良い人生の巡り合わせを経験しました。

プログラミングを学んでいるだけ、自分が外の世界へ交流を求めると違った世界に足を踏み入れる事ができます。

最後に

エラーは敵ですが、エラーメッセージは友達です。
初学者にとって一番陥りやすいのは、解決を見出せず一つのエラーで永遠に戦ってしまう事。
30分悩んで解決できなそうだったら、すぐに聞いた方が良いです。
なのですぐ聞ける環境は、プログラミングスクールですね。

聞きすぎて恥ずかしいなんて思わず、とことん聞いてメンターには付き合ってもらいましょう。それが自分の成長の為だと心に決めましょう。

人生伸び代しかない！
4児パパ