rails Bootstrap4（レスポンシブなNavbar）

railsにてBootstrap4を使って簡単なレスポンシブのNavbarを実装する
##完成品
[![Image from Gyazo](https://i.gyazo.com/18359c7214298e7feb85aa3e5b26618c.gif)](https://gyazo.com/18359c7214298e7feb85aa3e5b26618c)

##環境
ruby：2.5.1
rails：2.5.3
DB：mysql(Sequel Pro)
ブラウザ：Google
OS：Mac（10.14.6）

##Github
https://github.com/tana1818/frutweet



##作成手順

####アプリケーション作成
```ruby:ターミナルで置きたいディレクトリに移動してから
rails new frutweet -d mysql
```

　
####Gemインストール、DB作成、scaffoldとマイグレーション実行
```ruby:frutweet
bundle install #gemをインストール
rake db:create #DB作成
rails g scaffold Fruit name:string,image:string  #scaffoldを使用してコントローラ、モデル、ビュー、を全部作成
rake db:migrate  #先ほどscaffoldで作成したマイグレーションファイルを実行する
```

どんなファイルが作られるかだけ知っておきましょう
[【Rails】 Scaffoldとは](https://techacademy.jp/magazine/7204)
　

```ruby:frutweet
rails s  #ローカルで開発用サーバーを起動する（これまでのコマンドがうまくいってるか確認　 Googleでhttp://localhost:3000にアクセス）
```
http://localhost:3000

うまくいっていれば下図のような画面が出てくる

![スクリーンショット 2019-10-14 14.32.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349277/d99c78ee-439a-e882-31ad-e808aecf0f4c.png)

http://localhost:3000/fruits
を検索すると

![スクリーンショット 2019-10-14 15.28.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349277/d62b3c82-cd68-ecb3-12ea-b4330809433f.png)
この画面が表示されるはず

　
####ルーティング設定

```ruby:config/routes.rb
Rails.application.routes.draw do
  root to: 'fruits#index'
  resources :fruits
end
```

　
####bootstrapを適応させる
**①gemをインストールしてbootstrapを使えるようにする**
以前、非同期通信で使っていたものは古いバージョン（bootstrap2か3）だったので
今回はbootstrap4で実装したいと思います。

```ruby:Gemfile
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
gem 'haml-rails' #ついでにhamlもインストール
```

```ruby:frutweet
bundle install
```

参考にした記事⬇︎
https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf

　
hamlを使用するので現在あるerbのファイルをhamlに変換

```ruby:ajax
bundle exec rails haml:erb2haml
```

　
**②scaffolds.scss編集**
bootstrapを使用するのでscaffoldで作成されるcssファイルを削除またはコメント化します
　

**③application.css編集**
ファイル名リネーム＋記述
application.css　→　application.scss


```ruby:assets/javascripts/application.scss
@import "bootstrap"; 
```

　
**④application.jsに追記**

```js:assets/stylesheets/application.js
#上記省略
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require popper #よくわかってない（書かなくても動く）
//= require bootstrap-sprockets
//= require_tree .
```

ここで注意が必要で書く順番によってエラーが生じる
//= require jqueryの前に//= require bootstrap-sprocketsの記載があったりすると
コンソールにエラーが出る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349277/24320d7b-fd84-36af-5fbe-0f6a06dcf407.png)

　
また//= require bootstrap-sprocketsの代わりに//= require bootstrapと記載する事で
コンパイラが高速化されるらしい
[コンパイルとは](https://employment.en-japan.com/tenshoku-daijiten/14875/)

用語で言うと’コンポーネント’という言葉が出てきてわかんなかったので見たサイトを貼っておく⬇︎
https://qiita.com/higuma/items/fdb1d6e044ea93b2cf94

　
これでbootstrap４が適応されるのではず、、

　
####ビュー編集
bootstrapの公式サイトからナビバーのhtmlをコピペ
https://getbootstrap.com/docs/4.3/components/navbar/#responsive-behaviors

がしかし自分がhamlで書いているのでhtmlをhamlに変換してからペーストする
下記のサイトで変換する⬇︎
http://htmltohaml.com/
ちょっと古いせいでhash形式で出力されるので嫌な人は書き換える

因みに下記のコードは少し無駄な箇所を削除プラス編集しています


```haml:views/fruits/index.html.haml
%nav.navbar.navbar-expand-sm.sticky-top.navbar-light{style: "background-color: #BAD3FF"}
  %a.navbar-brand{href: root_path} Furtweet
  %button.navbar-toggler{"aria-controls": "navbar", "aria-expanded": "false", "aria-label": "Toggle navigation", "data-target": "#navbar", "data-toggle": "collapse", type: "button"}
    %span.navbar-toggler-icon
  #navbar.collapse.navbar-collapse.justify-content-end
    %ul.navbar-nav.mr-auto
      %li.nav-item.dropdown
        %a#dropdown.nav-link.dropdown-toggle{"aria-expanded": "false", "aria-haspopup": "true", "data-toggle": "dropdown", href: "#"} ドロップダウン
        .dropdown-menu{"aria-labelledby": "dropdown"}
          %a.dropdown-item{href: "#"} リンク1
          %a.dropdown-item{href: "#"} リンク2
          %a.dropdown-item{href: "#"} リンク3
    %form.form-inline.my-2.my-md-0
      %input.form-control.mr-sm-1{placeholder: "Search", type: "search"}
      %button.btn.btn-outline-info.mt-2.my-sm-0{type: "submit"} Search
```

**補足（対象コード１行目）**
画面の表示を変えるような（画面を縮めるとハンバーガーメニューが出てくるような）ナビバーには`.navbar-expand{-sm|-md|-lg|-xl}`と`color scheme`が必要です。

`.navbar-expand{-sm|-md|-lg|-xl}`は画面の大きさによって
どの位置でレスポンシブ対応の画面にするかの設定です
この記事がわかりやすい⬇︎
https://cccabinet.jpn.org/bootstrap4/sample/responsive-navbars

`color scheme`は名前の通り色です
`.navbar-light`か`.navbar-dark`で明るめか暗めを選択して次に`{style: "background-color: 好きな色"}`で色をカスタマイズする
https://getbootstrap.com/docs/4.3/components/navbar/#color-schemes
http://www.tohoho-web.com/bootstrap/navbar.html

因みに同じ行に書いてる`.sticky-top`はスライドしても画面の一番上に固定するクラス
次回以降活躍！！

　
　
うまく実装できていれば上記のGIFのようにレスポンシブなナビバーが実装出来るはずです
実装自体はほとんどコピペなので早くできたのですが、
中身を理解するのにかなりいろんな記事を見て勉強になりました。
//= require bootstrap-sprocketsと//= require bootstrapに違いがあったりとか
bootstrapにコンポーネント（機能、部品）がめちゃめちゃ多くあったり
bootstrapってこんなサイトもできんの！！！？？？とか
今になってbootstrapにハマりそうですw

popper.jsとかよくわかっていませんが参考文献載っけまくって終わろうと思います
指摘事項あれば教えて頂けると嬉しいです。
それでは
##参考文献
[Railsアプリで Bootstrap 4 を利用する](https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf)
[とほほのBootstrap 4入門](http://www.tohoho-web.com/bootstrap/navbar.html)
[Navbar](https://getbootstrap.jp/docs/4.2/components/navbar/)
[ナビバー　一覧](https://cccabinet.jpn.org/bootstrap4/sample/responsive-navbars)
[全部はいらないよね？bootstrap-sassをカスタマイズして使う方法](https://qiita.com/masamitsu-konya/items/e3630046774ac1fbd346)
[Bootstrap 4 完全マスター](https://qiita.com/higuma/items/fdb1d6e044ea93b2cf94)
[Bootstrap4に用意されているクラス【ボタン編】](https://webnetamemo.com/coding/bootstrap4/201711096011)
[カラーコード一覧表](http://www.netyasun.com/home/color.html)

　

はてなブログもやっているので是非！
https://tanagram18.hatenablog.com/