【rails】bootstrapの導入方法。自作cssの配置設定。おまけでjQueryの導入方法

githubのREADME.mdについて調べたので、qiitaでもできるのかなと思ったらできました。
mdはマークダウンというもので、#や*を使って文字を装飾できます。

h1

• リストだったり。

まぁ、それは置いておいて。本題に入らせてもらいます。

bootstrapの導入方法

• CDN
• ファイルの配置
• yarnをインストール

などで導入できます。

CDNとは　コンテンツデリバリーネットワークの略
使ったことがないからよくわからないが、たぶんlinkタグとscriptタグを貼り付けて使うのだと予想する。ただ、ネットが繋がらないと使えないだろうし、バージョンが古くなっていくと使えなくなる可能性があるだろうから、オススメはしない。そこらへんも使う機会があれば調べるとしよう。

ファイルの配置で使う。ファイルをダウンロードしてzipファイルを解凍して、どこかに配置する。
どこかは知らない。app/javascript/webpack内だろうか？　機会があれば調べるとしよう。

yanrのインストール
yarnというパッケージマネージャでインストールする。

yarnでの導入の仕方を書いていく。

前提

アプリケーションを作成済み

$ yarn add bootstrap 　　#最新版

最新版をインストールできるが、今回は

$ yarn add jquery bootstrap@4.5 popper.js  #バージョンとライブラリ指定

で導入する。
popper.jsは詳しくはわからないが
ツールチップやドロップダウンといったポップアップ要素の表示位置をいい感じにしてくれる
jsライブラリ...らしい。

config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)

これを追記。

stylesheetsフォルダを作成。

app/javascript/stylesheets

その中に、application.scssを作成。
開いたら以下を記述。

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

app/javascript/packs/application.js

#記述
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application" 

app/views/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

これをlinkからpackに書き直す。

 stylesheet_pack_tag

linkだと、app/assetsフォルダを参照する。
packだと、app/javascriptフォルダを参照する。

自作のスタイルシートをapp/javascriptに作成する

app/javascript/自作.css
※「自作」は、わかりやすいようにしているだけ。
実際はstyle.cssとかでOK

app/javascript/packs/application.js

 import "自作"

これで反映される。ちなみに、cssは拡張子書かなくてもいいっぽい。
ちなみにjsファイルを、cssファイルと一緒の場所に作成した場合。

import "自作.js"

と拡張子を書く。

app/javascript/stylesheets/自作.css　を作成した場合

app/javascript/packs/application.js

import '../stylesheets/自作.css

bootstrap導入や、自作cssの入れ方を忘れ気味なので書いてみました。

つづいて、オマケで自作のjsファイルの導入とjQueryの導入。

importで読み込む場合

さっきチラッと説明しましたが、詳しい導入を書いていきます。

app/javascript/scripts/自作.js

というjsファイルを作った場合は、
app/javascript/packs/application.jsに

import "scripts/自作.js"

と書くことで読みこまれる。

javascript_pack_tagで読み込む場合

例として

app/view/適応させたい.html.erb

<%= javascript_pack_tag '自作' %>

拡張子は書かない。

app/javascript/packs/scripts/自作.js

この階層で作った場合は

<%= javascript_pack_tag 'scripts/自作' %>

という記述になる。

※ javascript_pack_tag　を使うことで、記述した特定のページにのみ、適応させられる。

CDNで読み込む

適応させたいviewファイルに記述。

 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

全部に適応させたいなら、

app/views/layout/application.html.erb
ここに貼る。
この時、貼る場所は"javascript_pack_tag"より上にはらないと、エラーが出るから注意

application.html.erbのheadタグ内

上から読み込まれ、下にいくにつれてファイルの上書きがされていく。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

*** 終わりに
今回、ついつい忘れがちな基本を書きました、これでスムーズに導入できるようになる！！