エラーを乗り越えろ!! くじけないRuby初心者のRuby On Rails + Vue.js 環境構築(Ruby 2.6.4, Rails 6.0.1) 

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

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

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

　[Ruby初学者のRuby On Rails 環境構築【Mac】](https://qiita.com/TAByasu/items/47c6cfbeeafad39eda07)

　❶Homebrewはインストール済みだったので、アップデート
　❷rbenvもインストール済みだったので、Homebrewでアップデート
　❸一応`cat ~/.bash_profile`でrbenvのパスが通っているか確認
　❹せっかくなので今回は[本家サイト](https://www.ruby-lang.org/ja/downloads/)で安定版と書かれていた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でサーバの起動は止めておく）

![スクリーンショット 2019-12-10 17.29.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463891/ee9f0c80-efe9-f8b3-a2cf-ced1769b07f9.png)

#### 　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を通すとは、環境変数とは](https://qiita.com/fuwamaki/items/3d8af42cf7abee760a81)）


・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とかが動かない人へ](https://qiita.com/cyborg__ninja/items/d15b50500f4ffb069feb)）

・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 関係のエラーと解決方法](https://qiita.com/NaokiIshimura/items/8203f74f8dfd5f6b87a0)）


・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)](https://stackoverflow.com/questions/38663706/loaderror-could-not-load-the-listen-gem-rails-5?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)）


・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が実行できないときの対処法](https://qiita.com/KenAra/items/2708ce3d5c80c4f24920)）


・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で起動時にエラーとなってしまう。。。](https://teratail.com/questions/44421)）





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

　[【Rails6】10分でRails + Vue + Vuetifyの環境を構築する](https://qiita.com/Ryoga_aoym/items/e1d91351389904240594)

　❶--webpack=vueを指定してrails newでプロジェクトを作成する部分は、1.で作成したプロジェクト`blog`を使いたかったので、プロジェクト配下で、`bundle exec rails webpacker:install:vue`を実行し、既存のプロジェクトにVue.jsをインストール
　（cf. [webpackerを使ってRuby on Rails 6.0とVue.jsを連携する方法（フロントエンド編）](https://ubiqlog.com/archives/13845)）
　❷プロジェクト配下で`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でサーバを止めておく


![スクリーンショット 2019-12-10 19.15.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463891/9066cf05-fec4-7eef-ff92-664ada55c37c.png)


#### 　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の環境構築も完了

![スクリーンショット 2019-12-10 19.44.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463891/d7584c88-5526-51fb-f20b-91bd1abc6729.png)

#### 　3.の詰まった箇所

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


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

　[はじめてのVuetify(ログインページ作成で使い方学ぶ)](https://reffect.co.jp/vue/vuetify-first-time)

　❶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
```

![スクリーンショット 2019-12-12 11.40.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463891/8c51852c-9a52-436b-cf9c-8dad17859cd2.png)


　（cf. [Vuetifyでアイコンが表示されない](http://nullpoint.hatenablog.com/entry/2019/08/24/154218)、[Icons](https://vuetifyjs.com/ja/customization/icons#install-material-design-icons-js-svg)、[RailsでVuetifyを使えるようにしてみた](https://www.imanau-blog.site/posts/2019/09/10/rails-4.html)）


---

##### あとがき :santa_tone1:

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




以上！