Rails 5.2 + Webpack で Fontawesome Pro 5 をNPMライブラリから使用する

## 概要
Rails 5.2にて、Fontawesome Proを導入する際、
公式ドキュメントの内容だけでは不足で、若干苦戦しましたので解説いたします。

macOS 10.13.5
Rails 5.2
FontawesomePro 5.1.0
YARN 1.7.0
Webpack 3.12.0
Webpacker 3.5.5

なお、Webpackを使用したフロントエンド周りの構築は、
以下の記事を参考にして構築したものです。
[新しいRailsフロントエンド開発（1）Asset PipelineからWebpackへ（翻訳）](https://techracho.bpsinc.jp/hachi8833/2017_12_26/49931)

Rails 5.2のWebpackを使用するプロジェクトの基礎が既にできており、
Yarnも使用できる状態であることを前提に解説いたします。

またFontawesomeProの利用は有料です。
専用のトークンが必要です。


## 手順
1. `.npmrc`の作成
2. ライブラリのインストール
3. `import`の記述
4. アイコンを使おう!

## 1. `.npmrc`の作成
FontawesomeProの利用には、各ユーザー専用のトークンが必要になりますが、  
`.npmrc`ファイルに設定を記述し、コミットしておくと他の環境でもパッケージのインストールが可能です。

まず、プロジェクトのルートディレクトリ(もしくは`package.json`と同じディレクトリ)に作成します。

```shell
touch .npmrc
```

作成した`.npmrc`をエディタなどで開き、以下の内容を記述します。

```
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken={TOKEN}
```

`{TOKEN}`の部分は、ご自身のトークンを記述してください。
Fontawsomeの有料ライセンスを契約していれば以下のページで確認できます。
https://fontawesome.com/account/licenses

## 2. ライブラリのインストール
以下のコマンドをプロジェクトのルートディレクトリで実行して、
fontawesomeの公式ライブラリをインストールします。

ここで公式のドキュメントには、
fontawesomeのコアファイルのライブラリをインストールする部分しか解説されておらず、
そのせいで時間を取られました。

```
yarn add @fortawesome/fontawesome-pro
```

> 2018.07.28 追記
なぜか基本的なアイコンしか使用できないことに気づき、再度調査をしたところ、
必要なパッケージは `@fortawesome/fontawesome-pro` のみでした。
これで全てのスタイルと全てのアイコンが使用できます。
`import`の方法についても追記修正しております。

~~上記コマンドの1行目は必須です。~~
~~2から4行目は必要なスタイルのライブラリとなりますが、~~
~~最低でもどれか一つはインストールしていないと使用できません。~~

~~- `fontawesome-pro-light`: 細いラインのアイコン~~
~~- `fontawesome-pro-solid`: 太いラインのアイコン~~
~~- `fontawesome-pro-regular`: 標準のラインのアイコン~~

~~上記のアイコンスタイルのライブラリは、~~
~~フリー版で提供されているアイコンも含まれていますが、~~
~~各企業のロゴなどのアイコンも使用する場合は、別途以下のコマンドで、~~
~~ブランドアイコンのライブラリのインストールが必要です。~~

## 3. `import`の記述
> 2018.07.28 追記
スタイルごとのパッケージのインストールもインポートも必要なく、
上記の1行だけのインポートで完了します。
多大なる間違いを訂正し、お詫び申し上げます。


インストールしたライブラリを使用するためロードさせる記述を解説いたします。
以下のコードは全てのスタイルを読み込ませているパターンです。

```js
import '@fortawesome/fontawesome-pro/js/all'
```

全てが必要なく、特定のライブラリだけ読み込ませたい場合は、
指定してロードさせることができます。

以下は全て記述していますが、必要なスタイルのもののみ選択してください。

```js
import '@fortawesome/fontawesome-pro/js/light'
import '@fortawesome/fontawesome-pro/js/regular'
import '@fortawesome/fontawesome-pro/js/solid'
import '@fortawesome/fontawesome-pro/js/brands'
```


## 4.アイコンを使う
あとはおなじみの`<i>`タグを、アイコン指定のクラスをつけて、
必要なところに配置していくだけですが、
`light` `solid` `regular`によってタグが少し異なります。

通常`<i>`タグのクラス名に`fa fa-{アイコン名}`というクラスが付きますが、
はじめの`fa`の部分の違いによって、アイコンのスタイルが変わります。

`fa` もしくは `far` だと通常の太さのアイコン(regular)
`fas` だと太いアイコン(solid)
`fal` だと細いアイコン(light)

またブランドロゴのiconは`fab`とつける必要があるみたいです。
[ブランドアイコンの一覧はこちら](https://fontawesome.com/icons?d=gallery&s=brands)

となりますので、必要におおじて使い分けてください。
※`import`の部分で、スタイルごとにパッケージを読み込んでいる場合は、
該当するスタイルのライブラリをロードしていないと使えません。

```html
<i class="fa fa-stroopwafel"></i> <!-- レギュラー -->
<i class="fas fa-stroopwafel"></i> <!-- ソリッド -->
<i class="fal fa-stroopwafel"></i> <!-- ライト -->
<i class="fab fa-500px"></i> <!-- ブランドアイコン -->
```

## まとめ
あまり時間をかけたくないところで時間がかかってしまい、
困りましたがなんとか解決できてよかったです。
公式ドキュメントもう少し親切に書いておいてほしい・・・

わかりにくいところや、間違っているところがございましたら、
ぜひともコメント頂けますと幸いです。


## 参考
[webpack - Font Awesome 5 Bundle via NPM - Stack Overflow](https://stackoverflow.com/questions/47711951/font-awesome-5-bundle-via-npm)
[Using a Package Manager | Font Awesome](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers)