Rails Tutorial、始めました【3章】

2021年2月2日

Rails Tutorial 3章に突入！

2章の記事はこちら↓

Rails Tutorial、始めました【2章】

第３章　ほぼ静的なページの作成

3章ではサンプルアプリケーションを作っていきます。

これがRails Tutorialのメインで、今後の章でもずっと作っていくアプリケーションになるみたいです。楽しみですね。

セットアップ

前準備です。いつものように、以下のフローをやっていきましょう

  • rails newコマンドで、アプリケーション作成
  • gitにpush
  • Hello,Worldアプリを作る
  • herokuにpushして、本番環境で確認

bundle updateしろ！

みたいなエラーは少し出ましたが、ここは特に苦労しませんでした。まあさすがに、3回目なんでね。

静的ページの作成

タイトルの通り、今回は静的ページを作成していきます。

静的ページとは、Controllerから受け取るパラメーターによってViewが変化しないページのことです。

ちなみにViewファイルになってる、拡張子がhtml.erbのファイルはrubyのコードが埋め込めるhtmlファイルです。静的ページではhtmlと全く同じ使い方をします。

最初のController、Viewは下記のコマンドで自動生成しました。

Shell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ rails generate controller StaticPages home help
      create  app/controllers/static_pages_controller.rb
       route  get 'static_pages/help'
       route  get 'static_pages/home'
      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    coffee
      create      app/assets/javascripts/static_pages.coffee
      invoke    scss
      create      app/assets/stylesheets/static_pages.scss

さて、これで上記のページが作成できました。

helpページも同じ感じで作成されています。そしてもうこれ、静的なページなんですよね。

チュートリアル通りに書き換えて、こんな感じになりました。(Helpページも同じ感じです。)

app/views/static_pages/home.html.erb
XHTML
1
2
3
4
5
6
<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>

テストから始める

静的ページはこれで終了です。次に学ぶのはテスト駆動開発(TDD)です。

これは最初に100%失敗するテストを作っておいて、このテストを通すことを目的にコードを書く開発手法です。

実は…

railsでは簡単なテストは自動生成されます。現在テストコードは下記になっています。

/test/controllers/static/pages_controller_test.rb
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
end

これはページにアクセスしたら、成功ステータスが返って来るはず！というテストを意味しています。処理自体は何もいじってないので、もちろん実行すると成功します。

Shell
1
2
$ rails test
2 tests, 2 assertions, 0 failures, 0 errors, 0 skips

やってみよう！

今回はテストからページを開発するので、全て手動です。早速やっていきましょう。

まずはテストを追加します。

/test/controllers/static/pages_controller_test.rb
Ruby
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
もちろんページは作ってないので、実行すると失敗します。
Shell
1
2
3
$ rails test
$ rails test
3 tests, 2 assertions, 0 failures, 1 errors, 0 skips

今回はゼロからAboutページを作っていきます。新しいページを手動で作るには、下記の3つを作成する必要があります。

  • /config/routes.rbにルーター追加
  • Controllerにメソッド追加
  • Viewに新規ページ作成

まずはroutes.rbです

config/routes.rb
Ruby
1
2
3
4
5
6
Rails.application.routes.draw do
  get  'static_pages/home'
  get  'static_pages/help'
  get  'static_pages/about' #これを追加
  root 'application#hello'
end

次にController

app/controllers/static_pages_controller.rb
Ruby
1
2
3
4
5
6
7
8
9
10
11
class StaticPagesController < ApplicationController
 
  def home
  end
 
  def help
  end
 
  def about #これを追加
  end
end

最後にViewです。これはファイルごと作成します。

app/views/static_pages/about.html.erb
XHTML
1
2
3
4
5
6
7
8
9
<h1>About</h1>
<p>
  <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
  is a <a href="https://railstutorial.jp/#ebook">book</a> and
  <a href="https://railstutorial.jp/#screencast">screencast</a>
  to teach web development with
  <a href="http://rubyonrails.org/">Ruby on Rails</a>.
  This is the sample application for the tutorial.
</p>

これにて完了！テストを実行して、成功ステータスになればOKらしいですが、ここでまさかの展開が…

Shell
1
2
3
$ rails test
NameError: undefined local variable or method `get_static_pages_root_url
3 tests, 2 assertions, 0 failures, 1 errors, 0 skips

なぜか成功しない！しかもエラー文は、routes.rbにaboutページがねぇぞ！と言ってます。ふぇぇ、さっき追加したじゃーん…

しかも本番環境でAboutページ見てみると、ちゃんと開けるんですよね。なぜテストが通らないのか、謎すぎるし気持ち悪いですね…

試した方法

  • テストで使ったポートのkill
  • gitにpush
  • 何回も見直して、手動で上書き保存
なお、どれも失敗に終わった模様…

1時間30分後…

Shell
1
2
3
$ rails test
NameError: undefined local variable or method `get_static_pages_root_url
3 tests, 2 assertions, 0 failures, 1 errors, 0 skips
trs
ぼく
よし、このテストは通ったことにしよう。

タイトルをテストする

前回まではページに正しく接続できるかどうかだけをテストしました。

だけどそれだけじゃあ、正しいページにアクセスできてるかどうかってわからないですよね。

なので次は、接続して取得したタイトル名が正しいかどうかをテストしていきましょう。

やり方は簡単、テストを下記に書き換えるだけです。

test/controllers/static_pages_controller_test.rb
Ruby
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

実際に動かしてみました。
test/controllers/static_pages_controller_test.rb
Ruby
1
2
$ rails test
3 tests, 6 assertions, 3 failures, 0 errors, 0 skips

あれ、成功してる！？

マジで理由がわかりませんが、ここではテストが成功しました。なんでだろう、反映されるのが遅かった？くらいしか考えられませんね。詳しい方いらしゃれば教えてください。

少し動的なページ

せっかくなので少し動的なページ作ろうぜ！って書いてありました。

今回行うことは2つです。

  • 全ページの構成をapplication.html.erbに統合
  • 各ページに動的要素を追加

まずはヘッダの統合です。

app/views/layouts/application.html.erb
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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ページだけここに載せます。

app/views/static_pages/home.html.erb
XHTML
1
2
3
4
5
6
7
<% 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>

それでは見ていきましょう。

erbファイルではrubyのコードを<% %> or <=% %>で埋め込むことができます。

<%= yield %>の部分に各ページのhtmlファイルの内容が埋め込まれます。

今回統合したのはヘッダ部分だけですね

感想

この章にかかった時間は2時間30分でした。

テストの時にハマったエラーで時間取られすぎました。マジであれ、何だったんですかね〜。

今日は疲れたので次の章には進みませんが、まだまだRails Tutorial、進めていきます。

次回、4章へ続く！

プログラミング

Posted by trs0125