【Rails】BootstrapとFontAwesomeの導入

はじめに

課題で読んだ本の感想を投稿するアプリケーションを作りましたが、色々と苦戦しましたので備忘録として記事を投稿しようと思います。
今回はBootstrapとFontAwesomeの導入について記載します。

環境

• 開発 (cloud9)
• 言語 (Ruby 2.6.3)
• フレームワーク(Rails 6.1.6)

Bootstrapの導入

yarnでインストールする

導入方法はいくつかあるらしいのですが、今回はyarnでインストールします。

terminal

$ yarn add jquery bootstrap@4.5 popper.js

jquery…Bootstrapを動かすのに必要なjQueryです
bootstrap…Bootstrapの本体です
popper.js…機能を利用するのに必要なものらしいです

bootstrap@4.5の@4.5はBootstrapのバージョンになります。好みのバージョンを指定してください。ただし、Bootstrapのバージョン5はjQueryが必要ないそうです。今後、jQueryが必要になる機能を実装する予定があるのならバージョン4でいいかもしれません。

jQueryとPopper.jsを使えるようにする

environment.jsを編集して、jQueryとPopper.jsを利用できるようにします。

ファイルの場所は以下になります。
config/webpack/environment.js

config/webpack/environment.js

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

Bootstrapを使えるようにする

まず、app/javascriptに「stylesheets」という名前のフォルダを作成します。次に、作成した「stylesheets」の中に「application.scss」という名前のファイルを作成します。

作成した「application.scss」ファイルに、以下のコードを記述しましょう。

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

次は「application.js」にコードを追加します。

ファイルの場所は以下になります。
app/javascript/packs/application.js

app/javascript/packs/application.js

:
:

import "channels"

# ここから
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application" 
# ここまで追加

Rails.start()
Turbolinks.start()
ActiveStorage.start()

最後に「application.html.erb」を編集します。

ファイルの場所は以下になります。
app/views/layouts/application.html.erb

app/views/layouts/application.html.erb

:
:

  <!-- 変更前 -->
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

:
:

app/views/layouts/application.html.erb

:
:

  <!-- 変更後 -->
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

:
:

• stylesheet_link_tag の場合
  app/assetsにあるcssファイルを参照する

• stylesheet_pack_tag の場合
  app/javascriptにあるcssファイルを参照する

という仕組みのようです。例えばcssはapp/assets、JavaScriptはapp/javascriptというように管理を分けるという場合は、コードの記述を変更が必要になります。

これでBootstrapの導入は完了です。次はFontAwesomeの導入をします。

FontAwesomeの導入

yarnでインストールする

今回もyarnでインストールします。

terminal

$ yarn add @fortawesome/fontawesome-free@5.15.4

@5.15.4の部分はバージョンになりますので、好きなバージョンを指定してください。

FontAwesomeを使えるようにする

まず「application.js」にコードを追加します。

ファイルの場所は以下になります。
app/javascript/packs/application.js

app/javascript/packs/application.js

:
:

import "channels"

import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application" 
# 以下を追加
import '@fortawesome/fontawesome-free/js/all'

Rails.start()
Turbolinks.start()
ActiveStorage.start()

次に、先ほど作成した「application.scss」ファイルへコードを追加します。

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';
# 以下を追加
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

これでFontAwesomeの導入完了です。

最後に

記事をご覧いただきありがとうございました。
記事の内容に誤りや理解不足な点がありましたら、ご指摘いただけると幸いです。