Railsアプリで外部提供のJavaScriptファイルを利用する

# はじめに

## 解説で利用したJavaScript

JavaScriptを読み込めているかをページの見た目で判断可能なので、解説には[Holder\.js](http://holderjs.com/)を利用します。

## Holder.jsとは

WEBサイト上にダミー画像を生成するJavaScriptです。

```html+erb:xxx.html.erb
<img data-src="holder.js/200x100" alt="image"/>
```

JavaScriptが正常に読み込まれてる場合は、ダミー画像が表示されます。

 ![rails-vendor-js01.png](https://qiita-image-store.s3.amazonaws.com/0/141934/d9969078-48ed-254b-ccd8-08af5487123b.png)

JavaScriptが正常に読み込まれてない場合は、ダミー画像が表示されなくなります。
（画像が読み込めない時の表示はブラウザによって異なります）

![rails-vendor-js02.png](https://qiita-image-store.s3.amazonaws.com/0/141934/888dbbe3-4297-0c86-b04c-947fed3557d7.png)

# 準備：JavaScriptファイルの配置

jsファイルをダウンロードして、`vendor/assets/javascripts`に配置する。
（[holder\.js](http://holderjs.com/)の場合はトップページからDL可能）

<img width="166" alt="rails-vendor-js03.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/05013033-ff7e-e7b7-6efb-d6e97d8586ae.png">

> 補足：
> Holder.jsはgemも提供されてますが、gemが提供されてないJavaScriptを利用するケースも想定して
> gemを利用しない手順で解説します。

# 複数のページで利用するJavascriptの場合

`app/assets/javascripts/application.js`でrequireすることで自動的に展開されるassetsの対象に含めることができるようになります。

```js:app/assets/javascripts/application.js
//= require holder
```

![rails-vendor-js06.png](https://qiita-image-store.s3.amazonaws.com/0/141934/a136919f-4c3f-ba29-a6dd-62f6e84589a2.png)

各ページでは明示的にインクルードしなくてもJavaScriptが利用することができるようになります。

```html+erb:app/views/xxx/xxx.html.erb
<img data-src="holder.js/200x100" alt="image"/>
```

 ![rails-vendor-js01.png](https://qiita-image-store.s3.amazonaws.com/0/141934/d9969078-48ed-254b-ccd8-08af5487123b.png)


# 特定のページで利用するJavascriptの場合

> 補足：こちらの投稿を参考にさせていただきました。
> [Railsでvendor/assets/javascripts以下にあるファイルを特定のページでのみ使用する \- Qiita](https://qiita.com/teitei_tk/items/bf444c6aa6398bde83bf)

特定のページで利用したい場合は`config/initializers/assets.rb`でプリコンパイルの対象に指定しておくことで、JavaScriptを明示的にインクルードさせることができるようになります。

```ruby:config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( holder.js )
```

```html+erb:app/views/xxx/xxx.html.erb
<%= javascript_include_tag "holder" %>
<img data-src="holder.js/200x100" alt="image"/>
```

![rails-vendor-js08.png](https://qiita-image-store.s3.amazonaws.com/0/141934/d32163e5-1907-57f8-d98c-8c17ca259d23.png)

 ![rails-vendor-js01.png](https://qiita-image-store.s3.amazonaws.com/0/141934/d9969078-48ed-254b-ccd8-08af5487123b.png)

# 補足：AssetNotPrecompiled in xxx エラーの解決方法

## 問題点
インクルードするJavaScriptがプリコンパイルの対象に含まれてなかった場合、ページへアクセスすると、**Sprockets::Rails::Helper::AssetNotPrecompiled in xxx**エラーが表示されます。

```html+erb:app/views/xxx/xxx.html.erb
<%= javascript_include_tag "holder" %>
<img data-src="holder.js/200x100" alt="image"/>
```

![rails-vendor-js07.png](https://qiita-image-store.s3.amazonaws.com/0/141934/b166346e-d3ab-94cd-662b-38e5e22d237e.png)

## 解決方法

エラーメッセージに従って`config/initializers/assets.rb`の追記とサーバ再起動を実施すれば、JavaScriptがインクルードされるようになります。

```ruby:config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( holder.js )
```

 ![rails-vendor-js01.png](https://qiita-image-store.s3.amazonaws.com/0/141934/d9969078-48ed-254b-ccd8-08af5487123b.png)

# 補足：Holder.js利用時の注意点

## 問題点

imgタグでsrcの指定を`src`としてもダミー画像は表示されますが、ブラウザによってはインスペクタ上で警告が出力される場合があります。

```html+erb:xxx.html.erb
<img src="holder.js/200x100" alt="image"/>
```

 ![rails-vendor-js01.png](https://qiita-image-store.s3.amazonaws.com/0/141934/d9969078-48ed-254b-ccd8-08af5487123b.png)

> 補足：Safarの警告メッセージ
> Failed to load resource: the server responded with a status of 404 (Not Found)

![rails-vendor-js04.png](https://qiita-image-store.s3.amazonaws.com/0/141934/b5a33e21-2989-8500-a07b-9fbacaecdae1.png)


## 解決方法

imgタグで`src`を`data-src`と修正することで警告が表示されなくなります。

```html+erb:xxx.html.erb
<img data-src="holder.js/200x100" alt="image"/>
```

![rails-vendor-js05.png](https://qiita-image-store.s3.amazonaws.com/0/141934/8344d5c5-35ff-d1fe-350f-ba9cdf25825f.png)