Rails 5.1系でgemを追加せずにBootstrapを導入する方法

背景

Rails5.1系でBootstrapを導入する際に毎回導入手順を忘れてしまうため、そのメモとして投稿させて頂きます。

前提

• Bootstrapを導入するためにはjQueryが動く環境が必要である
• Rails5.1以降では、デフォルトでjQueryが使用出来るようになっていない

導入手順1 : jQueryを導入する

*rails _5.1.4_ new アプリ名のコマンド実行直後でアプリの雛形が出来ている状況を想定

今回は、JavaScriptのバッケージマネージャーである Yarnを使います!
(YarnはRailsのBundlerのように複数のパッケージを管理するツールです)

Yarn自体を導入する方法(公式HP)
https://yarnpkg.com/lang/en/

今回はMacOSのversionで導入するので、以下のコマンドを実行してYarnを導入します

brew install yarn

そして、rails newしたディレクトリ内で実行

yarn add jquery

コマンドが実行されると node_mojulesというフォルダが生成され、中にjQueryが格納されてます。

導入手順2 : jQueryを読み込ませる

node_mojulesというフォルダに生成されたjqueryをマニフェストファイルに読み込ませます。

*注釈
マニフェストファイルとは、Railsでまとめて読み込みたいライブラリなどの情報をあらかじめ記述しておく設定ファイルのことです！

Bootstrap導入にあたって記述が必要なマニフェストファイルは以下の通り！

javascript： jQueryの設定で必要

app/assets/javascript/application.js

css： Bootstrapそのものの設定で必要

app/assets/stylesheets/application.css

まず最初にjQueryを読み込む設定から

application.js

<中略>
# //= require_tree . より上に　今回読み込みたいjQueryの設定を記述

//= require rails-ujs
//= require turbolinks
//= require jquery/dist/jquery.js　　←　ここが今回記述追加した部分
//= require_tree .

上記設定を行うことでjQueryが使えるようになりました。

導入手順3 : Bootstrapの導入

gemをインストールするのではなく、先ほどと同じようにYarnを使ってインストールします！
Bootstrap3をインストールするので、@以降に3と明記してコマンド実行

yarn add bootstrap@3

以下のマニフェストファイルにBootstrapを読み込む記述を追加

application.css

<中略>
 *
 *= require bootstrap/dist/css/bootstrap.min
 *= require_tree .
 *= require_self
 */

確認

実際にrails sしてテンプレートにBootstrapが反映されるのか確認します。

index.html.erb

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#gnavi">
        <span class="sr-only">Bootstrap</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap

      </a>
    </div>
    <div id="gnavi" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="">top</a></li>
        <li><a href="">menu1</a></li>
        <li><a href="">menu2</a></li>
      </ul>
    </div>
  </div>
</nav>

上記コード中のBootstrapのnavbarがテンプレートにも反映されていることが確認できます。

まとめ

Rails5.1系では以前のバージョンのようにjQueryとBootstrapをYarnなどパッケージ管理ツールでインストールする必要がある！
しかし、gemfileに従来のようにtwitter-bootstrap-railsといったgemを追加し、bundle installしなくてよい！！

注記

完全に自身のメモ用の記事なので、間違いなどもあるかもしれません...
その際はご指摘頂ければ幸いです。