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をインクルードする
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をインポートする
@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で使えるようにする
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の冒頭に下記の記述が必要。
import $ from 'jquery';
environment.jsに追記することで、全てのpackでjQueryを使用することができます。
jsとcssをpackで使用するためのレイアウト設定
<!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で使用する場合の設定になります。
<%= 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メソッドを使ったほうが簡単に書けます。
<%= icon('far', 'clock') %>
<i class="far fa-clock"></i>
まぁそこまで手間ではないですが、何かiconメソッドを使える方法ないのかなぁ。
終わりに
Rails6のプロジェクトを新規で作る場合、Webpack運用する場合が多いと思うので
上記手順に慣れていきたい所ですね。