Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

背景

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がテンプレートにも反映されていることが確認できます。

image.png

まとめ

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

注記

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

fuqda
Tama.rbという地域Rubyコミュニティを主催しています。 https://tamarb.connpass.com はてなブログはこちらです! https://fuqda.hatenablog.com/
storesjp
インターネットビジネスの企画・開発・運営、マーケティング、プロモーション、コンテンツの企画・制作
https://about.stores.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした