【Rails】【初学者向け】Bootstrapてなんだ（一番簡単にRailsアプリにBootstrapを導入する）

# Bootstrapてなんだ
目次
・Bootstrapとは
・Bootstrapの利用方法
・BootstrapをRailsアプリに導入するまで

ちゃっちゃとRailsアプリに導入したい方は、
・BootstrapをRailsアプリに導入するまで
まで飛んでみてください！

## Bootstrapとは
Bootstrapは端的に言えば、**アプリのデザインを爆速で進めていくのにめちゃめちゃ便利なツール**、です！
元々、Twitter社が開発したものです。
普通一般に、デザインなどはプログラマーがCSSやJavascriptを書いていって、実装していくのですが、
Bootstrapを用いれば、もうすでにBootstrap側で作ってくれているCSSやJavascriptを用いることができるのです！
（つまり、みなさんがHTMLを書いていく中でクラス名を、Bootstrap側で用意してくれているクラス名に合わせれば、Bootstraps製のCSSやJavascriptが適用されるのです！）
そして、どのクラス名に合わせれば、Bootstrapが適用できるのか、に関しては
[Bootstrap公式サイト](https://getbootstrap.com/docs/4.4/components/alerts/)にパーツが書かれております！ほぼほぼコピペでいけちゃいますね
![Bootstrap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411851/35121b1e-0ce7-d9bc-6c67-67aa497366a3.png)
引用
> [SKILLHUB](https://skillhub.jp/courses/168/lessons/915)

## Bootstrapの利用方法
Bootstrapを利用する方法は２通りあります。
### CDNを利用する方法
[Bootstrap CDN](https://www.bootstrapcdn.com/)
↑
こちらのサイトに記載されているCDNをHTMLのHead内に記入することで、サーバに置かれているBootstrapデータを読み込むことができ、利用できます！
Ex.)
<img width="893" alt="スクリーンショット 2020-03-13 10.55.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411851/a2c26876-f397-5535-addd-1b37e1987b50.png">

```index.html.erb
<head>
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
```

[CDNってなんやねん](https://www.1-firststep.com/archives/2142)


### Bootstrapファイルをダウンロードする方法
これは直接Bootstrapが作ってくれているCSS,Javascriptファイルを自分のアプリディレクトリに組み込む、という方法です！
[Bootstrapダウンロードページ](https://getbootstrap.com/docs/4.4/getting-started/download/)
<img width="790" alt="スクリーンショット 2020-03-13 10.57.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411851/0d73da93-a986-1109-5cf3-801a6640a860.png">

上の、ダウンロードボタンを押下すると、ファイルがダウンロードできるので、ダウンロードしたファイルをご自身のファイルの中にぶち込んでいくだけです。
実際、使いたいファイルだけをご自身のstylesheetフォルダ内にぶち込んでください
CSSを使いたいだけなら、bootstrap.min.cssだけでいいかと思いまする。
<img width="843" alt="スクリーンショット 2020-03-13 11.01.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411851/f3994a5d-2b66-ef65-032e-2da48c244fa3.png">
[参照](http://bootstrap3-guide.com/base/prepare.html)

## BootstrapをRailsアプリに導入するまで
今回は、CDNを利用する方法でご説明していきます
### Railsアプリを作成

```terminal
> cd Desktop
> rails new BootstrapApp
> cd BootstrapApp
```

### homeコントローラーのtopアクションを作成

```terminal
> rails generate controller home top
```

### BootstrapのCDNを導入

```application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>BootstrapApp</title>
    <%= 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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
　　 #ここまでを追加
  </head>

  <body>
    <%= yield %>
  </body>
</html>

```
### 反映させたい画面のファイルにパーツを設置
設置したいパーツは
[Bootstrap公式サイト](https://getbootstrap.com/docs/4.4/components/alerts/)
ここのComponentから選んでね
下では、例として、buttonsからボタンのデザインをコピペしてきたよ
<img width="963" alt="スクリーンショット 2020-03-13 11.23.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411851/56e06573-5319-cebe-0904-d67e4db0cbee.png">


```home/top.html.erb
<h1>Home#top</h1>
<p>Find me in app/views/home/top.html.erb</p>

#ここから
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
#ここまでを追加
```

### 完了

ではRailsサーバーを立てた上で、
>localhost:3000/home/top

にアクセスしてみてください
<img width="768" alt="スクリーンショット 2020-03-13 11.21.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411851/b50ed1f8-4d58-74c1-8684-7548a468e0d9.png">
こんな感じで、色々なボタンのデザインが出来上がっているでしょう
めためた簡単でしょう