はじめに
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の導入方法
...
gem 'slim-rails'
...
他の記述は省略しています。そして、bundle installを実行します。
その後、.erbを手で、.slimに変えました。
Rubocop
RailsではRubocopというgemを使うことで、プロジェクト全体のコーディング規約のルール化をすることができます。
Rubocopの導入方法
...
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と並行して実行しておけば、フロント面のコンパイルが早くなります。
以上です！
この記事を読んだ方に
この記事を読んで、誤っている箇所をみつけたり、追記した方がいい内容などありましたら、編集リクエストやコメント欄で指摘していただけると助かります。
