ほぼ静的なページの作成(その４)

開発スキルのないSIerからソフトウェアスキルを取得するため、WEDでモノづくりを計画しています。詳しい経緯はここ
※現在はruby on railsのチュートリアル (ここから)を進めていってます。

前回の続きでruby on rails チュートリアルの第3章に入っています。

前回の頭で第３章の終わりまでいくつもりだったんですけど色々あって・・・(言い訳です) Homeページ、Helpページ、Aboutページをそれぞれ編集し、最終的にページごとに異なるタイトルを表示するようにします。の続きです・・・

前回はRailsのコントローラとアクションを使って3つの有効なページを生成することでさまざまなことを達成しました。しかしそれらは単純な静的ページであり、またRailsの能力を十分に発揮できていないそうです。

しかも、コードが甚だしく重複しています。

ページのタイトルがどれもほぼ同じ (完全にではないが)
「Ruby on Rails Tutorial Sample App」という文字が3つのタイトルで繰り返し使われている
HTMLの構造全体が各ページで重複している

同じコードを繰り返すことはRubyの「DRY」(Don’t Repeat Yourself: 繰り返すべからず) という原則に反するそうです。 ※どんなコードそんな感じな気はしますが・・・

とりあえず早速やってみましょう！ Railsのprovideメソッドを使ってタイトルをページごとに変更します。

setupメソッドを使い、繰り返し入力した内容を簡単にする ※base_titleという変数に入れるイメージかな？

$ cat 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のprovideメソッドを使ってタイトルをページごとに変更する

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

テストをする ※ここでもエラーが出ない

$ rails test
:
:
3 runs, 6 assertions, 0 failures, 0 errors, 0 skips

同様にHelp、Aboutページを修正する

$ cat app/views/static_pages/help.html.erb 
<% provide(:title, "Help") %>
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
    <h1>Help</h1>
    <p>  Get help on the Ruby on Rails Tutorial at the
      <a href="https://railstutorial.jp/help">Rails Tutorial help
      page</a>.
      To get help on this sample app, see the
      <a href="https://railstutorial.jp/#ebook">
      <em>Ruby on Rails Tutorial</em> book</a>.
    </p>
  </body>
</html>


$ cat app/views/static_pages/about.html.erb 
<% provide(:title, "About") %>
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
    <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>
  </body>
</html>

これでタイトルの可変部分をERBを使って置き換えた事になります。 <% provide(:title, "Home") %>のようにviewに記述するとlayoutのapplication.html.erbなどに <%= yield(:title) %> | サイト名と記述して呼び出せるようになるみたいです。※ググったらそんな感じで書いてありました

現在それぞれのページは次のような構造になっています。

<% provide(:title, "The Title") %>
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
    Contents
  </body>
</html>

layout_fileを元の場所に戻す、そして編集

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


$ cat app/views/layouts/application.html.erb 
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

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

◆HTML構造を削除したHomeページ app/views/static_pages/home.html.erb

$ cat app/views/static_pages/home.html.erb 
<% provide(:title, "Home") %>
<!DOCTYPE html>
<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構造を削除したHelpページ app/views/static_pages/help.html.erb

$ cat app/views/static_pages/help.html.erb 
<% provide(:title, "Help") %>
<h1>Help</h1>
<p>  Get help on the Ruby on Rails Tutorial at the
  <a href="https://railstutorial.jp/help">Rails Tutorial help section</a>.
  To get help on this sample app, see the
  <a href="https://railstutorial.jp/#ebook"><em>Ruby on Rails Tutorial</em>
  book</a>.
</p>

◆HTML構造を削除したAboutページ

$ cat app/views/static_pages/about.html.erb 
<% provide(:title, "About") %>
<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でます。

$ rails test
:
:
3 runs, 6 assertions, 0 failures, 0 errors, 0 skips

Contactページで使うコードの編集してやります

$ cat app/views/static_pages/contact.html.erb 
<% provide(:title, 'Contact') %>
<h1>Contact</h1>
<p>
  Contact the Ruby on Rails Tutorial about the sample app at the
  <a href="http://railstutorial.jp/contact">contact page</a>.
</p>

ルーティングの設定をしてやります

$ cat config/routes.rb 
Rails.application.routes.draw do
  root 'static_pages#home'
  get 'static_pages/home'
  get 'static_pages/help'
  get  'static_pages/about'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  # root 'application#hello'
end

rootルーティングに対するテストの記載

$ cat test/controllers/static_pages_controller_test.rb 
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  test "should get root" do
    get root_url
    assert_response :success
  end

  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

ここまでで結果はOK！但し、テストを変更する前から成功していたのか、変更した後に成功するようになったのか、判断が難しいです。なのでrootルーティングをコメントアウトしてみて失敗するかを確認をしてみるみます。

$ cat config/routes.rb 
Rails.application.routes.draw do
#  root 'static_pages#home'
  get 'static_pages/home'
  get 'static_pages/help'
  get  'static_pages/about'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  # root 'application#hello'
end

最後にテストをする(失敗する)事を確認ます。これでテストを変更してOKになったことがわかります。

$ rails test
:
:
4 runs, 6 assertions, 0 failures, 1 errors, 0 skips

これで3章を終わりにします！ふーなかなか時間がかかったです。次回は4章に入ります！では＾＾