Rails+Vue.js+Webpackerによる「Create, Read, Update, Destroy」処理のチュートリアルを記述する。
なお，前提知識として，Railsチュートリアル終了程度を想定する。

＜概要＞

■ 本記事の内容

チュートリアルに係る環境構築を実施する。
[Rails+Vue.js]の基本的な動作を確認する。
今回のコードは，GitHubの変更履歴で確認可能である。
- [First Commit]から[ファイル構成修正（次回の準備）]まで
本記事の参考URL

■ 記事共通

目次
実装機能
- お気に入りの本に係る登録，参照，編集，削除処理
- 非同期通信（Ajax）による[Rails+Vue.js]のCRUD処理
- SinglePageApplication（SPA）
- ユーザー登録機能（JWTによるトークン認証）
開発環境
- MacOS Mojave
- Ruby(2.5.1)
- Ruby on Rails(5.2.1)
- Vue.js(2.6.10)
- Yarn(1.17.0)
- Webpack(4.39.2)
学習情報URL
- Vue.js公式
- Vue Mastery(The Vue Instance)

＜本文＞

■ 追記: 初期設定の自動化

プロジェクトを生成からCSSフレームワークを導入（Materialize）までの項目を自動化しました。

もし、入力が手間となる場合は、上記の手順を一部省略可能です。

Rails ジェネレータを使って初期設定を自動化しよう！ - Qiita

■ プロジェクトを生成

$ rails new rails_vue_bookshelf --webpack=vue  --skip-test

[--webpack=vue]：プロジェクト生成時にVue.jsを同時にインストールするオプション
[--skip-test]：Minitestをインストールしないオプション（RSpecを想定）
参考URL
- 小さく薄くrails newする(ViewやJSが必要ない場合)
- 【Rails】generate コマンドで生成されるファイルをconfig.generatorsで設定する

■ バージョン管理(Git)の設定

1. $ git init
2. $ git add -A
3. $ git commit -m "First Commit"

■ [rails generate]時の生成ファイルの設定

config/application.rb

config.generators do |g|
  g.assets false
  g.helper false
end

参考URL
- rails generate で余分なファイルが生成されないようにする

■ foremanによるサーバの設定

Vue.js（Webpack）を開発する際は，[rails server]とは別に[bin/webpack-dev-server]を立ち上げ，開発の都度２つのコマンドを実行することから，一つのコマンドで同時起動の設定をするため，Gem[foreman]を使用する。

参考URL

○１：Gemfileに追加

Gemfile

group :development do
  ...
  gem 'foreman'
end

$ bundle install

○２：次のファイルを作成

Procfile.dev

web: bundle exec rails s
webpacker: ./bin/webpack-dev-server

bin/server

#!/bin/bash -i
bundle install
bundle exec foreman start -f Procfile.dev

foremanを起動するには，３行目を実行するだけで十分であるが，ここでは，外部コマンド(シェルスクリプトによるプログラム)を設定し，楽にサーバを立ち上げられるように設定した。

○３：パーミッションを変更

$ chmod 777 bin/server

ここでは，[bin/server]コマンドがデフォルトで実行が出来ないことから，実行可能に変更するためのコマンドである。
気になる方は，上記コマンド実行前に[\$ bin/server]を実行し失敗して，[$ ls -l bin]コマンドでアクセス権を確認してみてください。
参考URL

○４：設定完了

$ bin/server

http://localhost:5000 で[Rails default information page]（いつもの画面）が表示されたら成功
[bin/server]：Procfile.devのコマンドを実行
[Procfile.dev]：[rails s]と[bin/webpack-dev-server]を実行

■ CSSフレームワークを導入（Materialize）

Bootstrapでも良いが，本稿ではMaterializeを使用する。

Gemfile

gem 'materialize-sass'
gem 'material_icons'

$ bundle install

app/assets/stylesheets/application.scss

...
 *= require material_icons
 *= require_tree .
 *= require_self
 */
 @import 'materialize';

app/assets/javascripts/application.js

...
//= require materialize

注釈：[.css]から[.scss]へ変更すること。
参考URL
- 公式リファレンス
- 【Ruby on Rails】Materializeを導入する

■ 動作確認

○１：Controller及びViewを生成

$ rails g controller Home index

○２：View[index.html.erb]を修正

app/views/home/index.html.erb

<div id="app"></div>
<%= javascript_pack_tag 'hello_vue' %>

[id="app"]：Vue.jsのデータをマウントするエントリーポイントの設定（RailsとVue.jsの接続部分）
[javascript_pack_tag]：app/javascript/packs 配下にあるファイルの読み込み
参考URL
- Vue.js アプリケーションにおけるエントリーポイントの書き方メモ

○３：ルーティングの設定

config/routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
end

○４：動作確認

$ bin/server

http://localhost:5000 で[Hello Vue!]が表示されたら成功

■ ファイル構成修正（次回の準備）

○１：[hello_vue.js]を削除
○２：[application.js]を修正

app/javascript/packs/application.js

import Vue from 'vue'
import App from './App.vue'

const app = new Vue({
   el: '#app',
   render: h => h(App)
})

[application.js]：このファイルをRailsと繋げるエントリーポイントとして設定する。
[el:]：Railsのエントリーポイントとなる要素を指定
[render:h =>h(App)]：importしたApp.vueを指定要素にレンダリング
参考URL
- Vue.jsのrender: h => h(App)について調べた

○３：[app.vue]の名称及びディレクトリを修正

app/javascript/packs/App.vue

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        message: "Hello Vue!"
      }
    }
  }
</script>

<style scoped>
  p {
    font-size: 2em;
    text-align: center;
  }
</style>

Mustache構文[{{ }}]：内部では[script]タグで定義したdataプロパティ等をテキストとして展開可能である（「1+1」や「message + '???'」のようにJavascriptの式も展開可能）。
[data: function(){}]：Vueのdataプロパティやelプロパティは，全Vueインスタンスで同値が共有されることから，子コンポーネント側のdataプロパティは，オブジェクトではなく関数として定義する必要がある。
参考URL

■ Chromeに[Vue.js devtools]プラグインを導入

[Vue.js Devtools]は，Vue.jsの開発をサポートするChromeブラウザの拡張機能であり，dataの中身等の確認が容易になるため，導入することを推奨する。
使用方法は，Chromeデベロッパー・ツールから[Vue]タブを開く。

参考URL
- Vue.js devtools
- Vue.js Devtoolsの導入方法と機能まとめ。Vue.jsを用いた開発を効率化させよう！

〜Part１：環境構築編終了〜
〜Part２：Read編へ進む〜

■ [追記] 筆者の環境構築覚書

□ Rubocop 設定

言わずと知れた Ruby のコーディング規約を強制させる静的解析ツール
プロジェクトに参加するプログラマが，各々好きなコードの書き方をするとコードの可読性が損なわれるため，最低限のコードの書き方を強制させるために使用される。
規約は自由に設定できるが，デフォルトから設定するのは面倒であるため，ruby/rubocop-airbnb や，onk/onkcopなど，設定済みのライブラリを使用する。
ここは，筆者の好みで Airbnb で設定する。
参考URL

○1： Gemfileに追加

Gemfile

...
group :development, :test do
  gem 'rubocop-airbnb'
end
...

$ bundle install

○2：関連ファイル追加

.rubocop.yml

inherit_from:
  - .rubocop_airbnb.yml
AllCops:
  TargetRubyVersion: 2.5
  TargetRailsVersion: 5.2

  # ここで解析しないディレクトリやファイルを設定可能
  Exclude:
    - 'bin/**/*'
    - 'config/**/*'
    - 'db/**/*'
    - 'lib/**/*'
    - 'node_modules/**/*'
    - 'vendor/**/*'

.rubocop-airbnb.yml

require:
  - rubocop-airbnb

○3：解析実行

bash

# 基本コマンド
$ rubocop

# rubocop による解析結果を自動修正するオプション（修正されない箇所もあるため注意）
$ rubocop --auto-correct 
$ rubocop -a

[Rails+Vue.js]に係るCRUD入門〜Part１：環境構築編〜

＜概要＞

■ 本記事の内容

■ 記事共通

＜本文＞

■ 追記: 初期設定の自動化

■ プロジェクトを生成

■ バージョン管理(Git)の設定

■ [rails generate]時の生成ファイルの設定

■ foremanによるサーバの設定

■ CSSフレームワークを導入（Materialize）

■ 動作確認

■ ファイル構成修正（次回の準備）

■ Chromeに[Vue.js devtools]プラグインを導入

■ [追記] 筆者の環境構築覚書

□ Rubocop 設定