Rails環境にUikitのデザインを適用する方法

# はじめに
Qiita初投稿です。
現在、Rails学習のためWebアプリケーションの作成に着手したところです。
フロントエンド側はBootstrap・Materialize以外のイケてるCSSフレームワークを採用したく模索したところ、
デザインが綺麗でコンポーネントが豊富な[Uikit](https://getuikit.com/)を発見しました。
本記事ではUikitをRailsで利用できるまでの手順を備忘録として残します。

# 実行環境
- Ruby on Rails 5.2.3
- Ruby 2.5.3
- Uikit 3.1.6

# 適用までの手順

### 【１】Uikit本家からcssとjavascriptをダウンロードする
[ここからダウンロード](https://getuikit.com/download)

ダウンロードすると以下のフォルダ/ファイル構成となっています。

```text:ファイル構成　(今回利用するものだけ記載）
uikit-3.1.6
 ├── css
 │   └── uikit.min.css　# ←今回使用するcss
 │
 └── js
     └── uikit-icons.min.js # ←今回使用するjs(アイコン用）
     └── uikit.min.js # ←今回使用するjs
```

### 【２】ダウンロードした各ファイルをRails環境に配置する
[Rails Guid](https://railsguides.jp/asset_pipeline.html#%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%81%AE%E7%B7%A8%E6%88%90)によると、cssとjsはユースケースに応じて以下の３つのいずれかに配置すると記載があります。

> 1. app/assetsは、カスタム画像ファイル、JavaScript、スタイルシートなど、アプリケーション自身が保有するアセットの置き場所です。
> 2. lib/assetsは、1つのアプリケーションの範疇に収まらないライブラリのコードや、複数のアプリケーションで共有されるライブラリのコードを置く場所です。
> 3. vendor/assetsは、JavaScriptプラグインやCSSフレームワークなど、外部の団体などによって所有されているアセットの置き場所です。


上記により、配置先は**３**が適切と思われます。それでは配置していきます。

#### ①ディレクトリ/ファイル作成
app/vendorディレクトリ配下にアセットファイル格納用のディレクトリを作成し、その中に【１】でダウンロードしたファイルをそれぞれ配置します。

```text
vendor
└── assets # ←ディレクトリ作成
    ├── javascripts　# ←ディレクトリ作成
    │   └── uikit-icons.min.js # ←配置
    │   └── uikit.min.js # ←配置
    │
    └── stylesheets　# ←ディレクトリ作成
        └── uikit.min.css # ←配置
```

#### ②マニュフェストファイルに上記の読み込み定義を追加
```app/assets/javascripts/application.js```と ```app/assets/stylesheets/application.scss``` に以下を記述します。

```javascript:app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require uikit.min  # ←追加
//= require uikit-icons.min　# ←追加
//= require_tree .
```

```scss:app/assets/stylesheets/application.scss
 *= require_tree .
 *= require_self
 */
 @import "uikit.min";　# ←追加
```

#### ③追加したディレクトリのパスを通すためRails再起動
再起動後、①で作成した```app/vender/assets```配下のパスが通っていることを
```rails console``` -> ```Rails.application.config.assets.paths```で確認します。

```ruby
> rails c
Loading development environment (Rails 5.2.3)
[1] pry(main)> Rails.application.config.assets.paths
=> ["/sample_app/app/assets/config",
 "/sample_app/app/assets/images",
 "/sample_app/app/assets/javascripts",
 "/sample_app/app/assets/stylesheets",
 "/sample_app/vendor/assets/javascripts",  # ←①のパスが存在することを確認する
 "/sample_app/vendor/assets/stylesheets",  # ←①のパスが存在することを確認する
 #<Pathname:/sample_app/node_modules>]

```

以上でUikitのCSSフレームワークが利用できる状態となっているはずです。

### 【３】動作確認
ここでは適当なViewにUikitの記述を追加し、スタイル/アイコン/JSが一通り表示・機能することを確認します。

```html:home.html.erb

<span uk-icon="heart"></span>

<br>
<br>

<span class="uk-label">Default</span>

<br>
<br>
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-light uk-background-secondary uk-padding">
            <h3>Light</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button class="uk-button uk-button-default">Button</button>
        </div>
    </div>
    <div>
        <div class="uk-dark uk-background-muted uk-padding">
            <h3>Dark</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button class="uk-button uk-button-default">Button</button>
        </div>
    </div>
</div>

<br>
<br>
<button class="demo uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Notification message'})">Click me</button>
```

（結果↓）
<img width="1440" alt="スクリーンショット 2019-07-21 22.40.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319375/2e974026-35c0-629c-da85-9a9cf2b60e9d.png">

# 参考
https://qiita.com/shi-ma-da/items/cb50ff7fdd9e21431b7c

http://romantist.jp/blog/rails%E3%81%AEassets%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B%E5%A0%B4%E6%89%80%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/