RubyMine で Rails Tutorial 5章

5章
ようやく Ruby on Rails を使い始めるという感じになって来ますね。

画像をダウンロードして来て assets/images/ に置くというのもでてきますが、RubyMine の IDE 上でもそのまま表示して確認できます。

bootstrap-sass をインストールするところは、bootstrap 4 に対応するモジュールに置き換えてみました。
https://github.com/twbs/bootstrap-rubygem を見ながら導入していきます。

# bootstrap
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

stylesheets/custom.scss を作ります。

@import "bootstrap";

stylesheets/application.css を stylesheets/application.scss に変更します。
ファイル名を右クリックして、Refactor → Rename を実行します。

拡張子を scss に変更します。

Preview を押すと影響範囲が出て来ます。

Do refactor を押してファイル名の変更が終わります。

application.scss では custom.scss を import するように書いておきます。

@import 'custom';

この2行は消しておきます。

 *= require_tree .
 *= require_self

次に、javascripts/application.js に追加します。最初に定義されていたものと合わせて、こんな感じになりました。

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .

この状態で rails server を起動してブラウザから見てみると、こんな感じになりました。
チュートリアルの画面とちょっと違うところもありますね。

Bootstrap 4 で変わったところを直してみました。

assets/stylesheets/custom.scss の変更点。

body {
  padding-top: 0px;
}

views/layouts/application.html.erb は変更が多くなったのでそのまま載せます。
nav 周りは大きく変わりましたね。

<!DOCTYPE html>
<html>
<head>
  <title><%= full_title(yield(:title)) %></title>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag    'application', media: 'all',
                             'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application',
                             'data-turbolinks-track': 'reload' %>
  <!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
  <![endif]-->
</head>
<body>
<header class="navbar navbar-dark bg-dark">
  <div class="container">
    <%= link_to "sample app", '#', id: "logo" %>
    <nav>
      <ul class="nav justify-content-end">
        <li class="nav-item"><%= link_to "Home",   '#', :class => "nav-link" %></li>
        <li class="nav-item"><%= link_to "Help",   '#', :class => "nav-link" %></li>
        <li class="nav-item"><%= link_to "Log in", '#', :class => "nav-link" %></li>
      </ul>
    </nav>
  </div>
</header>
<div class="container">
  <%= yield %>
</div>
</body>
</html>

これで近い見た目になりました。先に進みます。

partial に切り出すところについては、RubyMine から切り出す行を選んで Refactor → Extract → Partial で作れます。

切り出した後は <%= render 'shim' %> のようになりますが、<%= render 'layouts/shim' %> と変更しないとうまく読まれないので直す必要があります。

リスト 5.20 の custom.scss では、変数名が変わっていることでそのままでは使えないようになっています。
変数を上の方で定義するのが簡単です。

@import "bootstrap";

/* mixins, variables, etc. */

$gray: #555;
$gray-light: #777;
$gray-medium-light: #eaeaea;
$gray-darker: #222;

/* universal */

body {
  padding-top: 0px;
}

section {
  overflow: auto;
}

...

その後はチュートリアルのまま進めて行けば特に引っかかるところはなかったです。

テストの実行や git の操作は GUI でやっても Terminal からやっても同じです。

RubyMine で Rails Tutorial 4章

4章 は重要なセクションではありますが、あまり新しいところはありません。

まずはじめに、左側のファイル一覧の画面について少々触れておきます。

いろいろな見え方が選択できるようになっていて、デフォルトでは Project になっています。

これを Rails にするとこのようになります。

例えば Controllers を開いていくと、メソッドと対応する view が関連づけられてたどれるようになっていて、これはこれで見やすいと思います。

Rails Console はメニューの Tools から実行できます。

環境 (RAILS_ENV) は Development にして起動します。

一度起動すると、上の実行対象のメニューにも出てくるので、選択して実行ボタンで起動できるようにもなります。

RubyMine で Rails Tutorial 3章

3章。簡単なページからなるアプリと、テストですね。

sample_app として新しくプロジェクトを起こします。
Skip Test::Unit files のチェックボックスを外して、インストールされるようにします。

RoboCop が無効になっていると出て来ました。静的コード分析ツールのようです。有効にしてみますか。

チュートリアルにあるように Gemfile を編集します。バージョン番号は特に指定せず、最新のものを使うようにしてみました。

(編集したところ)

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

  # Use sqlite3 as the database for Active Record
  gem 'sqlite3'
end

group :production do
  gem 'pg'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15', '< 4.0'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'

  gem 'rails-controller-testing'
  gem 'minitest-reporters'
  gem 'guard'
  gem 'guard-minitest'
end

保存すると RubyMine で検知してくれるので、–without production をつけてインストールします。

Process finished with exit code 0 と出てくれば正常終了です。

README.md を編集します。Markdown はプレビューも RubyMine の中でできるので見やすいですね。
編集したら git commit もしておきます。

GitHub でリポジトリを作ります。sample_app という名前でなくても、管理しやすい名前で大丈夫です。わたしは rails_tutorial_2018 にしました。

作ったリポジトリに push する方法も案内されます。

RubyMine のターミナルから実行します。

ちゃんと push できたら、GitHub 側も更新されて見えるようになりますね。

Terminal で git remote -v すると、remote の設定が確認できます。

iMac:sample_app sugimura$ git remote -v
origin  git@github.com:sugitk/rails_tutorial_2018.git (fetch)
origin  git@github.com:sugitk/rails_tutorial_2018.git (push)
iMac:sample_app sugimura$ 

RubyMine でも、右下の Git のウインドウで確認できるようになっています。

リスト 3-4〜3-5 のように root のルーティングと ApplicationController#hello を追加して、heroku にも push してみます。
実際には git commit は RubyMine の中でポチポチと作業しています。

iMac:sample_app sugimura$ git commit -am "Add hello"
iMac:sample_app sugimura$ git push
iMac:sample_app sugimura$ heroku create
iMac:sample_app sugimura$ git push heroku master
iMac:sample_app sugimura$ heroku open

このとき、git remote -v すると remote として heroku も追加されていることがわかります。

iMac:sample_app sugimura$ git remote -v
heroku  https://git.heroku.com/sleepy-wildwood-37153.git (fetch)
heroku  https://git.heroku.com/sleepy-wildwood-37153.git (push)
origin  git@github.com:sugitk/rails_tutorial_2018.git (fetch)
origin  git@github.com:sugitk/rails_tutorial_2018.git (push)
iMac:sample_app sugimura$ 

push する先が origin だと GitHub で、heroku だと Heroku へのデプロイということですね。

次はブランチを作ります。RubyMine では先ほど見た右下のメニューから作ります。

static-pages として作ります。checkout してブランチを乗り換えます。

Controller を新しく作ります。New → Run Rails Generator から controller を選択します。

名前やアクションを入れます。

無事作れました。

チュートリアルに沿って view も作ります。適当なタイミングで commit もしておきましょう。

テストも作られています。実行するには上のメニューで環境を test: sample_app にして、実行ボタンを押します。

テストが実行されて結果が出てきます。2つのテストケースを実行して、exit code 0 ということで正常終了しています。

テストケースを書いて、実行して結果を見て、を繰り返すのも簡単です。

Section 3.4 まで終わったら、ブランチを master にマージします。

まず master を checkout します。

static-pages のブランチを選んで、Merge into Current するとマージされます。

マージされました。ブランチは消さずに残しておきます。

あとは GitHub に反映したり、Heroku へのデプロイもしてみましょう。

iMac:sample_app sugimura$ git push
iMac:sample_app sugimura$ git push heroku

Guard などの設定も追加でありますが、RubyMine では気軽にテストできるのでここではやりません。
コーディング中に自動で起動されるよりも、明示的にテストを起動したほうがやりやすいとわたしは思います。

RubyMine で Rails Tutorial 2章

次は 2章

同じく rails 5.2.0 でやります。

toy_app として新しくプロジェクトを作成します。

Gemfile を編集すると検知されて bundle install をしようとしますが、 –without production で実行します。
手元では development で、heroku では production でという意味合いですね。

2章では scaffold の練習です。New → Run Rails Generator を開きます。

先頭の何文字か入力して、scaffold を選択します。

引数を入力して OK を押すと作成されます。

右クリック → Diagrams → Show Diagram で図を生成することができます。

1つしかモデルがないのでこんな感じになります。

Terminal のタブで db:migrate します。

これで簡単に動かせるのが scaffold のいいところです。
再生ボタンのようなものをクリックして rails server を起動します。

ブラウザから http://localhost:3000/users にアクセスするとこのように読み書きできる画面が出てきます。

Micropost についても同様に作っていきます。

micropost.rb を編集します。RubyMine ならさくさく補完してくれます。

ブラウザから、もしくは rails console からデータをいくつか入れてみます。

RubyMine の右のほうにある Database を開いて、Data Source から Sqlite を選択します。

ドライバがないと言われるので Download をクリックするとインストールされます。
RubyMine から読み込むためのドライバなので、Gemfile で入れたものとは別に考えましょう。

File: の右にある選択ボタンをクリックして、toy_app/db/development.sqlite3 を選択します。

Test Connection を押して接続を確認しておきます。

OK を押して RubyMine の画面に戻り、開いていくと DB の中が覗けるようになっています。

テーブルをダブルクリックすると select 文が実行されて中身が表示されたりもします。

heroku への deploy は省略します。1章と同じです。

RubyMine で Rails Tutorial 1章

Rails Tutorial では Rails は 5.1.4 になっていますが、最新版の 5.2.0 でやってみます。

開発環境は RubyMine を使うことにしました。

hello_app でプロジェクトを作成します。

自動的にあれこれ作成されたり gem install が走っていたりします。

再生ボタンを押すと rails server が起動して、ブラウザから http://localhost:3000 にアクセスすると起動画面がでてきます。

次は hello world ですね。

app/controllers/application_controller.rb を開いて編集します。いろいろ補完が効いて便利です。

config/routes.rb を編集して、上で定義したメソッドが呼ばれるようにします。

ブラウザで http://localhost:3000 を開いていた画面をリロードすると hello, world! と出るようになりました。

このとき、RubyMine の Console でログが出ているのも見ておきましょう。

git は下のほうにある Version Control のタブで操作します。

Unversioned Files の対象を browse のリンクからクリックして、git の管理下に繰り入れます。

commit ボタンをクリックします。

Commit Message を入れて Commit ボタンを押すと git に入ります。

今回は使いませんが、github の設定もしておきます。

メニューから Preferences を選択して、Version Control → GitHub を開きます。
Create API Token をクリックすると github のユーザ名とパスワードを聞かれて、二段階認証を経てトークンが作成されるようになります。

Test をクリックしてアクセスできることを確認しておきましょう。

Heroku にデプロイしてみます。

まず Gemfile を編集して、production では DB のドライバに PostgreSQL を使うようにします。

diff --git a/Gemfile b/Gemfile
index 62610ed..8e4ef81 100644
--- a/Gemfile
+++ b/Gemfile
@@ -5,8 +5,7 @@ ruby '2.5.1'
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '~> 5.2.0'
-# Use sqlite3 as the database for Active Record
-gem 'sqlite3'
+
 # Use Puma as the app server
 gem 'puma', '~> 3.11'
 # Use SCSS for stylesheets
@@ -39,6 +38,12 @@ gem 'bootsnap', '>= 1.1.0', require: false
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
+  # Use sqlite3 as the database for Active Record
+  gem 'sqlite3'
+end
+
+group :production do
+  gem 'pg'
 end
 
 group :development do

heroku コマンドでログインして、アプリケーションの作成、デプロイをします。

$ heroku login
$ heroku keys:add
$ heroku create
$ git push heroku master

Bitbucket については省略しました。