Ruby On Rails　+ Vue.js　で何かを作りたいと思って環境構築し始めたところ、次々とエラーが出てきました。環境を構築したいだけなのにエラーで前に進めないのはとても辛いです。構築手順についてはわかりやすい先輩型のQiitaがあったので、今回はそれに沿って構築した際に、詰まった箇所とその対応策を備忘録としてまとめます。

参考文献に沿って構築　＋　詰まった箇所

1. まずはこの記事に沿って実行

　Ruby初学者のRuby On Rails 環境構築【Mac】

　❶Homebrewはインストール済みだったので、アップデート
　❷rbenvもインストール済みだったので、Homebrewでアップデート
　❸一応cat ~/.bash_profileでrbenvのパスが通っているか確認
　❹せっかくなので今回は本家サイトで安定版と書かれていたRuby2.6.5をインストール...しようと思ったら、listになかったので、2.6.4をインストールした
　❺Bundlerはインストール済みだったので、アップデート
　❻MySQLはHomebrewでインストール＆起動
　❼作業フォルダを作成して、作成したフォルダの中へ移動し、Rubyのバージョンを2.6.4に指定
　❽bundle initでGemfileを作成、vimでGemfileを開き、# gem "rails"のコメント解除して保存
　❾Railsをインストールしてバージョン確認
　➓Railsアプリを作成（blogという名前で今回はプロジェクトを作成）
　①Railsアプリ起動
　② http://localhost:3000/ にアクセスして、下記画面が出たら、Ruby On Railsの環境構築はOK!（いったんCtrl+Cでサーバの起動は止めておく）

　1.の詰まった箇所

・1-❸で、Qiitaだと、export PATH="~/.rbenv/shims:/usr/local/bin:$PATH"だったけど、
私の環境はexport PATH="$HOME/.rbenv/bin:$PATH"となっていた

: は区切りの意味。$PATHはPATHの設定に追加しますよって意味（つけないと、PATHの上書きになってしまうので、それまでの設定がなくなっちゃう）。
なのでQiitaの方は下記２つのパスが通っていることになる。

~/.rbenv/shims
/usr/local/bin

でも私の方は

$HOME/.rbenv/bin

しかパスが通ってないことなのかな、と思って、
echo $PATH　して見たら、~/.rbenv/shims、/usr/local/bin共にパス通っていたので、良しとする。

　（cf. Pathを通すとは、環境変数とは）

・1-➓で、bootsnapのLoadErrorが出てしまった

cannot load such file -- bootsnap/setup (LoadError)

　→ Gemfileにgem 'bootsnap', require: falseを追記し、bundle installし、もう一回プロジェクト作成コマンドを叩く(上書き聞かれたら全部Y)。ここで上書きするので、プロジェクト配下のconfig/boot.rbにrequire 'bootsnap/setup'の追記は自分でしなくて大丈夫

　（cf. bootsnapのせいでRails5.2とかが動かない人へ）

・1-➓で、webpackerがないためエラーになった

rails aborted!
Don't know how to build task 'webpacker:install' (See the list of available tasks with `rails --tasks`)

　→ Gemfileにgem 'webpacker', github: "rails/webpacker"を追記し、bundle installし、もう一回プロジェクト作成コマンドを叩く(上書き聞かれたら全部Y)
　（cf. Rails6 開発時につまづきそうな webpacker, yarn 関係のエラーと解決方法）

・1-➓で、yarnがないため警告がでる

Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/

　→ brew install yarnを実行してyarnをインストールし、もう一回プロジェクト作成コマンドを叩く(上書き聞かれたら全部Y)

・1-➓で、listenのエラーが出る

rails aborted!
LoadError: Could not load the 'listen' gem. Add `gem 'listen'` to the development group of your Gemfile

　→ ここはだいぶ詰まった。けど、プロジェクト配下のGemfileのdevelopmentの箇所に書かれているlistenの記述をコメントアウトし、それをまるっと、一個上の階層のGemfileに追記（gem 'listen', '>= 3.0.5', '< 3.2'）して、bundle install --with development testを実行して、もう一回プロジェクト作成コマンドを叩く(上書き聞かれたら全部Y)

　（cf. LoadError: Could not load the 'listen' gem (Rails 5)）

・1-➓で、yarnをアップデートせよと出た

error Found 1 errors.                                                                                                                                                                             


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).


yarn check v1.19.2
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.

　→ アップデートしても治らなかったので、プロジェクト配下のconfig/webpacker.ymlに記述されていた、check_yarn_integrityをfalseにした（２箇所あって、片方はfalseにすでになっていたのでそれはそのままにしてもう一個のtrueの方をfalseにした）ら、エラーが消えた

　（cf. yarnが原因でdocker-compose runが実行できないときの対処法）

・1-①で、railsコマンド使えないけど、といった感じのエラーがでる

Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.

　→ バージョン確認bundle exec rails -vの時のように、bundle exec railsを使って、プロジェクトblogに入ってbundle exec rails serverを実行したら無事起動した！

HOGEGE-no-Air-2:pra_ruby HOGE$ cd blog/
HOGEGE-no-Air-2:blog HOGE$ bundle exec rails server
=> Booting Puma
=> Rails 6.0.1 application starting in development 
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.1 (ruby 2.6.4-p104), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
* Listening on tcp://[::1]:3000
Use Ctrl-C to stop

　（cf. bundle exec rails serverで起動時にエラーとなってしまう。。。）

2. 次にVue.jsを下記記事に沿って追加

　【Rails6】10分でRails + Vue + Vuetifyの環境を構築する

　❶--webpack=vueを指定してrails newでプロジェクトを作成する部分は、1.で作成したプロジェクトblogを使いたかったので、プロジェクト配下で、bundle exec rails webpacker:install:vueを実行し、既存のプロジェクトにVue.jsをインストール
　（cf. webpackerを使ってRuby on Rails 6.0とVue.jsを連携する方法（フロントエンド編））
　❷プロジェクト配下でbundle exec rails sを実行し、サーバーを起動（bundle exec rails serverでもok）、確認終わったらCtrl+Cで止めておく
　❸プロジェクト配下でbundle exec rails db:createを実行し、DBを作成
　❹プロジェクト配下でbundle exec rails g controller home indexを実行し、コントローラーを作成
　❹プロジェクト配下のconfig/routes.rbを編集してルーティングを設定
　❺プロジェクト配下にできていたapp/views/home/index.html.erbを編集して、再びプロジェクト配下でbundle exec rails sを実行し、サーバーを起動
　❻ http://localhost:3000 に接続して以下の画面が表示されればVueの環境構築は完了。確認終わったらCtrl+Cでサーバを止めておく

　2.の詰まった箇所

(※特にどこもひっからなかった。強いてあげれば、1.同様、railsコマンドは全て、bundle exec railsに置き換えてプロジェクトは以下で実行した部分)

3. 次に2.と同じ記事を参考におまけでVuetifyを追加

　❶yarn add vuetifyをそのままプロジェクト配下で投げ、yarnを使ってvuetifyをインストール
　❷プロジェクト配下のapp/javascript/packs/hello_vue.jsを編集し、vuetifyを読み込ませる
　❷プロジェクト配下のapp/javascript/app.vueを編集し、Vuetifyで表示させるファイルを作成
　❹プロジェクト配下でbundle exec rails sを実行し、サーバーを起動
　❻ http://localhost:3000 に接続して以下の画面が表示されればVuetifyの環境構築も完了

　3.の詰まった箇所

(※特にどこもひっからなかった。強いてあげれば、1.2.同様、railsコマンドは全て、bundle exec railsに置き換えてプロジェクトは以下で実行した部分)

4. せっかく環境が整ったので、下記記事を参考にログイン画面にしてみる

　はじめてのVuetify(ログインページ作成で使い方学ぶ)

　❶Vuetifyの追加 yarn add vuetify
　❷下記２ファイル（hello_vue.js,app.vue）の編集
　❸http://localhost:3000 に接続して確認

app/javascript/packs/hello_vue.js

hello_vue.js

import Vue from 'vue'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import App from '../app.vue'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify,{
     iconfont:'md'||'mdi'
 });
const vuetify = new Vuetify();

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    vuetify,
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

app/javascript/app.vue

app.vue

<template>
  <v-app id="app">
   <v-card width="400px" class="mx-auto mt-5">
    <v-card-title>
     <h1 class="display-1">ログイン</h1>
    </v-card-title>
    <v-card-text>
      <v-form>
        <v-text-field label="ユーザ名"   prepend-icon="mdi-account-circle"/>
        <v-text-field v-bind:type="showPassword ? 'text' : 'password'" label="パスワード" prepend-icon="mdi-lock"
                      v-bind:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showPassword = !showPassword" />
        <v-card-actions>
         <v-btn class="info">ログイン</v-btn>
        </v-card-actions>
      </v-form>
    </v-card-text>
   </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () =>({
    showPassword : false
  })
}
</script>

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

　4.の詰まった箇所

　・4-❸でアイコンが出ない

　→ パッケージのインストールが必要だったので、下記２コマンドをプロジェクト配下で実行したら、無事に表示されるようになった！

yarn add material-design-icons-iconfont
yarn add @mdi/font

　（cf. Vuetifyでアイコンが表示されない、Icons、RailsでVuetifyを使えるようにしてみた）

あとがき

環境構築でエラーがたくさんだと、ちょっと挫けかけますね。。でもなんとか構築できてよかったです。
初めてVuetifyを使いましたがこんなに簡単に今時の画面になるとは驚きでした。
今回は教本（記事）に沿っただけだったので、次はカスタマイズに挑戦したいです！

以上！