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

Last updated at 2024-02-13Posted at 2024-02-09

こちらのページとほぼ同じことを行いました。
第3章ほぼ静的なページの作成

確認した環境

$ 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

プロジェクトの作成

rails new sample_app
cd sample_app
bundle install

サーバーの起動

rails server -b 0.0.0.0

ページの作成

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

ページを修正

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>

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>

ブラウザーでアクセス

テストを実行する

rails test

$ 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つのテストが走って、失敗がないことが分かりました。

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

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 のテストを加えます。

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

テスト

rails test

$ 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 を追加

config/routes.rb

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

テスト

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 の追加

app/controllers/static_pages_controller.rb

class StaticPagesController < ApplicationController
  def home
  end

  def help
  end

  def about
  end
end

テスト

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 の作成

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

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

$ 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 のページを改造

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>

ブラウザーでアクセス

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

テストを改造します。

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つのテストが失敗します。

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

view を修正します。

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>

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>

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>

テスト
　失敗はありません

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

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

<!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 でレイアウトファイルが自動で作成されたことが原因です。
これは、次のようにして解決します。

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

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

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

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

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

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

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

mv layout_file app/views/layouts/application.html.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>

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>

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>

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>

テスト

$ rails test

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

ルート　"/" の設定

テストの追加

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
（省略）

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 で確認

rails test

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

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

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

プロジェクトの作成

ページの作成

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

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

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

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

ルート "/" の設定

ルート　"/" の設定