Rails5にBootstrapを導入する

# まえがき
自宅でrails作って学習してるんだけど、デザインにも凝ってみたい。
rails bootstrapでググると**Less**とか**Sass**で導入と出てくる。
はっきりいって初心者には全くわからん。
CSSなんて後回しにしてたからな…。ってことで簡単に備忘録。

# 環境
Windows 10
Ruby 2.3.1
Rails 5

#SassとLESS
**CSS拡張メタ言語**の種類というのかな。
要するにCSSの記述法が違う。CSSの派生で便利に拡張されたイメージかな。
変数を使えたり、セレクタを階層にできてらくちんにかける。

###Sass

Rubyベースで作られているみたい。
ちなみに*Scss*というのもあるが、これはcssに近い記述方法。

```sample.sass
.class
    font-weight: bold
    .kaisou             
       background: red
```
```sample.scss
.class{
    font-weight: bold;
    .kaisou{             
       background: red;
     }
}
```
*scss*のほうが確かにCSSっぽい！

###Less
こっちはNode.jsがもとでJavaScriptベース。
フロント側のエンジニアは扱いやすいんじゃないかな。
限りなくCssに近い書き方らしい。

```sample.less
div.section {
    width: 500px;
    h2 {
        background: red;
    }
}
```

###どっちを使えばOK？
一概にどちらが良いってのもないので好みっぽい。
結局どちらもこのままじゃ動かないのでサーバサイド（RubyやNode）で動的にしてあげる必要がある。
ドキュメントは**Sass**の方が多いみたいで、Rubyということなので今回はSass+Bootstrap導入！

#Bootstrap導入
とりあえずUsersというモデルをスキャフォールドで作ってみました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/165702/16ece516-10f1-8fac-b00e-5d56573bff28.png)

ではいきます。まず*Gemfile*に追加。Ver.指定はなし。

```Gemfile.
gem 'bootstrap-sass'
gem 'sass-rails'
```
```
$  bundle install
```
するとなんかエラー出た。

```
[!] There was an error parsing `Gemfile`: You cannot specify the same gem twice with different version requirements.
You specified: sass-rails (~> 5.0) and sass-rails (>= 0). Bundler cannot continue.

 #  from C:/Users/XXX/Documents/XXX/Gemfile:73
 #  -------------------------------------------
 #    gem 'bootstrap-sass'
 >    gem 'sass-rails'
 #  source 'https://rubygems.org'
 #  -------------------------------------------
```

調べてみるとGemfile内ですでに``gem 'sass-rails', '~> 5.0'``が記述されているためだった。
記述した覚えはないのでスキャフォールド時にでも入っていたのだろう。ってことはRails5標準搭載か？4は知らんが。

記述を消して*bootstrap-sass*のみ``bundle install``で問題なくいけました。

###で、どうやって使うの？ってお話。

*application.html.erb*を見てください。

```app/views/layouts/application.html.erb
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
```
基本的にLayoutのapplication.html.erbってのを通ってViewは表示されるんですけど、がっつり呼び出していますよね。

application.html.erbが読んでいるStylesheetとJavascriptに加える必要があります。

```app/assets/javascripts/application.js
//= require bootstrap-sprockets
```
jsの方はRequireしてあげるだけ。


application.cssの方はScssを使うのでリネームしましょう。
``application.css　＝＞　application.scss``

そして下記を追加。

```app/assets/syulesheets/application.scss
    @import "bootstrap-sprockets";
    @import "bootstrap";
```

これで導入完了。早速見てみましょう。
Usersをリロードすると早速エラー

```
Sass::SyntaxError at /
File to import not found or unreadable: bootstrap-sprockets.
Load paths:
```

Whats?　とりあえずSyntaxError。リネームしたから再起動か？してみる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/165702/6297ea59-3ab6-d2da-9f1d-8389820c389a.png)

起動した。しかしなんか変わってないし。
いや、変わってる。めっちゃ左に寄ってる。
まぁとりあえずこれで導入は完了しました。

#動作確認
[Bootstrapに用意されているクラス【ドロップダウン編】](https://webnetamemo.com/coding/bootstrap/201607242044)こちらのソースを拝借します。
users.html.erbに下記を追加！

```users.html.erb
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    ドロップダウン
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a></li>
  </ul>
</div>
```
すると…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/165702/88433640-13e5-de66-1064-7b6c0d9eeb87.png)
正しく表示されました！
左に寄っているけど…コンテナとかその辺がなんか影響しとるんかな。
まぁそれは別途調べてわかったら追記しますね。

##追記
左に寄るのはやはりcontainerがないからでした。
*application.html.erb* の *yield* を下記のように *div* で囲ってやるといいです。

```app/views/layouts/application.html.erb
<div class="container">
  <%= yield %>
</div>
```
一応スクショも…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/165702/3858e303-7906-44a5-cd1e-2d4d64fddb60.png)




#まとめ
今回はBootstrapを導入しました。SassできてたらおそらくLessとかも似たり寄ったりなので大丈夫だと思います。
次回はよくセットで導入されているFont Awesomeとかもいれてみたいとおもいます。

#注意
筆者も初心者なのであまりなんでも鵜呑みにしないように！笑
あと、間違っているところあればご指摘くださいm(_ _)m