More than 3 years have passed since last update.

Ruby on Rails チュートリアル第３章②

Last updated at 2020-05-09Posted at 2020-05-07

○この記事の要点
「第3章　ほぼ静的なページの作成」の途中から最後まで実施内容メモ
思ったことなどのメモ

○内容

■事前準備（HTMLのタイトル設定とテストコードの作成）
ページの内容に応じて、タイトルを書き換えて表示するページの作成
（１）テストコードの作成（HTMLのtitleタグ内が「XXXX | Ruby on Rails Tutorial Sample App」であるかどうか）

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

（２）テストの実行　エラー

エラー

ubuntu:~/environment/sample_app (static-pages) $ rails test
Running via Spring preloader in process 5800
/home/ubuntu/environment/sample_app/db/schema.rb doesn't exist yet. Run `rails db:migrate` to create it, then try again. If you do not intend to use a database, you should instead alter /home/ubuntu/environment/sample_app/config/application.rb to limit the frameworks that will be loaded.
Run options: --seed 18674

# Running:

FFF

Finished in 0.198043s, 15.1482 runs/s, 30.2964 assertions/s.

  1) Failure:
StaticPagesControllerTest#test_should_get_about [/home/ubuntu/environment/sample_app/test/controllers/static_pages_controller_test.rb:19]:
Expected at least 1 element matching "title", found 0..
Expected 0 to be >= 1.

  2) Failure:
StaticPagesControllerTest#test_should_get_help [/home/ubuntu/environment/sample_app/test/controllers/static_pages_controller_test.rb:13]:
Expected at least 1 element matching "title", found 0..
Expected 0 to be >= 1.

  3) Failure:
StaticPagesControllerTest#test_should_get_home [/home/ubuntu/environment/sample_app/test/controllers/static_pages_controller_test.rb:7]:
Expected at least 1 element matching "title", found 0..
Expected 0 to be >= 1.

3 runs, 6 assertions, 3 failures, 0 errors, 0 skips

3つとも、タイトルに指定した文字列がマッチするものがない。そうだよね。html修正してないからね。
（３）HTMLの修正

app/views/static_pages/home.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Home | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
    <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>
  </body>
</html>

（４）テストの実行　エラーが１つ減る

エラー

ubuntu:~/environment/sample_app (static-pages) $ rails test
Running via Spring preloader in process 6304
/home/ubuntu/environment/sample_app/db/schema.rb doesn't exist yet. Run `rails db:migrate` to create it, then try again. If you do not intend to use a database, you should instead alter /home/ubuntu/environment/sample_app/config/application.rb to limit the frameworks that will be loaded.
Run options: --seed 23427

# Running:

F.F

Finished in 0.191048s, 15.7029 runs/s, 31.4057 assertions/s.

  1) Failure:
StaticPagesControllerTest#test_should_get_about [/home/ubuntu/environment/sample_app/test/controllers/static_pages_controller_test.rb:19]:
Expected at least 1 element matching "title", found 0..
Expected 0 to be >= 1.

  2) Failure:
StaticPagesControllerTest#test_should_get_help [/home/ubuntu/environment/sample_app/test/controllers/static_pages_controller_test.rb:13]:
Expected at least 1 element matching "title", found 0..
Expected 0 to be >= 1.

3 runs, 6 assertions, 2 failures, 0 errors, 0 skips

（５）Webページを開いても確認する。修正後のページが表示される
（６）help、aboutのページも同様に修正する
（７）テストの実行　すべて正常終了する

正常終了

ubuntu:~/environment/sample_app (static-pages) $ rails test
Running via Spring preloader in process 6855
/home/ubuntu/environment/sample_app/db/schema.rb doesn't exist yet. Run `rails db:migrate` to create it, then try again. If you do not intend to use a database, you should instead alter /home/ubuntu/environment/sample_app/config/application.rb to limit the frameworks that will be loaded.
Run options: --seed 306

# Running:

...

Finished in 0.181790s, 16.5026 runs/s, 33.0051 assertions/s.

3 runs, 6 assertions, 0 failures, 0 errors, 0 skips

■ここから少しだけ動的なページに修正

（８）埋め込みRubyによる重複文字の置き換え
ERBと呼ばれている、Rubyの埋め込みコードを利用

app/views/static_pages/home.html.erb

<% provide(:title, "Home") %>
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
    <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>
  </body>
</html>

・<% provide(:title, "Home") %>でtitleという変数へHomeという文字列の設定
※<% ... %>と書くと、中に書かれたコードを単に実行する
・

<%= yield(:title) %>でtitleの文字列呼び出し
※<%= ... %>のように等号を追加すると、中のコードの実行結果がテンプレートのその部分に挿入される

（９）help、aboutのページも同様に修正する
（１０）home、help、aboutのページについて、どのページも

要素内が以下になっている。これを簡素化する。 <%= yield(:title) %> | Ruby on Rails Tutorial Sample App

app/views/layouts/application.html.erb

<!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>

※app/views/layouts/application.html.erbは共通のhtml設定ファイル。HTMLの親クラス的な感じ？
・<%= yield %>に各ページの内容がHTMLに変換されて挿入される
・<%= csrf_meta_tags %>はクロスサイト攻撃対策

（１１）application.html.erb を利用したHTMLファイルの修正

app/views/static_pages/home.html.erb

<% 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、head、title、botyタグの内容は、application.html.erbをそのまま利用するので
home.html.erb　からは削除する
（１２）help、aboutのページも同様に修正する

最後にテストコードの実行でエラーがないことを確認して終了。

■演習
Contact (問い合わせ先) ページの作成
（１）テストコードの作成
（２）routes.rb　の修正
（３）static_pages_controller.rb　の修正
（４）contact.html.erb　の作成

gitへpushしてほんとに終了。

■感想
・動的感はほぼなかったけど、「テストしながら進めるのに慣れる」ことと「ERBと呼ばれている、Rubyの埋め込み」の体感ができたのは大きいと思う。
・あとは何と言ってもapplication.html.erbにテンプレートを置くことで各HTMLで共通部分を吸収できる。というところはマストで覚えておく必要があるかと。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Ruby on Rails チュートリアル 第３章②

○内容

Ruby on Rails チュートリアル第３章②