Railsチュートリアルを最後まで。第3章 静的ページ・テスト

こんにちは、のまち（@bokunomad）です。

Railsチュートリアル3章は静的ページ作成とテストがメインです。

簡単ページを作って機能が正しく実装されているかの「テスト」を行っていきます。

コード量が増えて機能も複雑になってから致命的なバグが見つかると、修正に手間取ったりすでに手遅れ状態になりかねません。

テストをまめに行うことで致命的な状態を防ぐことが可能となります。

3-1 セットアップ

新規でプロジェクトを作成

cd ~/environment
rails _5.1.4_ new sample_app
cd sample_app/

Gemfileを編集

source 'https://rubygems.org'

gem 'rails',        '5.1.4'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.7.0'

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'rails-controller-testing', '1.0.2'
  gem 'minitest-reporters',       '1.1.14'
  gem 'guard',                    '2.13.0'
  gem 'guard-minitest',           '2.4.4'
end

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

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gemのインストールおよびアップデート

bundle install --without production
bundle update

gitリポジトリの初期化。githubにプッシュ。

git init
git add -A
git commit -m "Initialize repository"

$ git remote add origin git@github.com:ユーザー名/sample_app.git
$ git push -u origin --all

helloアクションをApplicationコントローラーに追加

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def hello
    render html: "hello, world!"
  end
end

ルートルーティングも設定

Rails.application.routes.draw do
  root 'application#hello'
end

最後にコミットしてHerokuにもプッシュ

git commit -am "Add hello"
git push
heroku create
git push heroku master

新規作成→初期設定→コミット→プッシュ

新しいアプリケーションを作成した際はここまでがほぼワンセットですね。

次回以降からこの部分の記述は飛ばしていこうと思います。

3.2 静的ページ

masterブランチで作業せずにトピックブランチを作成してそこで作業します。今回は「static-pages」ですね。

git checkout -b static-pages

ちなみに現在の作業ブランチは↓でチェックできます。※がついてるのが作業ブランチです。

git branch
* master
  static-pages

3.2.1 静的ページの生成

「StaticPages」コントローラーを作成して「home」「helop」アクションも一緒に作成。

ここで指定したアクションは自動的にroutes.rbとコントローラーにも記述される。

rails generate controller StaticPages home help

コミット&プッシュ

git add -A
git commit -m "Add a Static Pages controller"
git push -u origin static-pages

3.2.2 静的ページの調整

Home, HelpのHTMLを修正する

<h1>Sample App</h1>
<p>
  This is the home page for the
  <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
  sample application.
</p>

<h1>Help</h1>
<p>
  Get help on the Ruby on Rails Tutorial at the
  <a href="https://railstutorial.jp/help">Rails Tutorial help page</a>.
  To get help on this sample app, see the
  <a href="https://railstutorial.jp/#ebook"><em>Ruby on Rails Tutorial</em>
  book</a>.
</p>

3.3 テストからはじめる

テスト実施には「バグの防止」「リファクタリングを安全に行える」「設定やインターフェース作成に役立つ」とメリットは多い。

こまめに小さく進めていく。そのときは遠回りをしているように見えるけど、結果的には無駄な作業をなくすことにつながるということ。

3.3.1 最初のテスト

テストファイルの確認

ls test/controllers/
static_pages_controller_test.rb

Home, Help, aboutページ用のテスト

require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  test "should get home" do
    get static_pages_home_url
    assert_response :success
  end

  test "should get help" do
    get static_pages_help_url
    assert_response :success
  end

  test "should get about" do
    get static_pages_about_url
    assert_response :success
  end
end

↑の記述はGETリクエストを送信して返ってくればsuccessとするという意味。つまりちゃんとアクセスができるか？？というテスト。

この段階では一番下のaboutページは作成していないためテストは失敗になる。

実際にテストを実行。3回テストを回して予想通りに1エラーとなります。

rails test
3 tests, 2 assertions, 0 failures, 1 errors, 0 skips

正しくテストを回せるようにaboutページを実装します。

view/static_pages/about.html.erbを手動で作成。touchコマンド使うよし、cloud9上から新規作成でも大丈夫。

touch app/views/static_pages/about.html.erb

aboutのルーティング設定

Rails.application.routes.draw do
  get  'static_pages/home'
  get  'static_pages/help'
  get  'static_pages/about'
  root 'application#hello'
end

StaticPagesコントローラーにaboutアクションを追加

class StaticPagesController < ApplicationController

  def home
  end

  def help
  end

  def about
  end
end

これでもう一度rails testを実行。うまくいけました。

rails test
3 tests, 3 assertions, 0 failures, 0 errors, 0 skips

3.4.3 レイアウトと埋め込みRuby

3つのページには内容が重複しているHTMLが多数あるためコード量を減らすために埋め込みRubyを使用します。

<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application',
                               'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html

home・help・aboutのそれぞれのページにアクセスした際にhome.html.erb(↓のコード）のHTMLがapplication.html.erb(↑コード）の<%= yield %>に代入されます。

<% provide(:title, "Home") %>
<h1>Sample App</h1>
<p>
  This is the home page for the
  <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
  sample application.
</p>

個々のhtml.erbにフルでHTMLを記述する必要がなくなるというわけですね。コード量も減って簡潔かつ見やすいコードを自然に書くことができます。

最後にrails testを一度回しておきます。

rails test

3.4.4 ルーティングの設定

ルーティング編集

Rails.application.routes.draw do
  root 'static_pages#home'
  get  'static_pages/home'
  get  'static_pages/help'
  get  'static_pages/about'
end

3.5 最後に

コミット・プッシュ・マージ・デプロイ

git add -A
git commit -m "Finish static pages"

git checkout master
git merge static-pages

git push

git push heroku

まとめ

テストを行うことは早期にバグ発見につながるため非常に重要な項目。繰り返しになりそうなページは埋め込みRubyでコード量の軽減を意識する。

また新機能追加の際はトピックブランチで分けることでマスターブランチに影響を及ぼすことなく開発ができる。

駆け足でしたが第3章終わりです。次は文字列・メソッド・クラスとかのほぼRuby文法な第4章。

それでは、Railsチュートリアルを最後まで。第3章 静的ページ・テストの記事でした。