Railsアセットパイプラインのpathにvendor/assetsを設定する方法

実行環境

• ruby 2.5.0
• Rails 5.2.0

目次

1. プラグイン/ライブラリファイルの各々の保存場所について
2. vendor/assetsにpathを通す方法

1. ファイルの各々の保存場所について

用途によって3つに分けられます！

1. app/assets ・・・アプリ全体として共通管理するファイルや独自のファイルを置く（app/assets/javascripts/application.jsとか、app/assets/javascripts/posts.coffeeとか）

2. lib/assets ・・・アプリケーション外で共通のもの

3. vendor/assets ・・・ サードパーティ（外部ベンダーが提供したもの、プラグインとかライブラリ）　←今日まとめるのはココ！

2. vendor/assetsにpathを通す方法

ファイル構造

vendor
└── assets
    ├── javascripts
    │   └── tagsinput.js # ←今回使用するプラグイン
    └── stylesheets
        └── tagsinput.css # ←今回使用するプラグイン

外部のライブラリをvendor/assets配下に配置します。
配置した後は、app/assets/javascripts/application.js　や app/assets/stylesheets/application.scss のマニュフェストファイルに読み込むよう記述します。

app/assets/javascripts/application.js

//= require rails-ujs
//= require activestorage
//= require jquery3
//= require jquery_ujs
//= require popper
//= require tagsinput # ←今回このプラグインを使用したいため、新たに記述
//= require bootstrap
//= require bootstrap/customize
//= require_tree .

app/assets/stylesheets/application.scss

@import "bootstrap";
@import "font-awesome";
@import "bootstrap/custmize";
@import "tagsinput"; # ←今回このプラグインを使用したいため、新たに記述

以上で、設定は完了なのですが。。。

pathが通ってないと使えません。

当たり前ですが
そこで、次にpathが通っているのか確認します。

rails c #コンソールを起動
> Rails.application.config.assets.paths #pathを確認

今回確認したらpath通っていたためpathを通す作業は不要でした。

=> ["/Users/username/app_name/app/assets/config",
 "/Users/username/app_name/app/assets/images",
 "/Users/username/app_name/app/assets/javascripts",
 "/Users/username/app_name/app/assets/stylesheets",

 "/Users/username/app_name/vendor/assets/javascripts",
　# ↑vendor/assets/javascriptsにpathが通っているのでその直下のファイル名をapplication.jsに記述して使う
 "/Users/username/app_name/vendor/assets/stylesheets",
　# ↑vendor/assets/stylesheetsにpathが通っているのでその直下のファイル名をapplication.scssに記述して使う

---

pathが通っていない場合も今後の自分のために書いときます（試すときがきたら以下の記述は修正します）

vendor/assets配下にpathが通ってない

=> ["/Users/username/app_name/app/assets/config",
 "/Users/username/app_name/app/assets/images",
 "/Users/username/app_name/app/assets/javascripts",
 "/Users/username/app_name/app/assets/stylesheets",

# 下記の記載がない場合、pathが通っていない
#  "/Users/username/app_name/vendor/assets/javascripts"
#  "/Users/username/app_name/vendor/assets/stylesheets"

config/initializers/assets.rbに以下を記述

Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "stylesheets")
Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "javascripts")

# 記述が完了したらサーバーを再起動して読み込ませる。[ctr + c]→[rails s]

これでマニュフェストファイルに「vendor/assets/javascripts」と「vendor/assets/stylesheets」以下のファイル名で記述すると使えるようになります。