【初心者向け】Bootstrap4のRailsへの導入方法を3ステップで解説

今回はBootstrap4をRailsに導入する方法を、Gemのインストール・application.scssの編集、application.jsの編集の3ステップで解説していきます。

RailsにBootstrap4を導入できれば、cssやjsの処理をbootstrap4で行えるのでデザインや動作の大部分をBootstapに任せることが出来ます。

フロントを任せることでバックエンドの処理に集中でき、アプリの質をあげることができるでしょう。

それでは解説していきます。

目次

  1. Bootstrap4のgemをインストールする
  2. application.scssを編集する
  3. application.jsを編集する

1.Bootstrap4のgemをインストールする

Bootstrap4のgemをGemfileの編集とbundlerを使ってインストールします。

まずは、Gemfileを開いて以下のコードを書き込みます。

gem 'bootstrap', '~> 4.3.1'

Bootstrap4以降では、Sassが公式に使われるようになったので、bootstrap-sassをインストールする必要はありません。

そしてターミナルでbundle installします。bundle installはrootディレクトリで行います。(rails newして出来たフォルダのディレクトリ)

bundle install

問題なくインストールされれば、完了です。

またBootstrapはjqueryを使用しているので、Gemfileにjquery-railsがあることを確認してください。

Rails5.1以上のバージョンだと、デフォルとでインストールされていないので自分でインストールする必要があります。

以下のコードをGemfileに追加して、bundle installします。

gem 'jquery-rails'
bundle install

これでインストールは完了です。

Gemfileはこんな感じになります。

2.application.scssを編集する

次は、app/assets/stylesheets/application.scssを編集します。

もし、application.cssとなっている場合は以下のコマンドか、右クリックで名前を変更してapplication.scssにします。(拡張子を.css => .scssに変更)

terminalのルートディレクトリで以下のコマンドを実行します。

 mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

そうしたら、application.scssを開いて以下のコードを記入します。

@import "bootstrap";

これでapplication.scssの編集は完了です。

以下のような状態になります。

3.application.jsを編集する

最後にbootstrapのjavascriptが動くように、application.jsの設定を変えます。

以下の3行をapplication.jsに追加します。

app/assets/javascript/application.jsにあります。

//= require jquery3
//= require popper
//= require bootstrap-sprockets

追加すると以下の画像のようになります。

これで準備は完了です。最後にBootstrapが適用されているどうかを確認しましょう。

今回は公式サイトのmodalをコピーして使います。以下のコードを貼り付けてボタンのデザインやモーダルの動作ができるか確認しましょう。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

成功するとウィンドウがでてこんな感じになります。

以上で、Bootstrap4の導入方法の解説を終わります。