Rails6プロジェクトでBootStrap+jQuery+FontAwesomeの環境を構築する

Rails6でポートフォリオを作成する際、
環境構築の為に参考にした記事がほとんどRails5でしたので、Rails6での環境構築手順を残しておきます。

この投稿でやろうとしている事は、Rails6にて
①WebPacker環境でJavaScriptとCSS(SCSS)を使えるようにする
②Gemを使用せずに下記が使える環境を構築する
・BootStrap
・JQuery
・FontAwesome
って感じです。

Rails5までは標準のモジュールバンドラーとしてsprocketsが使われていましたが、
Rails6からはWebpackerがデフォルトでインストールされています。
だったら、WebPackerでJSとCSSを扱いたいっていうのと
わざわざBootStrap等をGem経由で使用せずに、yarnでパッケージ管理をしようって話です。

間違っている点等あれば、ご指摘いただければと思います。
※RailsプロジェクトはNewしている前提です。

## 環境
MacOS Catalina
Rails 6.0.3.2
Ruby 2.6.3

## yarnで必要なパッケージを追加する
``` 
yarn add bootstrap jquery popper.js @fortawesome/fontawesome-free
```
ターミナルから上記コマンドを実行し、bootstrap4とFontAwesome5をインストールします。
jqueryとpopper.jsはbootstrapを動かすために必要になります。

## jsでBootStrapとFontAwesomeをインクルードする
```ruby:app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

/* 以下追加 */
require('jquery')
require("bootstrap")
require("@fortawesome/fontawesome-free");
/* javascript個別読み込み */
require('users.js')
import '../src/application.scss'
```

ファイルを作成し、BootStrapとFontAwesomeを動かすためのrequireを追記します。
ちなみに、jQueryはyarnでインストールしているので追記しなくてもBootStrapは動きますが
使っていることを明示的に示すため追記しています。

個別でJavaScriptのファイルを作成し読み込みたい場合は、
app/javascriptの配下にファイルを設定し、require行を追記すればOK。
(上記例では、「users.js」を個別で読み込んでいる)

## cssでBootStrapとFontAwesomeをインポートする

```scss:app/javascript/src/application.scss
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
/*個別にCSSを読み込ませる*/
@import "users";
```

少し気持ち悪いですが、CSSはjavascript/srcフォルダの中に作る運用としています。
application.scssを作成し、インポートを記述します。
ViewごとにCSSを適用したい場合は、同ディレクトリにscssファイルを作成し最後行のようにimportを追記すればOK。
(上記の例では、「users.scss」を読み込んでいる)

## jQueryをすべてのpackで使えるようにする
```javascript:app/config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// 以下追記
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)

module.exports = environment
```

jQueryは多くのpackで使用されていますが、今のままでは各packの冒頭に下記の記述が必要。

```javascript
import $ from 'jquery';
```
environment.jsに追記することで、全てのpackでjQueryを使用することができます。

## jsとcssをpackで使用するためのレイアウト設定

```erb:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html  lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Railsapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- 以下2行修正 -->
    <%= stylesheet_pack_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  
  <body>
    <%= render 'header' %>
    <main><%= yield %></main>
    <%= render 'footer' %>
  </body>
</html>

import $ from 'jquery';
```

jsとcssの読み込み行をwebpack用の設定に修正します。
Rails5までは下記のような記述になっていると思いますが、これはassetsで使用する場合の設定になります。

```erb:app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
```

webpackerでもassetsでも使用したいという場合は、どちらも記述すればどちらでも使用可能です。


## 動作確認
以上までの設定で、Gemを使用せずにBootStrapやjQueryが利用できます。
BootStrap・jQuery・FontAwesomeを使用するコードを記述し、動作を確認しましょう。

## FontAwesomeがちょっと不便
Gemを利用せずに環境を構築できたのでスッキリしましたが、
FontAwesomeを使用する際に、「icon」メソッドを使えないのはちょっと不便。

以下は同じ意味の行ですが、iconメソッドを使ったほうが簡単に書けます。

```erb
<%= icon('far', 'clock') %>
<i class="far fa-clock"></i>
```

まぁそこまで手間ではないですが、何かiconメソッドを使える方法ないのかなぁ。

## 終わりに
Rails6のプロジェクトを新規で作る場合、Webpack運用する場合が多いと思うので
上記手順に慣れていきたい所ですね。