LoginSignup
3
5

More than 3 years have passed since last update.

@babiron_105(Kana Omori)

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

Last updated at Posted at 2019-12-11

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でサーバの起動は止めておく）

スクリーンショット 2019-12-10 17.29.18.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を通すとは、環境変数とは）

・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でサーバを止めておく

スクリーンショット 2019-12-10 19.15.14.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

　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

スクリーンショット 2019-12-12 11.40.34.png

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

あとがき :santa_tone1:

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

以上！

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
5