【超簡単】Ruby on Rails に BootStrapを導入する方法

#  はじめに
筆者は [大学生限定 プログラミングコミュニティ 『GeekSalon』](https://geek-salon.com/?utm_source=Direct&utm_medium=attract&utm_campaign=2Q&utm_content=Fukuoka_E_2Q)で活動している者です！ 

#  Bootstrapとは
世界で一番人気のあるフロントエンドライブラリです。
モバイルファーストなレスポンシブウェブを素早くデザイン・カスタマイズすることが可能です。
豊富なコンポーネント、強力なJavaScriptプラグインを備えています。
詳しくは、[Bootstrap公式サイト](https://getbootstrap.jp/) を！！
## Ruby on Rails への導入方法
①まずは[Bootstrap公式サイト](https://getbootstrap.jp/)へアクセス！
②サイト内のはじめるボタンをクリック！
![スクリーンショット 2022-05-13 23.36.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1081227/7b4d8635-33e1-580a-34a5-431ee4c42ca0.png)
※ UIが更新されている場合があります。
③CSSという見出しの下にある以下のコードをコピー！
```ruby:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
```
![スクリーンショット 2022-05-13 23.39.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1081227/b37938d1-9be5-f466-955f-d5f1a4326122.png)

④VSCodeにて開発中のフォルダ内のapp/views/layout/application.html.erbファイルを開く
⑤先ほど③でコピーしたコードをapplication.html.erbファイル内のheadタグ内にペースト！
```ruby:app/views/layout/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ここ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>

  <body>
    <%= yield %>
  </body>
</html>
```
⑥公式サイトに戻り、JSという見出しの下にある以下の3つのコードをコピー！
#### Bundle
```ruby:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
```
#### Separate
```ruby:
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
```
![スクリーンショット 2022-05-13 23.39.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1081227/2733f812-12d7-19eb-76e4-93c65e5b4e36.png)
⑦先ほど⑥でコピーしたコードをapplication.html.erbファイル内のbodyタグ内のyeildタグの下にペースト！

```ruby:app/views/layout/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>

  <body>
    <%= yield %>
    <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ここ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </body>
</html>
```
⑧Bootstrapがうまく導入されたか確認します。任意のviewページに以下のコードを記述！
```ruby:hoge.html.erb
<button type="button" class="btn btn-primary">Primary</button>
```

![スクリーンショット 2022-05-14 0.38.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1081227/147953b6-1eac-8471-c01e-0b90482371c3.png)

↑がサイトに表示されていれば成功です！

##  最後に
いかがでしたでしょうか？
不具合等ありましたらご連絡ください！