○この記事の要点
「第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で共通部分を吸収できる。というところはマストで覚えておく必要があるかと。

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

○内容

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