Rails5でBootstrap4を使う

# 概要
Railsチュートリアルをやっていて、Bootstrapのバージョンが3と古かったので最新版の4を使ってみた。
環境構築から実際に使ってみるまで色々調査したのでメモする。

# バージョン

- Rails: 5.2.2
- Bootstrap: 4.3.1

# Bootstrapとは
おそらく知らない人はあまりいないだろうけど、念の為書いておく。

Bootstrapはフロントエンド用のフレームワークで、html,css,JSから構成されている
元々用意されているデザイン用のテンプレートを使うことで、効率的かつ綺麗なデザインを使うことができる。

Bootstrapをそのまま使うとBootstrap臭がするとか言われるが、あんまり気にしない。

## Bootstrap3から4への変更点

[Bootstrap4移行ガイド](https://cccabinet.jpn.org/bootstrap4/)を参照のこと。

# Rails5にBootstrap4を導入する
[bootstrap-rubygemのGithub](https://github.com/twbs/bootstrap-rubygem)に導入手順が書いてあるので参考にする。
Gemfileにgemを追記するだけではダメで、とapplication.sassとapplication.jsを編集する必要がある。

application.sassファイルには、bootstrapをimportする設定を追記する。
ファイルの拡張子がcssの場合はsassに変更する。(bootstrapを@importするため)

さらに、`*= require`と`*= require_tree`を削除する必要がある。

(`@import`はimport先のscssを含めて一つのcssを生成するが、requireは他のファイルを参照する動きをするため、同じcssを見に行こうとしてエラーになる、という理由だと思われる。 
[Rails guide (アセットパイプライン)](https://railsguides.jp/asset_pipeline.html), [sprockets](https://github.com/rails/sprockets) を参照)

```
$ vim app/assets/stylesheets/application.scss
 *
- *= require_tree .
- *= require_self
 */

+ @import "bootstrap";

```

# Bootstrap4でページを修飾してみる

[Bootstrap NavigationBar](https://cccabinet.jpn.org/bootstrap4/components/navbar)を参考に、Navigation Barを設定する。

```
<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
```

ちなみにbootstrap3だとこう書く

```
<nav class="navbar navbar-dark fixed-top">
```

bootstrap4では、新しく`navbar-expand-{}` と `bg-{}` を追記する必要がある。
`navbar-expand-{}`はレスポンシブデザインの挙動、`bg-{}` はnavbarの背景色を指定する。

ナビゲーションバーの項目には`navbar-nav`を使うが、bootstrap4だと項目毎に`nav-item`classを指定する必要がある。(若干めんどくさい)あと、リンクには`nav-link`を使う

```
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <%= link_to "Home", "#", class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "Blog", "#", class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "Contents", "#", class: "nav-link" %>
        </li>
      </ul>
```

まとめるとこんな感じ

```
  <body>
    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
      <%= link_to "tech blog", "#", id: "logo", class: "navbar-brand" %>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <%= link_to "Home", "#", class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "Blog", "#", class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "Contents", "#", class: "nav-link" %>
        </li>
      </ul>
    </nav>
    <div class="container">
      <%= yield %>
    </div>
```

画面を表示するとこうなる。
<img width="1417" alt="スクリーンショット 2019-02-23 1.22.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/167729/4d6b854d-1d56-3bef-f5c3-a626dbb2d77f.png">

# まとめ
- 環境構築はGithubとか公式ドキュメントを見よう
    - `*= require`を消さないまま使おうとしてエラーが発生していた、、
- 出来るだけ一つ一つの設定の意味を理解しよう
    - Bootstrapのclassの意味を理解しておかないと、変なところで表示崩れする。

フロントエンド周りももっと力つけたいなあ

# 参考
- Bootstrap4以降ガイド
    - https://cccabinet.jpn.org/bootstrap4/
- bootstrap-rubygem
    - https://github.com/twbs/bootstrap-rubygem
- Rails guide (アセットパイプライン)
    - https://railsguides.jp/asset_pipeline.html
- sprockets
    - https://github.com/rails/sprockets
- Bootstrap NavigationBar
    - https://cccabinet.jpn.org/bootstrap4/components/navbar