【Rails6】text_areaのplaceholderにFontAwesome5を導入するまでに数時間費やした件。

はじめに

今回はplaceholderにFontAwesomeを導入したら、予想以上にかなり時間がかかってしまった(3~4時間ほど)ので、知識定着のためにアウトプットします。

以下完成イメージ

そもそもFontAwesomeとは？

気軽にネット上でよくみかけるアイコンを気軽に使えるツールのことです。
無料なのに豊富なアイコンを使用することができます！（有料もあるヨ）
https://fontawesome.com/

▼無料版アイコンを一部抜粋しました。

結論、以下のようにFontAwesomeを導入する

application.scss

 $fa-font-path: '@fortawesome/fontawesome-free/webfonts';
 @import '@fortawesome/fontawesome-free/scss/fontawesome';
 @import '@fortawesome/fontawesome-free/scss/solid';
 @import '@fortawesome/fontawesome-free/scss/regular';
 @import '@fortawesome/fontawesome-free/scss/brands';
 @import '@fortawesome/fontawesome-free/scss/v4-shims';

<%= f.text_area :content, size: "90x5", maxlength: "1000", placeholder: "\uf036", class: "fa" %>

#classで"fa"を指定するのを忘れないで！！！
#placeholderを指定する際に "\uf036"の\uを忘れないで！！！

これだけで簡単にFontAwesomeに必要なcssを当ててくれる！！

ワイが長時間悩んだ場所

結論、FontAwesome導入時にapplication.jsに記述した内容で不具合を起こしました。

application.js

import '@fortawesome/fontawesome-free/js/all';
// ↑この記述をコメントアウトしていなかった！！！！

▼こちらは、コメントアウトせずに表示されたtext_areaのviewはこちらです。(明らかにおかしい)

なぜimport '@fortawesome/fontawesome-free/js/all';の記述があることでFontAwesomeが読み込まれなくなるのか？

こちらのブログを参考にさせていただき、解決しました。

application.js

import '@fortawesome/fontawesome-free/js/all';

application.jsの記述の意味として、
node_modulesフォルダ内の@fortawesome/fontawesome-free/js/allファイルを参照しています。

javaScriptで使用できるFontAwesomeのパッケージをインストールしていますが、この記述があるとアイコンによるスライド移動ができなくなってしまいます。

上記参考にした記事の内容を抜粋しました。
この内容から考え出した仮説としては、
placeholderはドキュメントの内容を変更する性質を持ちます。（非同期でアイコンや文字が消える）
したがって、placeholderはjsの要素が含まれており、application.jsにimport '@fortawesome/fontawesome-free/js/all';の記述があることで動きのあるFontAwesomeのアイコンが使用できないので、表示ができなかったと思われます。

まとめ

ネットに書いてある記事を参考にして環境構築することは必要不可欠ですが、「なぜこの導入方法なのか？」を常に問いながら導入していくことの重要性を痛感しました。
また、さらに深掘りができる内容なので、また何かわかり次第Qiita更新します。（たぶん）

参考にさせていただいた記事

https://techtechmedia.com/font-awesome-rails6/
https://techtechmedia.com/slick-raills/
https://qiita.com/sasakura_870/items/7f72c80f89d66923f6f1
https://qiita.com/kou_pg_0131/items/9842a490936dff5b29ac