RubyMine で Rails Tutorial 7章

7章

RubyMine で開きたいファイルを探すときは、shift を2回押すのが便利です。
ファイルに限らず、だいたいのものは探せます。

debug は RubyMine にもあるのですが、まだ使い方がよくわかっていません。
チュートリアルにあるように、byebug を使って debugger を埋め込むやり方のほうが手軽のようです。

new.html.erb を動かしたときに、フォームが真ん中に来ませんでした。

Bootstrap 4 のマニュアル を見ますと、offset-md-3 となっています。そのように修正します。

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>

<div class="row">
  <div class="col-md-6 offset-md-3">
    <%= form_for(@user) do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>

      <%= f.label :email %>
      <%= f.email_field :email %>

      <%= f.label :password %>
      <%= f.password_field :password %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

今度は真ん中に来ましたね。

Bootstrap のグリッドシステムでは、ブラウザの幅に応じてレイアウトを変えてくれるようになっています。
ここでは md だけ指定していますが、同時に複数の種類の class を指定することもできます。

col-md-6 offset-md-3 というのは、全体の 12 分割をどう使うかという指定です。
幅が6つ分の要素を作って、左に3つ開けるということで真ん中にくるようにしています。

エラー画面を作るところでは、.has-error がないと怒られました。

これも Bootstrap のマニュアルを見ると、:invalid に置き換わったようですね。そのように修正します。
. でなくて : で始まるクラス名になっているのは要注意です。

.field_with_errors {
  @extend :invalid;
  .form-control {
    color: $state-danger-text;
  }
}

リスト 7.25 のテストを直すところは、こんな感じにしておきました。
_error_messages.html.erb に対応して、エラーとなったときに出てくるということです。

require 'test_helper'

class UsersSignupTest < ActionDispatch::IntegrationTest
  test "invalid signup information" do
    get signup_path
    assert_no_difference 'User.count' do
      post users_path, params: { user: { name:  "",
                                         email: "user@invalid",
                                         password:              "foo",
                                         password_confirmation: "bar" } }
    end
    assert_template 'users/new'
    assert_select 'div#error_explanation'
    assert_select 'div.alert'
    assert_select 'div.alert-danger'
  end
end

リスト 7.34 のテストは、ヒントに従って空文字列かどうかをチェックするようにしてみました。
成功していれば何か入ってますよということです。

  test "valid signup information" do
    get signup_path
    assert_difference 'User.count', 1 do
      post users_path, params: { user: { name:  "Example User",
                                         email: "user@example.com",
                                         password:              "password",
                                         password_confirmation: "password" } }
    end
    follow_redirect!
    assert_template 'users/show'
    assert_not flash[:success].blank?
  end

最後に、production 環境で SSL 化して終わりです。
Webサーバは Rails 5.2.0 では Puma になっています。

RubyMine で Rails Tutorial 6章

6章やりますか。

Model を作ります。

db:migrate も右クリックからのメニューで実行できます。

チュートリアルでは DB Browser for SQLite が紹介されていますが、RubyMine でも右のほうにある Database メニューから DB を見ることができます。

+ボタンから Data Source → Sqlite を選択します。

ダイアログで右のほうにあるファイル選択ダイアログを開いて、DB のファイルを選択し、
RubymineProjects/sample_app/db/development.sqlite3 を選びます。

Test Connection を押して接続も確認しましょう。

先ほど作った User モデルに対応する users テーブルが見えるようになっています。
ダブルクリックすると select 文が実行されて中身が表示されますが、まだデータを入れていないので空になっています。

User モデルのテストを書きながらモデルも直していくという形で進めていきますが、RubyMine 上で簡単に行き来することができます。

テスト側からは、コマンドキーを押しながら User をクリックすると user.rb に移動できます。
user.rb からは、Goto → Test です。shift + command + T みたいですね。

ここまでは GUI でできるだけ操作するようにしてきましたが、Terminal でやっても同じです。
キーボードを打つほうが早いことも多いですし、そのときに慣れた方法を選んで使えばいいと思います。

最後はユーザを一つ作って終わりです。rails console も RubyMine の中から実行できます。

DB を確認すると正しく一つ入っていることが確認できます。

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 からやっても同じです。