JavaScript
Rails
vue
vue.js
webpack

Rails と Vue.js でWebサービスの環境を作ってみた

はじめに

Railsを勉強し始めて、そろそろオリジナルでWEBサービス(比較サイト)を作ろうと思い、色々と調べつつ構築していったら勉強になったのでメモしていきます。今回は、Rails,Vueを使って開発したかったので、それに合わせた環境になっています。

環境

この記事では以下の環境(2018年7月9日時点)で動作確認できました。

  • Ruby: 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17]
  • Rails: 5.2.0
  • mysql2: (>= 0.4.4, < 0.6.0)
    • mysqlはdockerに作成してあります
    • Docker version 18.03.1-ce
  • yarn: 1.7.0
  • webpacker: (~> 3.5)
  • vue: ^2.5.16

参考にしたレポジトリ

プロジェクトを作る上で参考にした、サービスのレポジトリは以下です

プロジェクトの作成

$ rails new programming-school --database=mysql --skip-test-unit --skip-sprockets
  • --database=mysql : DBはMysqlに指定
  • --skip-test-unit : testをRSpec使うためにskipします(Rails5 で有効なオプション)
  • --skip-sprockets : アセットのコンパイルをしてくれるやつ。ビルドツールはwebpackがやるのでスキップ

DB接続を確認

config/database.ymlを編集

共通部分(一番上にある設定)にある設定の中の、passwordとhostを任意のに変更しましょう。hostは、127.0.0.1だと思います。127.0.0.1は自分自身を指す特別なIPアドレスです。

データベースを作成

$ rails db:create

実際に作成されたことが確認できるかと思います。

slim

slimの導入方法

Gemfile
...
gem 'slim-rails'
...

他の記述は省略しています。そして、bundle installを実行します。

その後、.erbを手で、.slimに変えました。

Rubocop

RailsではRubocopというgemを使うことで、プロジェクト全体のコーディング規約のルール化をすることができます。

Rubocopの導入方法

Gemfile
...
gem 'rubocop'
...

他の記述は省略しています。そして、bundle installを実行します。

bundle exec rubocop -v                                                                                                                                                                                      master
0.58.0

確認できました。

Rubocopの実行

$ bundle exec rubocop

おそらく何個か、Cと出力されると思います。そこはConventionという意味で、修正が必要な箇所を指します。その他に深刻度順で、W(Warning)、E(Error)、F(Fatal)があります。Fが一番深刻です。W以上の警告は必ず対応したほうがいいみたいです。

Rails導入時にデフォルトで配置されているファイルも警告されるので、Rubocopのルールの範囲から除外することもできます。

詳しくは、

http://vdeep.net/rubyonrails-rubocop

webpacker

Vueを導入するために、webpackerを導入していきます。

Webpackerとは

Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要なモノを提供してくれるgemです。Rails上でVueを実装しようと思うと、YarnやWebpackを使ったりすると、結構手間でったのが問題だったそうです。そこで、Webpackerを用いると、ある程度Railsの開発プロセスにのったJavaScriptの開発ができるみたいです。

これを導入するにあたって、参考になった記事があったので紹介します。

https://techlife.cookpad.com/entry/2017/03/27/161706

webpackerの導入方法

bundle exec webpacker:install

その後、Vueをインストールします。

bundle exec rails webpacker:install:vue

その後、プロジェクトのルートディレクトリに移動して、

$ bin/webpack-dev-server

を、 $ Rails sと並行して実行しておけば、フロント面のコンパイルが早くなります。


以上です!

この記事を読んだ方に

この記事を読んで、誤っている箇所をみつけたり、追記した方がいい内容などありましたら、編集リクエストやコメント欄で指摘していただけると助かります。

参考