【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の行は初期からあると思いますので、その間に追記します。
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
設定を追記します。
require("bootstrap");
ファイルを作成します。
@import '~bootstrap/scss/bootstrap';
使い方
たとえばボタンリンクのデザインを変える場合はこんな感じです。
<%= link_to "ボタンに表示する文字列", リンク先, class: "btn btn-primary" %>
Font Awesomeのインストール
ターミナルで実行します。
yarn add @fortawesome/fontawesome-free
設定を追記します。
require("@fortawesome/fontawesome-free");
import '@fortawesome/fontawesome-free/js/all';
ファイルを作成します。
@import '@fortawesome/fontawesome-free/scss/fontawesome';
使い方
Font Awesomeのページにアクセスし、左上の検索フォームで検索します。
「search」というワードで検索すると、検索結果に虫眼鏡アイコンを見つけることが出来ると思います。
検索結果をクリックするとアイコンのページに移動しますので、<i class="~~~></i>
という部分をクリックするとコピーできます。
あとは viewテンプレートの使用したい部分に貼り付けるだけです!
たとえば検索ボタン(リンク)を設置する場合はこんな感じです。
<%= link_to 'リンク先' do %>
<i class="fas fa-search"></i> 検索
<% end %>
Author And Source
この問題について(【Rails6】jQuery / Bootstrap / Font Awesome の導入), 我々は、より多くの情報をここで見つけました https://qiita.com/masarashi/items/7f27aa4340b0563ed51e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .