オリジナルアプリ開発#6【Font Awesome 5 導入】

現在、転職先の企業へのアピールポイントになるポートフォリオ作成（オリジナルアプリ開発）をしています。
私は、タスク管理ツールの完成を目指しています。

今回は、Font Awesomeを導入していきます。

##Webpackerでの導入

Webpackerとは

複数のJavaScriptファイルなどを1つにまとめて出力するツールであるwebpackを簡単にRailsアプリケーションに統合できるGemです。 Rails5.1から標準でサポートされています。

webpackとは

モジュールバンドラツールのことで、昨今のモダンなJavaScript開発で必須となりつつある仕組みです。

###Webpakcerがインストールされているか確認

Gemfile

gem 'webpacker', '~> 4.0'

Gemfileにwebpackerというgemがあることを確認します。

##Font Awesomeの導入
yarn を使っている場合、パッケージをインストールするには、yarn addコマンド を実行します。

ターミナル

yarn add @fortawesome/fontawesome-free

package.json ファイルには以下のコードが追加されます。

pacakge.json

{
  "name": "TaskApp",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3", // 追加される 
    "@popperjs/core": "^2.9.2",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",

    （以下、略）

次に、app/javascript/stylesheets/application.scssにFont Awesome のCSSを読み込みます。

app/javascript/stylesheets/application.scss

@import "bootstrap";

@import '~@fortawesome/fontawesome-free/scss/fontawesome'; // 追加

@import "custom";@import "custom";

次にyarnでインストールした Font Awesome のパッケージを利用できるようにimportします。

app/javascript/packs/application.js に以下のコードを追加します。

app/javascript/packs/application.js

（略）

import "../stylesheets/application"
import "@fortawesome/fontawesome-free/js/all" // 追加する
import "../js/hoge.js"

（略）

##Font Awesome が導入されたか確認
実際にFont Awesomeが機能するか確認します。

http://localhost:3000 にアクセスします。
ヘッダーの『リスト作成』右側にアイコンが表示されたので、うまく動作しました。

Font Awesome を導入することで、cssでアイコンを表示できました。

このアイコン名はFont Awesome の公式サイトから調べられます。

https://fontawesome.com/icons?d=gallery&p=2

今回は「edit」のアイコンを利用しています。

以上で今回のパートは終了です。