【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
※<b>「自作」は、わかりやすいようにしているだけ。
<b>実際はstyle.cssとかでOK
###   app/javascript/packs/application.js

     import "自作"
これで反映される。ちなみに、<b>cssは拡張子書かなくてもいいっぽい。</b>
ちなみに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/自作' %>
という記述になる。

<b><font color= "red">※ javascript_pack_tag　を使うことで、記述した特定のページにのみ、適応させられる。</font></b>


## 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
ここに貼る。
<font color="red">この時、貼る場所は"javascript_pack_tag"より上にはらないと、エラーが出るから注意</font>


### 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' %>


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