RailsにBootstrap4を導入する３つの手段

## 1. CDNを利用する
Railsの機能を利用せず直接読み込む方法です。
[BootstrapCDN](https://getbootstrap.jp/docs/4.4/getting-started/download/#bootstrapcdn/)を参考にリンクを挿入します。

※オリジナルのJavascriptやCSSを読み込む場合は順番に注意しましょう。

```erb:/app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
  <%= yield %>
  </body>
</html>
```

ただしRailsの機能を無視したやり方は綺麗ではないので、以下の方法をオススメします。

## 2. gemを利用する

※webpackerを利用している場合は「3.webpackerを利用する」の方法を行ってください。（Rails6から始めた方はデフォルトでwebpackerが導入されているので注意しましょう。）

#####1. Gemfileを編集します。
Gemfileに以下のコードを加えます。

```rb:Gemfile
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
```
※Rails5以下ではjqueryはデフォルトでインストールされています。
※`bootstrap-sass`はbootstrap2や3で利用するものです。もし記述されていたら削除します。
#####2. ターミナルからルートディレクトリで`bundle install`を実行します。

`Bundle complete!`と出ればOK！

#####3. app/assets/stylesheets/application.cssの拡張子を変更します。

app/assets/stylesheets/application.cssの拡張子をscssに変えます。
ターミナルで行うには以下のコマンドを実行します。

```
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```

#####4. 上記のファイルを編集します。

上記で拡張子を変更したファイルを以下のように編集します。

```scss:app/assets/stylesheets/application.scss
@import "bootstrap";
```
以下のコメントは削除します。

```scss:app/assets/stylesheets/application.scss
*= require_tree .
*= require_self
```

#####5. app/assets/javascript/application.jsを編集します。

app/assets/javascript/application.jsを以下のように編集します。
こちらは既存のコードは削除せず追加します。

```app/assets/javascript/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
```

##3. webpackerを利用する

Rails6ではデフォルトで導入されるようになりました。既に導入されている場合は4から行ってください。また、yarnがインストールされている必要があります。

#####1. Gemfileを編集します。

Gemfileに以下のコードを追加します。

```rb:Gemfile
gem 'webpacker', '~> 4.0'
```

#####2. ターミナルからルートディレクトリで`bundle install`を実行します。

`Bundle complete!`と出ればOK！

#####3. ターミナルから以下のコマンドを実行します。

`bundle exec rails webpacker:install`

#####4. app/javascript/にフォルダを作成します。

app/javascript/にsrcフォルダを作成します。
ターミナルで行うには以下のコマンドを実行します。

```
mkdir app/javascript/src
```

#####5. 上記フォルダにファイルを作成します。

app/javascript/src/にapplication.scssファイルを作成します。
ターミナルで行うには以下のコマンドを実行します。

```
touch app/javascript/src/application.scss
```

#####6. bootstrapとその仲間を導入します。

ターミナルで以下のコマンドを実行します。

```
yarn add bootstrap@4.3.1 jquery popper.js
```

#####7. app/javascript/packs/application.jsを編集します。

app/javascript/packs/application.jsを以下のように編集します。

```js:app/javascript/packs/application.js
import 'bootstrap'
import '../src/application.scss'
```

#####8. app/javascript/src/application.scssを編集します。

app/javascript/src/application.scssを以下のように編集します。

```sass:app/javascript/src/application.scss
@import '~bootstrap/scss/bootstrap';
```

#####9. app/views/layouts/application.html.erbを編集します。

上記で編集したファイルを読む込むようにします。
app/views/layouts/application.html.erbを以下のように編集します。

```erb:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
    <%#=以下の２つを追加する %>
    <%= stylesheet_pack_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>
```

なお上記のやり方は「[RailsでBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう](https://qiita.com/rhistoba/items/f724dae231d7e28bf477)」を参考にさせていただきました。