【Rails6】jQuery / Bootstrap / Font Awesome の導入

はじめに

今回は下記の導入について、主にフロント周りの投稿となります。

1. jQuery

「フォローボタン」や「いいねボタン」など、ページ遷移を伴わない（非同期通信）機能の実装に必要です。
Bootstrapの一部機能でも必要になります。

2. Bootstrap

フロントエンドのフレームワークで、ナビゲーションバーやボタンなど、ページのデザインをかんたんに変更出来るようになります。
ドロップダウン機能など、jQuery以外にも popper.jsが必要になるため、この記事ではそちらも導入します。

詳しくはこちら
https://getbootstrap.jp/docs/4.3/getting-started/introduction/

※「JavaScript を必要とするコンポーネントを表示」を参照。popper.jsを必要とする機能を利用しないのであれば popper.jsは不要と思います。

3. Font Awesome

いい感じのアイコンが無料で利用出来ます。検索ボタンに虫眼鏡のアイコンを表示するといったことがかんたんに出来るようになります。

開発環境

• MacOS Catalina 10.15.7
• ruby 2.7.1
• rails 6.0.3.4

jQueryのインストール

ターミナルで実行します。

yarn add jquery

設定を追記します。constと module.exportの行は初期からあると思いますので、その間に追記します。

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'
  })
)

module.exports = environment

Bootstrapのインストール

ターミナルで実行します。

yarn add bootstrap popper.js

設定を追記します。

app/javascript/packs/application.js

require("bootstrap");

ファイルを作成します。

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

使い方

たとえばボタンリンクのデザインを変える場合はこんな感じです。

<%= link_to "ボタンに表示する文字列", リンク先, class: "btn btn-primary" %>

Font Awesomeのインストール

ターミナルで実行します。

yarn add @fortawesome/fontawesome-free

設定を追記します。

app/javascript/packs/application.js

require("@fortawesome/fontawesome-free");
import '@fortawesome/fontawesome-free/js/all';

ファイルを作成します。

app/javascript/stylesheets/application.scss

@import '@fortawesome/fontawesome-free/scss/fontawesome';

使い方

Font Awesomeのページにアクセスし、左上の検索フォームで検索します。

https://fontawesome.com/

「search」というワードで検索すると、検索結果に虫眼鏡アイコンを見つけることが出来ると思います。
検索結果をクリックするとアイコンのページに移動しますので、<i class="～～～></i>という部分をクリックするとコピーできます。

あとは viewテンプレートの使用したい部分に貼り付けるだけです！
たとえば検索ボタン（リンク）を設置する場合はこんな感じです。

<%= link_to 'リンク先' do %>
  <i class="fas fa-search"></i> 検索
<% end %>