RubyOnRails: チュートリアル:  第3章ほぼ静的なページの作成

こちらのページとほぼ同じことを行いました。
[第3章ほぼ静的なページの作成](https://railstutorial.jp/chapters/static_pages?version=7.0#sec-static_pages)

確認した環境

```text
$ ruby --version
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux-gnu]

$ rails --version
Rails 7.1.3

$ bundler --version
Bundler version 2.5.6

$ bundle --version
Bundler version 2.5.6
```

## プロジェクトの作成

```bash
rails new sample_app
cd sample_app
bundle install
```

サーバーの起動

```bash
rails server -b 0.0.0.0
```

## ページの作成

```bash
rails generate controller StaticPages home help
```

次にアクセスして、ページが作成されていることを確認
　（IP アドレスは変更してください。）

http://10.56.160.214:3000/static_pages/home
http://10.56.160.214:3000/static_pages/help

ページを修正

```erb:app/views/static_pages/home.html.erb
<h1>StaticPages#home</h1>
<p>Find me in app/views/static_pages/home.html.erb</p>
<p>このページは　home です。</p>
```

```erb:app/views/static_pages/help.html.erb
<h1>StaticPages#help</h1>
<p>Find me in app/views/static_pages/help.html.erb</p>
<p>このページは　help です。</p>
```

ブラウザーでアクセス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/1703d9c6-da14-fd92-0aa3-fddb4fad0f7e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/3fe8c0e8-66da-aa23-5ba2-f0e26e43fac4.png)

テストを実行する

```bash
rails test
```

```text
$ rails test
Running 2 tests in a single process (parallelization threshold is 50)
Run options: --seed 49769

# Running:

..

Finished in 0.127622s, 15.6713 runs/s, 15.6713 assertions/s.
2 runs, 2 assertions, 0 failures, 0 errors, 0 skips
```

2つのテストが走って、失敗がないことが分かりました。

テストは、自動的に生成されたもので、次の通りです。

```erb: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
  end

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

## About というページを作成する

テストを作成
　次のページを修正して、　about のテストを加えます。

```erb: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
  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
```

テスト

```bash
rails test
```

```text
$ rails test
Running 3 tests in a single process (parallelization threshold is 50)
Run options: --seed 9349

# Running:

E

Error:
StaticPagesControllerTest#test_should_get_about:
NameError: undefined local variable or method `static_pages_about_url' for #<StaticPagesControllerTest:0x00007061d81e7440>
```

route を追加

```rb:config/routes.rb
Rails.application.routes.draw do
  get 'static_pages/home'
  get 'static_pages/help'
  get 'static_pages/about'
  （省略）
```

テスト

```text
Failure:
StaticPagesControllerTest#test_should_get_about [test/controllers/static_pages_controller_test.rb:16]:
Expected response to be a <2XX: success>, but was a <404: Not Found>
```

controller の追加

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

  def help
  end

  def about
  end
end
```

テスト

```text
Failure:
StaticPagesControllerTest#test_should_get_about [test/controllers/static_pages_controller_test.rb:16]:
Expected response to be a <2XX: success>, but was a <406: Not Acceptable>
```

view の作成

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

テスト
　3つのテストが通りました。

```text
$ rails test
Running 3 tests in a single process (parallelization threshold is 50)
Run options: --seed 8094

# Running:

...

Finished in 0.127270s, 23.5720 runs/s, 23.5720 assertions/s.
3 runs, 3 assertions, 0 failures, 0 errors, 0 skips
```

about のページを改造

```erb:app/views/static_pages/about.html.erb
<h1>StaticPages#about</h1>
<p>Find me in app/views/static_pages/about.html.erb</p>
<p>このページは　about です。</p>
```

ブラウザーでアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a25395ce-9f32-290b-793e-8a41ae979b60.png)

## 各ページにタイトルを付けます

テストを改造します。

```erb: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
```

テスト
　3つのテストが失敗します。

```text
（省略）
Finished in 0.135638s, 22.1176 runs/s, 44.2353 assertions/s.
3 runs, 6 assertions, 3 failures, 0 errors, 0 skips
```

view を修正します。

```erb:app/views/static_pages/home.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Home | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
<h1>StaticPages#home</h1>
<p>Find me in app/views/static_pages/home.html.erb</p>
<p>このページは　home です。</p>
  </body>
</html>
```

```erb:app/views/static_pages/help.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Help | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
<h1>StaticPages#help</h1>
<p>Find me in app/views/static_pages/help.html.erb</p>
<p>このページは　help です。</p>
  </body>
</html>
```

```erb:app/views/static_pages/about.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>About | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
<h1>StaticPages#about</h1>
<p>Find me in app/views/static_pages/about.html.erb</p>
<p>このページは　about です。</p>
  </body>
</html>
```

テスト
　失敗はありません

```text
Finished in 0.135923s, 22.0713 runs/s, 44.1426 assertions/s.
3 runs, 6 assertions, 0 failures, 0 errors, 0 skips
```

この状態で、ブラウザーで表示しても、タイトルは望んだものになっていません。
そこで、ソースを見ると、次のようになっています。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>SampleApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="4oY3e0-PTwu20qQ78AiDMK8hHqhNbQKGl9ddtuh3t4MFAvXti3fYAOfCBdCFSkLipwOVNrvjByCwRJsVZjerpw" />
    

    <link rel="stylesheet" href="/assets/application-e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css" data-turbo-track="reload" />
  </head>

  <body>
    <!DOCTYPE html>
<html>
  <head>
    <title>Home | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
<h1>StaticPages#home</h1>
<p>Find me in app/views/static_pages/home.html.erb</p>
<p>このページは　home です。</p>
  </body>
</html>

  </body>
</html>
```

rails new でレイアウトファイルが自動で作成されたことが原因です。
これは、次のようにして解決します。

```bash
mv app/views/layouts/application.html.erb layout_file
```

ブラウザーで、ページソースを見ると

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Home | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
<h1>StaticPages#home</h1>
<p>Find me in app/views/static_pages/home.html.erb</p>
<p>このページは　home です。</p>
  </body>
</html>
```

## テストコードのリファクタリング

```erb: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
```

テスト
　リファクタリングで問題が入らないことを確認

```text
$ rails test
Running 3 tests in a single process (parallelization threshold is 50)
Run options: --seed 38359

# Running:

...

Finished in 0.101110s, 29.6706 runs/s, 59.3411 assertions/s.
3 runs, 6 assertions, 0 failures, 0 errors, 0 skips
```

## ページのリファクタリング

レイアウトファイルを元に戻す

```bash
mv layout_file app/views/layouts/application.html.erb
```

レイアウトファイルを修正

```erb:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8">
    <%= csrf_meta_tags %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>

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

```erb:app/views/static_pages/home.html.erb
<% provide(:title, "Home") %>
<h1>StaticPages#home</h1>
<p>Find me in app/views/static_pages/home.html.erb</p>
<p>このページは　home です。</p>
```

```erb:app/views/static_pages/help.html.erb
<% provide(:title, "Help") %>
<h1>StaticPages#help</h1>
<p>Find me in app/views/static_pages/help.html.erb</p>
<p>このページは　help です。</p>
```

```erb:app/views/static_pages/about.html.erb
<% provide(:title, "About") %>
<h1>StaticPages#about</h1>
<p>Find me in app/views/static_pages/about.html.erb</p>
<p>このページは　about です。</p>
```

テスト

```text
$ rails test

Finished in 0.128631s, 23.3225 runs/s, 46.6450 assertions/s.
3 runs, 6 assertions, 0 failures, 0 errors, 0 skips
```

## ルート　"/" の設定

テストの追加

```rb: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 root" do
    get root_url
    assert_response :success
    assert_select "title", "Home | #{@base_title}"
  end
（省略）
```


```rb:config/routes.rb
Rails.application.routes.draw do
  root 'static_pages#home'
  get 'static_pages/home'
  get 'static_pages/help'
  get 'static_pages/about'
（省略）
```

test で確認

```bash
rails test
```

クライアントで確認
　http://10.56.160.214:3000/　にアクセス