Ruby on Rails 5.2 + Vue.jsでAnt Designを使う

今まで、自分で簡単なフロントエンドを実装するときはBootstrapを使ってきたが、最近は[Ant Design](https://ant.design)の出来が良さそうなので、少しずつこっちを使っていこうと思っている。Ant DesignはVue.jsにも対応しているので、Ruby on Rails、Webpacker、HAMLあたりと組み合わせて、手っ取り早くHerokuにデプロイできる環境の構築手順をまとめておく。

# 環境準備
`yarn`が必要になるので、ない場合はインストールしておく。Macの場合は`brew install yarn`でインストール可能。

記事作成時点でのRuby, Rails, Bundlerなどのバージョンは下記の通り

|名前|バージョン|
|---|--------|
|Ruby|2.4.1p11|
|Bundler|1.17.2|
|Rails|5.2.2|
|Yarn|1.12.3|

# 新しいプロジェクトの作成
```
rails new rails-vue-ant-exp -d postgresql --webpack=vue
```

新しいRailsプロジェクトを作成する。`--webpack=vue`を指定して、WebpackerでVueをコンパイルできるようにしておく。また、Herokuへのデプロイがしやすいように、データベースは`postgresql`にしておく。

## 一旦動作確認
```
rails db:create
rails s
```

DBの作成をして、一旦動作確認をしておく。`rails s`でサーバーを起動したらブラウザで http://localhost:3000/ を確認する。

## Haml導入
好みの問題だが、Hamlが好きなのでHamlを導入しておく。

```Gemfile
gem "haml-rails", "~> 1.0"
```
Gemfileに`haml-rails`を追加。

```
bundle
rails haml:erb2haml
```

インストールしたら、`haml:erb2haml`で`erb`を`haml`に変換する。

## 動作確認用コントローラ追加
この後Vueの動作確認をするときに使う用のコントローラを一つ追加する。

```
rails g controller Home index
```

```ruby:config/routes.rb
Rails.application.routes.draw do
  get 'home/index'
  root "home#index"
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
```

ルートにアクセスしたときに表示される画面を、今回追加したアクション`home#index`に設定する。
http://localhost:3000/ を確認して、`Home#index`が表示されることを確認する。

## Webpackerの動作確認
```app/views/home/index.html.haml
= stylesheet_pack_tag 'hello_vue'
= javascript_pack_tag 'hello_vue'
```

`index.html.haml`の最後に上の二行を追加し、Webpackerによって生成された`hello_vue`のcssとjsが読み込まれるようにする。一旦この状態で http://localhost:3000/ を追加して、`Hello world!`が追加されていることを確認する。

`hello_vue`は、`--webpack=vue`を指定してプロジェクトを作成した際に自動で作成されるVueのファイルで実体は`app/javascript/packs/hello_vue.js`にある。

`hello_vue.js`内部では更に`app/javascript/app.vue`の内容を読み込んでおり、Vueインスタンスの内容はこちらに定義されている。

```
<script>
export default {
  data: function () {
    return {
      message: "Foo bar"
    }
  }
}
</script>
```

試しに`message`の中身を変更して、Webpackerが正しくコンパイルをできることを確認しておこう。`http://localhost:3000/`をリロードしたら変更が反映されていることを確認する。

# Ant Designの導入
Ant Designは元々React用のライブラリだが、現在ではVue.js対応版が提供されているのでそちらを使用する。

https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce/

```
yarn add ant-design-vue
```

`yarn`でインストールする。

```hello_vue.js
import Vue from 'vue'
import Antd from 'ant-design-vue' // 追加
import App from '../app.vue'
import 'ant-design-vue/dist/antd.css' // 追加

Vue.use(Antd) // 追加
...
```

`hello_vue.js`内で`ant-design-vue`とそのCSSをインポートする。ボタンやテーブルなど、必要なコンポーネント単位でインポートすることも可能だが、重さが気にならなければ丸ごとインポートしてしまえばOK。

https://github.com/vueComponent/ant-design-vue/blob/master/docs/vue/getting-started.en-US.md

```app.vue
<template>
  <div id="app">
    <p>{{ message }}</p>
    <a-button type="primary">Hello Ant Design</a-button>
  </div>
</template>
...
```

テンプレートにボタン(`<a-button>`)を追加して、リロードしてみる。

<img width="486" alt="Screen Shot 2018-12-23 at 22.10.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/14097/8113e929-fa25-5df4-80c2-b913187598eb.png">

このように表示されれば成功。もし見た目が標準のボタンになってしまっている場合は、CSSの読み込みに失敗している可能性が高い。`= stylesheet_pack_tag 'hello_vue'`がちゃんと動いているか確認する。

<img width="918" alt="Screen Shot 2018-12-24 at 0.32.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/14097/ef6d8ea0-f9ae-b6c5-376e-ec16a71b7f93.png">

なお、Ant Designのコンポーネントのタグ名は、Examplesの右側のボタンをクリックするとコードが現れて確認できる。ここに気がつくのに結構時間がかかった…。

# Herokuにデプロイする
最後にHerokuにデプロイする。ここは普通にRailsアプリケーションをデプロイするときと同じ。

```
git add .
git commit -m "new rails project with haml, vue and ant design"
```

まずはローカルのgitレポジトリにコミット。

```
heroku create
git push heroku master
heroku open
```

その後、`heroku create`でHerokuアプリを作成。レポジトリにPushする。Webpackerを使うアプリのデプロイには結構時間がかかる…。

デプロイがうまくいったら`heroku open`でブラウザを起動して動作確認する。デプロイ直後は結構表示まで時間がかかる。