Ruby on Rails + Vue.js + vuetifyの環境構築。5日でマスター – 1日目

プログラミング

こんにちは。現役フリーランスWebエンジニアの@Masaweb4です。
元々はサーバーサイド。現在はフロントエンドエンジニアとして活動中で企業に常駐し開発業務に携わっています。

ぜひ、最後までご覧ください。

Webエンジニアであれば、Rubyを使う機会があるかもしれません。

  1. Rubyって需要あるの?
  2. 転職には有利?
  3. 習得にどれくらいかかるんだろう
  4. Ruby on Railsどんな感じ?

もちろん需要はあります。転職に有利かどうかは、プログラム言語だけでは決まらないと思うので。時間がないので5日でRuby on Railsで開発の基礎くらいはやれたらいいですね。

Rubyに興味ある人に向けて5回に分けて環境構築から簡単なアプリ作成までしてみたいと思います。サーバーサイドはRuby on Rails。それだけではつまらないのでフロントエンドはVue.js使ってやってみたいと思います。

Ruby on Railsの需要は

Rubyの需要は

サーバーサイドの言語であれば、PHP, Java, Pythonあたりでの開発が多いですが、地味にRubyのプロジェクトもあります

未経験からWebエンジニアを目指すのであれば、この機会にRubyを学んでおくとPHP, Javaに比べて開発者の人数も少なめなので評価を受けやすいかもしれません。

Rubyといえば、「Ruby on Rails」です。言語と一緒にフレームワークの使い方も学んでみよう。

5日あれば文法学んでRuby on Rails使えるようになると思います。Vue.jsはおまけ程度に考えてください。では1日目。

Ruby on Railsの開発環境を簡単に作る

開発環境構築

開発に必要なもの

開発に必要なもの

  • Ruby
  • Rails

Ruby on Railsの動作を確認するだけなら、RubyとRailsの二つがインストールされていれば、動かすことは可能です。

ただ、エディターなどある方がコーディングしやすいのでお好みのエディターをインストールして使うとよいと思います。

僕の環境はMac(かなり古い)です。エディターはVSCodeを使っています。仕事ではRubyMineを使っています。とりあえず動作確認で使うため今は何でもよいです。

今回の環境

マシンスペック

  • macOs Catalina 10.15.4
  • CPU Corei7
  • メモリ8GB

MacにはRubyは最初からインストールされていると思いますが、バージョンは使用したいバージョンに合わせると良いと思います。

HomeBrewをインストール

Homebrew

Homebrewのサイトに行き、「インストール」という文字の下にあるコマンドをコピーし、ターミナルを起動し実行します。

Node.js、yarnをインストール

先にNode.jsをインスールしておきます。Rails6からはyarnも必要になっているためインストール。

$ brew install node
$ brew install yarn

Rubyインストール

僕は最新版をインストールします。以下のコマンドを実行。

$ brew install ruby

Railsインストール

以下のコマンドを実行。gemについてはいろんなサイトで紹介されているため、別で調べてみてください。

$ gem install rails

バージョンの確認

インストールが正しくされていると、以下のようにバージョンを確認できます。

$ node -v
v14.1.0
$ ruby -v
ruby 2.6.3p62
$ rails -v
Rails 6.0.2.1

Railsアプリの動作確認

動作確認

Ruby on Rails + Vue.js + Vuetifyの環境を作る

開発するディレクトリに移動し、以下のコマンド実行。「RailsVueApp」はご自分の好きな名前に。そうすると、ダーっとファイルが作成されていきます。

アプリ名は好きな名前で。オプション付けて実行「–webpack=vue」

$ rails new RailsVueApp --webpack=vue

サーバーが起動したらブラウザを起動し、以下のコマンド実行後に「localhost:3000」と入力し叩いてみてください。以下の画面が表示されたら成功です。

$ cd RailsVueApp
$ rails s

localhost:3000

Homeコントローラーを作っていきます。関連するファイルをつらつらと作ってくれる。

$ rails g controller Home index
Running via Spring preloader in process 64245
      create  app/controllers/home_controller.rb
       route  get 'home/index'
      invoke  erb
      create    app/views/home
      create    app/views/home/index.html.erb
      invoke  test_unit
      create    test/controllers/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/home.scss

コントローラーの中身も出来ています。

home_controller.rb

class HomeController < ApplicationController
  def index
  end
end

/RailsProject/RailsVueApp/app/javascriptの中にhello_vue.jsというファイルが生成されていて、それをlayoutのファイルに読み込ませる。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>RailsVueApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
    <%= javascript_pack_tag 'hello_vue' %>
    <%= stylesheet_pack_tag 'hello_vue' %>
  </body>
</html>

homeをルートに指定します。

/RailsProject/RailsVueApp/config/routes.rb

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

Railsとvueの開発環境

ブラウザをリロードしてみて上の画面がでてくると、とりあえずVue.jsの設定までは終了です。

vuetifyをインストール

これ何かというと、レイアウトやボタンなど簡単に使えてしまうBootstrapみたいなやつですね。

$ yarn add vuetify

以下のファイルにVuetifyをインポート。

/RailsProject/RailsVueApp/app/javascript/packs/hello_vue.js

import Vue from 'vue'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import App from '../app.vue'

Vue.use(Vuetify);
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)
})

templateタグの部分を変更し、確認。追加したタブが出来ていたら成功。

/RailsProject/RailsVueApp/app/javascript/app.vue

<template>
  <v-app id="app">
    <div>
      <p>{{ message }}</p>
    </div>
    <v-tabs>
      <v-tab>Item One</v-tab>
      <v-tab>Item Two</v-tab>
      <v-tab>Item Three</v-tab>
    </v-tabs>
  </v-app>
</template>

Vuetify

Vue.jsをコンパイルする

Vue.jsはコンパイルする必要があります。以下のコマンドで実行可能ですが、毎回変更するたびに以下のコマンドを実行するというのは大変です。

$ bin/webpack

変更を検知して自動コンパイルが走るようにします。参考サイトはこちら
Rails 5.1で作るVue.jsアプリケーション

gem install foreman
こちらのファイルを追加・修正

  • bin/serverファイルを作成
  • bin/serverファイルの実行権限を与える
  • Procfile.devファイルを作成
  • Gemfileに「gem ‘foreman’」を追加
  • 変更が完了したら「bin/server」を実行。http://localhost:5000にアクセスする

bin/server

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

Procfile.dev

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

Gemfile

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

変更が完了したら「bin/server」を実行。http://localhost:5000にアクセスする。Vueのファイルを変更すると、変更を検知し内容が変わっていると成功。

Gitを使ってBitbucketでソースコードを管理する

git

Gitを使いソースコードを管理します。Gitがどのようなものなのかは、いろんなサイトで説明があるので割愛します。今のところはは複数の人と開発する時にソースコートが消えてなくなったりしないよう管理できるツールくらいに思っていてくれたらいいです。

BitbucketとGitを連携させます。

Bitbucketでアカウント作成

Bitbucketに行き、アカウントを作ります。少し見にくいですが、青いボタン「Get started fro free」をクリック。

bitbucket-ホーム
Bitbucketのトップページ

bitbucket-アカウント作成
メールアドレスの登録

bitbucket-名前登録
名前とパスワードの登録

bitbucket-mail
メールアドレスの確認

bitbucket-リポジトリ作成
リポジトリ作成

設定
リポジトリ設定完了

アカウントを作りログインすると上にある画面に辿り着きます。とりあえず今はローカルに作った開発環境をBitBucketに移行します。

画像が見にくいため、ちょっと書き出します。以下のように書いてあります。自分が作ったプロジェクトに移動し、リポジトリを登録する。そしてpushするです。

ステップ1: リポジトリのディレクトリに移動する
cd /path/to/your/repo
$ cd RailsVueApp
ステップ2: 既存のリポジトリをBitbucketに接続する
git remote add origin <リポジトリURL>
git push origin -u master

git remote…でリポジトリを登録したあとにgit pushする前に以下のことをします。

注意点
  1. git add .
  2. git commit -m “はじめてのgit”
  3. git push origin -u master
git add .指定したファイルをインデックスに登録してコミット対象にする
git commit -m “はじめてのgit”前回のコミットからの差分のようなものが作成される
git push origin -u masterリモートにコミットの内容を反映させる。最初は-uのオプションをつけるとよいらしい。

最初はコマンドで操作するのが慣れないかもしれないため、「SourceTree」といったGUIのツールを使う方がわかりやすいかもしれません。一人で開発する場合はコンフリクト(他の人の修正とかぶること)がおきたりはしないため、上記の3つくらいしか使わないと思う。

また先にBitbucketにリポジトリを作り、自分の環境にクローンしてきて使うという手順でもいい。git clone <リポジトリURL> のようなコマンドで可能。

pushが成功するとBitbucket上でもソースコードをみることができます。複数で使う場合はマージする前に他の人にチェックしてもらってからマージしたり可能になります。

今回は細かい設定は省いているので公開鍵の設定などは他の人が説明しているので調べて見てください。

HEROKUにデプロイする

本番環境を想定してHEROKUにデプロイをしてみたいと思います。
https://www.heroku.com/

HEROKUのアカウント作成

herokuトップページ
HEROKUのトップページ

herokuアカウント登録
HEROKUのアカウント登録

herokuログイン
HEROKUのログイン

HEROKUをインストールする

herokuをインストール
HEROKUをインストール

画像にある「Download the installer」のボタンからインストールも可能と思うが、面倒なのでコマンドでインストールします。

$ brew install heroku/brew/heroku

インストール完了したらHEROKUにログインします。以下のコマンドを実行すると「任意のキーを押してブラウザを開いてログインして」と言われるので、Enterキーをおす。

$ heroku login
Press any key to open up the browser to login or q to exit: 

heroku-login
HEROKU LOGIN

Herokuデプロイの注意点

Herokuのデプロイを見ていると、いろんな罠があるので整理しながら進みたいと思います。(自分が知らないだけ)

注意点
  1. Gemfileを書き換える
  2. Heroku createで作成されるアプリは5つまで
  3. Gemfileの修正を反映させる

Gemfileを書き換える

HerokuではPostgreSQLを使うためproduction環境の設定を追記、また「sqlite3」の記述をdevelopment, test環境に移動する。

Gemfile

group :development, :test do
  gem 'sqlite3', '~> 1.4'   #追記
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :production do
  gem 'pg', '0.20.0'
end

Heroku createで作成されるアプリは5つまで

アプリが5つ以上になるとcreateできなくなるため注意する。0の場合は以下のようなメッセージが出るが、アプリがリストで表示される。

$ heroku apps
You have no apps.

5つある場合に、「heroku create」をするとエラーになる。以下のコマンドでアプリを削除するなりして減らす。上のコマンドで一覧が出てくるのでアプリ名には、その名前を指定するとよい。

ちなみにアプリ名を指定してエンターを押すと、もう一度聞いてくるので再度アプリ名指定、エンターで削除される。

heroku destroy --app <アプリ名>

Gemfileの修正を反映させる

Gemfileを修正したら、以下のコマンドを実行しないと反映されないっぽいので忘れない。

$ git commit -a -m "Update Gemfile for Heroku"

Herokuデプロイ実行

実際にデプロイを実行してみます。順番に以下のコマンドを実行するとデプロイされ、ブラウザ上で確認できます。

$ git commit -a -m "Update Gemfile for Heroku"
$ bundle install
$ bin/webpack
$ heroku create
https://afternoon-woodland-30839.herokuapp.com/ | https://git.heroku.com/afternoon-woodland-30839.git
$ git push heroku master
$ heroku run rake db:migrate
$ heroku open

これで終了です。お疲れ様でした。

コマンドの小技

ターミナルでコマンドを打っていると、何度も同じコマンドを打つと思います。上下のボタンで履歴に戻って実行したり面倒ですね。そんな時は以下のコマンドで今までの履歴を表示します。

$ history
  1  git push heroku master
  2  git commit -a -m "Update Gemfile for Heroku"
  3  heroku --version
  4  history

そうすると、履歴が表示されます。4つくらいならいいのですが、100とかなると上下で遡るのが大変。3番のコマンドを実行したい場合は以下のように書いてエンターで「heroku –version」が実行されます。

$ !3

まとめ

まとめ

今回は、Ruby on Rails + Vue.js + vuetifyの環境構築を行い、gitを使用してBitbucketでソースコードの管理をし、Herokuにデプロイをするというところまで行いました。

気をつけるポイントとしては、Herokuにデプロイする部分ですね。チュートリアルにも詳しくかいてあるので2、3時間で開発環境は作れるくらいの内容だと思います。

僕も初めて作った環境だったので、Herokuの部分で時間がかかりました。これから何か作ろうかと思います。

参考になれば幸いです。


MEMO
  1. 未経験の方は早めに目標を決めましょう。
  2. 何を作りたいか、どんなものを作りたいか考える。そしてそのために何を学ぶか調べます。
  3. あとは独学でやってみる(プログラムを書いてみる)
  4. 独学で実績(公開できるレベルのもの)を作れるなら転職活動・就職活動をしてみる。
  5. 難しい場合はスクールに通い実績を作り、早めに就職する。