【初心者向け】Rails5.1 + vue.jsでアプリを作る

## はじめに
最近は久しくRubyを書いていなく、うずうずしていたのとちょうどvue.jsがいいと言うのを聞いたので、これらを組み合わせてアプリケーションを作ってみようと思いました。

かなり流行からは遅れていますが、これから初めてつくるという人の参考になればいいなと思ってまとめました。

タイトルに【初心者向け】と書きましたがとはいえ、これからプログラミングを始めるという方には向いていません。railsのことを多少知っている方が対象になります。ごめんなさい:bow:

**実行環境**
- ruby 2.5.0
- rails 5.1.4
- yarn 1.3.2

今回は環境構築まで

## この記事を読んで分かること:innocent:
- Railsとvue.jsの連携方法

## この記事を読んでもわからないこと:thinking_face:
- Railsプロジェクトそのものの作り方
- RailsとJSの設計など


## プロジェクト作成:point_up:
```terminal
mkdir vue-app //ディレクトリ作成（名前は何でも大丈夫です）
cd vue-app
rails new vue-app --webpack=vue 
```

webpackに関しては以下の記事で詳しく説明してくれていたので参考までに。
[Webpackってどんなもの？ - Qiita](https://qiita.com/kmszk/items/45fb4690ace32216ca25)


オプションで`--webpack=vue`をつけると、webpackとvue関連のパッケージも一緒にインストールしてくれるようです。

ちなみに、reactやangularを使いたい場合は
`--webpack=react`や`--webpack=react`とすればインストールされます:+1:

## サーバーの設定:v:
railsは`rails server`コマンドで、実行サーバーを立ち上げる事ができます。

が、しかし同時に別途で`webpack-dev-server`というコマンドを利用して、
ビルドサーバーを立ち上げる必要があります。
その為に両方を一度に立ち上げる事ができる`gem`を利用します。

そう`foreman`です。
こちらも説明は省略しますが、以下の記事が説明してくれています。
[foreman で アプリケーションを動かす。 - Qiita](https://qiita.com/7kaji/items/6a59977d2ad85604e7fd)

なにはともあれ、まずはGemfileに追記をしましょう


```Gemfile:vue-app/Gemfile
group :development do
...
  gem 'foreman'
end
```

 続いて`bundle install`を行ってください。
 
 ちなみに、`bundle install`をするときは、
`--path vendor/bundle`でパスの指定をしたほうが良いです。

 普通に`bunlde install`をすると、システムのrubyにインストールされてしまうので、他プロジェクトをまたいでgemのバージョン管理を行いたい場合に都合が悪くなります。
 
 一回`bundle install --path vendor/bundle`とコマンドを叩くと、
`vendor/bundle`以下にインストールされます。

 また、vue-app/.bundle/configファイルに以下の記述が追記され、次回以降はオプションを付ける必要がなくなるようです。
 
 [railsでbundle installする時にインストールパスを指定 - Qiita](https://qiita.com/osamtimizer/items/3a241f365c85356394a8)
 
 
```vue-app/.bundle/config
 ---
BUNDLE_PATH: vendor/bundle
BUNDLE_DISABLE_SHARED_GEMS: '1'
```

すこし横道に逸れましたが、続きです。
プロジェクトのルートに設定用の`Procfile`を新しく作ります。

``` Procfile:vue-app/Procfile
rails: bundle exec rails server
webpack: ./bin/webpack-dev-server
```

それぞれ上で説明したサーバー立ち上げ用のコマンドです。


そして、`foreman start`とコマンドを叩いて、
`http://localhost:5000`にアクセスすると
（foremanで立ち上げるとデフォルトで5000番のポートが指定されるようです。）

<img width="1429" alt="スクリーンショット 2017-12-12 23.38.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/140786/f832965f-fad2-e0a8-0744-42d79aade21f.png">
とおなじみのrails画面が表示されれば、成功です！:raised_hands:

## 画面を表示してみる:ok_hand:

最後は、vue.jsで書かれた文字を画面に出力してみましょう。
ということで、まずはページを作ります

```
rails g controller top index
```
でページ表示に必要なファイルを生成したら、
`foreman start`とコマンドを叩いて、サーバーを起動したら
`http://localhost:5000/top/index`

にアクセスができることを確認してください。

次に、vue関連のファイルを読み込めるようにするために、
`application.html.erb`に以下の一文を追加します。

``` application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>VueSample</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+   <%= javascript_pack_tag 'hello_vue' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
```

これでもう一度`http://localhost:5000/top/index`にアクセスすると、
以下の画像の画面が表示されるようになったかと思います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140786/7f40a936-f277-65f7-baa9-ba672c619402.png)

今回はこのまま、このページとの連携をしてみたいと思います。

`application/top/index.html.erb` に以下の文章を追加します。

```application/top/index.html.erb
<h1>About#index</h1>
<p>Find me in app/views/top/index.html.erb</p>

+ <div id='hello'>
+ {{message}}
+ <app></app>
+ </div>
```

そして、`app/javascript/packs/hello_vue.js`の修正をします。

もともと幾つか記入がされているかと思いますが、

```js:app/javascript/packs/hello_vue.js
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#hello',
    data: {
      message: "Can you open this page?"
    },
    components: { App }
  })
})
```

の記述だけを残してあとはコメントアウトしておいてください。

この状態で、再び`http://localhost:5000/top/index`にアクセスすると、
`#hello`で指定した文字がページに表示されるかと思います。:raised_hands:

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140786/5fe8f15f-016a-0322-c80a-00812203253d.png)


今回はRailsのアプリケーションとvue.js連携をさせるところまで説明しました。
このままだとあまりにも自由度が低すぎるので、もう少し自分の環境が整ったらまた更新したいと思います。:pray:

## まとめ
- `rails new vue-app --webpack=vue`でアプリケーション作成時にvue関連のファイルもまとめて生成してくれる
- gem`foreman`をいれて`foreman start`でdev-serverとrails-serverを同時に立ち上げられる

参考:
[Webpackってどんなもの？ - Qiita](https://qiita.com/kmszk/items/45fb4690ace32216ca25)
[foreman で アプリケーションを動かす。 - Qiita](https://qiita.com/7kaji/items/6a59977d2ad85604e7fd)
[railsでbundle installする時にインストールパスを指定 - Qiita](https://qiita.com/osamtimizer/items/3a241f365c85356394a8)
[Rails と Vue.js の設計覚書 - Qiita](https://qiita.com/midnightSuyama/items/efc5441a577f3d3abe74)