Webエンジニアであれば、Rubyを使う機会があるかもしれません。
- Rubyって需要あるの？
- 転職には有利？
- 習得にどれくらいかかるんだろう
- Ruby on Railsどんな感じ？
もちろん需要はあります。転職に有利かどうかは、プログラム言語だけでは決まらないと思うので。時間がないので5日でRuby on Railsで開発の基礎くらいはやれたらいいですね。
Rubyに興味ある人に向けて5回に分けて環境構築から簡単なアプリ作成までしてみたいと思います。サーバーサイドはRuby on Rails。それだけではつまらないのでフロントエンドはVue.js使ってやってみたいと思います。
Ruby on Railsの需要は
サーバーサイドの言語であれば、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のサイトに行き、「インストール」という文字の下にあるコマンドをコピーし、ターミナルを起動し実行します。
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
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
ブラウザをリロードしてみて上の画面がでてくると、とりあえず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>
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がどのようなものなのかは、いろんなサイトで説明があるので割愛します。今のところはは複数の人と開発する時にソースコートが消えてなくなったりしないよう管理できるツールくらいに思っていてくれたらいいです。
BitbucketとGitを連携させます。
Bitbucketでアカウント作成
Bitbucketに行き、アカウントを作ります。少し見にくいですが、青いボタン「Get started fro free」をクリック。
Bitbucketのトップページ
メールアドレスの登録
名前とパスワードの登録
メールアドレスの確認
リポジトリ作成
リポジトリ設定完了
アカウントを作りログインすると上にある画面に辿り着きます。とりあえず今はローカルに作った開発環境をBitBucketに移行します。
画像が見にくいため、ちょっと書き出します。以下のように書いてあります。自分が作ったプロジェクトに移動し、リポジトリを登録する。そしてpushするです。
- ステップ１: リポジトリのディレクトリに移動する
- cd /path/to/your/repo
$ cd RailsVueApp
- ステップ2: 既存のリポジトリをBitbucketに接続する
- git remote add origin <リポジトリURL>
- git push origin -u master
git remote...でリポジトリを登録したあとにgit pushする前に以下のことをします。
- git add .
- git commit -m "はじめてのgit"
- 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をインストール
画像にある「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デプロイの注意点
Herokuのデプロイを見ていると、いろんな罠があるので整理しながら進みたいと思います。(自分が知らないだけ)
- Gemfileを書き換える
- Heroku createで作成されるアプリは５つまで
- 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で作成されるアプリは５つまで
アプリが５つ以上になると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の部分で時間がかかりました。これから何か作ろうかと思います。
参考になれば幸いです。