学習記録 13日目

13日目の学習記録をまとめていきます。

学習計画

• Railsチュートリアル 3章

学習内容

Ruby on Railsチュートリアル 3章

3.1 セットアップ

• いよいよsample_appを作っていきます。

$ cd ~/environment
$ rails _6.0.3_ new sample_app
$ cd sample_app/

• GemfileをRailsチュートリアル指定の設定にしてbundle installします。

$ bundle install --without production
...
If you are updating multiple gems in your Gemfile at once,
try passing them all to `bundle update`
$ bundle update
$ bundle install

• ローカルリポジトリの設定をしてコミットします。

$ git init
$ git add -A
$ git commit -m "Initialize Repository"

• README.mdを指定の内容に変更します。
• コミットしてリモートリポジトリの設定をしてプッシュします。

$ git add -A
$ git commit -m "Improve the README"
$ git remote add origin https://github.com/***/***.git
$ git push -u origin master

• 前章同様にhelloアクションを追加して動作確認します。
• コミットしてリモートリポジトリにプッシュします。herokuの設定もしてプッシュします。

$ git add -A
$ git commit -m "add hello"
$ heroku create
$ git push && git push heroku master

演習

1. Markdown記法のREADME（リスト 3.3）がHTMLとして正しくGitHub上で描画されているか、確認してみてください。

• 確認のみのため省略

2. 本番環境（Heroku）のルートURLにアクセスして、デプロイが成功したかどうか確かめてみてください。

• 確認のみのため省略

3.2 静的ページ

• ブランチを作成します。

$ git checkout -b static-pages
Switched to a new branch 'static-pages'
$ git branch
  master
* static-pages

3.2.1 静的なページ作成

• 各ページを作成するためにStaticPagesコントローラとhome, help, aboutアクションを作成します。学習のためaboutアクションは手動で追加していきます。

$ rails generate controller StaticPages home help
Running via Spring preloader in process 68845
      create  app/controllers/static_pages_controller.rb
       route  get 'static_pages/home'
get 'static_pages/help'
      invoke  erb
      create    app/views/static_pages
      create    app/views/static_pages/home.html.erb
      create    app/views/static_pages/help.html.erb
      invoke  test_unit
      create    test/controllers/static_pages_controller_test.rb
      invoke  helper
      create    app/helpers/static_pages_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/static_pages.scss

• ログを確認するとコントローラと各アクションに対応するビューが作成されテストやヘルパーも作成されています。
• リモートリポジトリにプッシュしておきます。プッシュはブランチした状態で行います。-uオプションを使用し次回以降省略出来るようにする。

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

• Railsサーバを起動して動作確認をします。

$ rails s

演習
1. Fooというコントローラを生成し、その中にbarとbazアクションを追加してみてください。

$ rails generate controller Foo bar baz

2. コラム 3.1で紹介したテクニックを駆使して、Fooコントローラとそれに関連するアクションを削除してみてください。
$ rails destroy controller Foo bar baz

3.2.2 静的なページの調整

• 各ビューを編集してページを変更する。各ビューは/app/views/static_pages/ディレクトリに入っている。

3.3 テストから始める

• テスト駆動開発(TDD)とは、最初に「正しいコードがないと動作しないテスト」を書き、テストがパスするようなコードを書いていく開発方法。

3.3.1 最初のテスト

• /test/controllers/static_pages_controller_test.rbに自動的にテストが生成されている。テストをしてみる。

$ rails test
2 runs, 2 assertions, 0 failures, 0 errors, 0 skips

• TDDでaboutページを作成していく。まずはテストを書く。

# /test/controllers/static_pages_controller_test.rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  #...

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

• テストを実行すると当然失敗する。

$ rails test
3 runs, 2 assertions, 0 failures, 1 errors, 0 skips

• ルーティング、アクション、ビューファイルを作成してテストを成功させる。

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

# /app/controllers/static_pages_controller.rb
class StaticPagesController < ApplicationController
  def home
  end

  def help
  end

  def about
  end
end

$ touch app/views/static_pages/about.html.erb
$ rails test
3 runs, 3 assertions, 0 failures, 0 errors, 0 skips

3.4 少しだけ動的なページ

• ページのタイトルを変更していく。

3.4.1 タイトルをテストする

• 各ページのタイトルに対してテストを書いていく。

# /test/controllers/static_pages_controller_test.rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  test "should get home" do
    get static_pages_home_url
    assert_response :success
    assert_select "title", "Home | Ruby on Rails Tutorial Sample App"
  end

  test "should get help" do
    get static_pages_help_url
    assert_response :success
    assert_select "title", "Help | Ruby on Rails Tutorial Sample App"
  end

  test "should get about" do
    get static_pages_about_url
    assert_response :success
    assert_select "title", "About | Ruby on Rails Tutorial Sample App"
  end
end

• テストはもちろん失敗する。

$ rails test
3 runs, 6 assertions, 3 failures, 0 errors, 0 skips

3.4.2 タイトルを追加する

• 各ページにタイトルを追加してテストする。

$ rails test
3 runs, 6 assertions, 0 failures, 0 errors, 0 skips

演習

1. StaticPagesコントローラのテスト（リスト 3.25）には、いくつか繰り返しがあったことにお気づきでしょうか? 特に「Ruby on Rails Tutorial Sample App」という基本タイトルは、各テストで毎回同じ内容を書いてしまっています。そこで、setupという特別なメソッド（各テストが実行される直前で実行されるメソッド）を使って、この問題を解決したいと思います。まずは、リスト 3.31のテストが green になることを確認してみてください（リスト 3.31では、2.2.2で少し触れたインスタンス変数や文字列の式展開というテクニックを使っています。それぞれ4.4.5と4.2.1で詳しく解説するので、今はわからなくても問題ありません）。

• テストにsetupメソッドを記載してリファクタリングする。

# /test/controllers/static_pages_controller_test.rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  def setup
    @base_title = "Ruby on Rails Tutorial Sample App"
  end

  test "should get home" do
    get static_pages_home_url
    assert_response :success
    assert_select "title", "Home | #{@base_title}"
  end

  test "should get help" do
    get static_pages_help_url
    assert_response :success
    assert_select "title", "Help | #{@base_title}"
  end

  test "should get about" do
    get static_pages_about_url
    assert_response :success
    assert_select "title", "About | #{@base_title}"
  end
end

$ rails test
3 runs, 6 assertions, 0 failures, 0 errors, 0 skips

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

• provide, yieldメソッドを使用することでERB内で変数を定義して呼び出しすることが出来る。
• /app/views/layouts/application.html.erbを編集する。このERBは共通レイアウトになる。

# /app/views/layouts/application.html.erb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  def setup
    @base_title = "Ruby on Rails Tutorial Sample App"
  end

  test "should get home" do
    get static_pages_home_url
    assert_response :success
    assert_select "title", "Home | #{@base_title}"
  end

  test "should get help" do
    get static_pages_help_url
    assert_response :success
    assert_select "title", "Help | #{@base_title}"
  end

  test "should get about" do
    get static_pages_about_url
    assert_response :success
    assert_select "title", "About | #{@base_title}"
  end
end

演習

1. サンプルアプリケーションにContact（問い合わせ先）ページを作成してください15 。（ヒント: まずはリスト 3.16を参考にして、/static_pages/contactというURLのページに「Contact | Ruby on Rails Tutorial Sample App」というタイトルが存在するかどうかを確認するテストを最初に作成しましょう。次に、3.3.3でAboutページを作ったときのと同じように、Contactページにもリスト 3.41のコンテンツを表示してみましょう。）

• まずテストを作成します。

# /test/controllers/static_pages_controller_test.rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  #...
  test "should get contact" do
    get static_pages_contact_url
    assert_response :success
    assert_select "title", "Contact | #{@base_title}"
  end
end

• テストが失敗していることを確認する。

$ rails test
4 runs, 6 assertions, 0 failures, 1 errors, 0 skips

• ルーティングを設定する。

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

• StaticPagesコントローラにcontactアクションを追加する。

# /app/controllers/static_pages_controller.rb
class StaticPagesController < ApplicationController
  def home
  end

  def help
  end

  def about
  end

  def contact
  end
end

• viewファイルを作成する。作成後チュートリアル指定のページへ編集する。

$ touch app/views/static_pages/contact.html.erb

• テストが成功することを確認する。

$ rails t
4 runs, 8 assertions, 0 failures, 0 errors, 0 skips

3.4.4 ルーティングの設定

• ルーティングを編集してrootURLにアクセスした際static_pages#homeを呼び出すようにする。

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

• railsサーバで動作確認を行う。

演習

1. リスト 3.42にrootルーティングを追加したことで、root_urlというRailsヘルパーが使えるようになりました（以前、static_pages_home_urlが使えるようになったときと同じです）。リスト 3.43のFILL_INと記された部分を置き換えて、rootルーティングのテストを書いてみてください。

# リスト 3.43
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  test "should get root" do
    get FILL_IN
    assert_response FILL_IN
  end

  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

• 以下のように記載する。

# test/controllers/static_pages_controller_test.rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  test "should get root" do
    get root_url
    assert_response :success
  end
  #...
end

• テストが成功することを確認する。

$ rails t
5 runs, 9 assertions, 0 failures, 0 errors, 0 skips

2. 実はリスト 3.42のコードを書いていたので、先ほどの課題のテストは既に green になっているはずです。このような場合、テストを変更する前から成功していたのか、変更した後に成功するようになったのか、判断が難しいです。リスト 3.42のコードがテスト結果に影響を与えていることを確認するため、リスト 3.44のようにrootルーティングをコメントアウトして見て、 red になるかどうか確かめてみましょう（なおRubyのコメント機能については4.2で説明します）。最後に、コメントアウトした箇所を元に戻し（すなわちリスト 3.42に戻し）、テストが green になることを確認してみましょう。

• ルーティングを編集してテストが失敗することを確認する。確認後もとに戻す。

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

$ rails t
5 runs, 8 assertions, 0 failures, 1 errors, 0 skips

3.5 最後に

• リモートリポジトリにプッシュする。マージ前に完成形のstatic-pagesブランチをプッシュしておく。

$ rails t
$ git add -A
$ git commit -m "Finish static pages"
$ git push
$ git checkout master
$ git merge static-pages
$ git push && git push heroku
$ heroku run rails db:migrate

• 以上で3章は終了です。

本日の総括

• Railsチュートリアル3章の2周目を終えました。1周目と比べてスラスラ読めるようになってるので成長を感じていいですね。