RailsでBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう

# なにこれ

今時RailsではyarnによりJS/CSSのパッケージ管理が出来るようになっています。
そうなるとBootstrapとかFont-AwesomeをわざわざGem経由して使うのってイケてなくない？
しかもRailsにWebpackerというモダンにJS/CSSが使えるようになるツールがあるんだから、
それ使おうぜ、っていう記事です。

# 手順

## 各種バージョン情報

Ruby: 2.6.1
Rails: 5.2.2
Node.js: 10.14.1
yarn: 1.7.0
Webpacker: 3.5.5
Bootstrap: 4.3.1
Font-Awesome(Free): 5.7.2

## サンプルについて

適当に`rails new`してrootのビューだけを作ったアプリにBootstrapもFont-Awesomeを導入します。
今回は既存のRailsアプリがWebpackerを導入する場合を考慮して、`rails new`時に`--webpack`オプションはつけませんでした。

こちらがまだ何もJS/CSSを当てられていない状態の画面です。

![RailsBootstrapTemplate.png](https://qiita-image-store.s3.amazonaws.com/0/254436/4b1bc41c-b4cb-afcd-4492-76d554e6918e.png)

こいつにBootstrapとFont-AwesomeのJS/CSSを当てていきます。

## Webpackerの導入

`Gemfile`に`webpacker`を追加して、インストールします。

```ruby:Gemfile
gem 'webpacker', '~> 3.5'
```

```bash
$ bundle install
```

Webpackerをプロジェクトにインストールします。

```bash
$ bundle exec rails webpacker:install
```

これでWebpackerを実行するための各種ファイルが生成されます。

それと、`app`以下に`javascript`ディレクトリが生成されますが、
基本的にここにWebpackerでビルドするJS/CSSを配置するようにします。
今はまだCSSを配置するためのディレクトリがないので、`app/javascript`以下に`src`というディレクトリを作成します。

```bash
$ mkdir app/javascript/src
```

その中に`application.scss`を作成しておきましょう。

```bash
$ touch app/javascript/src/application.scss
```

## Bootstrapの導入

yarnコマンドでBoostrapのライブラリを取得します。
今回は4.3.1を指定していますが、Bootstrap4系のJSはjQueryとpopper.jsに依存しているので、それらも同時に取得します。

```bash
$ yarn add bootstrap@4.3.1 jquery popper.js
```

次にBootstrapのJSを`app/javascript/packs/application.js`で、
CSSを`app/javascript/src/application.scss`でインポートします。
なお、Webpackerはビルドの際`app/javascript/packs`の中だけを参照するので、
`application.scss`がビルドされるように`application.js`でインポートしておきます。

```js:app/javascript/packs/application.js
import 'bootstrap'
import '../src/application.scss'
```

```scss:app/javascript/src/application.scss
@import '~bootstrap/scss/bootstrap';
```

今度はアプリケーションがWebpackerでビルドしたJS/CSSを読み込むよう設定する必要があります。
`app/views/layouts/application.html.erb`に以下の２文を追加しましょう。

```erb:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>RailsBootstrapTemplate</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

+    <%= javascript_pack_tag 'application' %>
+    <%= stylesheet_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
```

Bootstrapだけの導入でいいなら、これで完了です。

## Font-Awesomeの導入

yarnコマンドでFont-Awesomeを取得します。

```bash
$ yarn add @fortawesome/fontawesome-free
```
`yarn add font-awesome`とすると古い4系が入るので注意。

こちらもJS/CSSをインポートします。

```js:app/javascript/packs/application.js
import 'bootstrap'
+ import '@fortawesome/fontawesome-free/js/all'
import '../src/application.scss'
```

```scss:app/javascripts/src/application.scss
@import '~bootstrap/scss/bootstrap';
+ @import '~@fortawesome/fontawesome-free/scss/fontawesome';
```

## 起動する

ここまでの設定が完了していれば、あとはいつもので開発環境でアプリを起動しましょう。

```bash
$ rails s
```

ブラウザでページを表示しようとすると、Webpackerが自動でJS/CSSをビルドして、
`public/packs`以下にビルドしたJS/CSSが生成されてページで読み込まれます。

`bin/webpack`コマンドでビルドすることもできます。

```bash
$ bin/webpack
```

`bin/webpack-dev-server`を使えばファイルに変更があった場合、
それを検知して自動でビルドしてくたりもします。

```bash
$ bin/webpack-dev-server
```

うまくできていれば、こんな感じでBootstrapとFont-AwesomeのJS/CSSが適用されます。

[![Image from Gyazo](https://i.gyazo.com/1136c9ad2f956cd94563a810b96c2aa9.gif)](https://gyazo.com/1136c9ad2f956cd94563a810b96c2aa9)

<details><summary>サンプルコード</summary><div>

```erb:app/views/home/index.html.erb
<div class="container">
  <div class="jumbotron m-3">
    <h1 class="display-4">Hello, Bootstrap!</h1>
    <hr class="my-4">
    <p>This is the template of Ruby on Rails using Bootstrap.</p>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal">
      <i class="far fa-window-maximize"></i>
      Click here
    </button>
  </div>
  <!-- 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">
          Hello!
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
```
</div></details>

# サンプルのリポジトリ

https://github.com/rhistoba/rails_bootstrap_template

# おわり

これであなたもRailsのフロントで幸せになれるかもしれない。