Rails：静的なページの作成を試してみました - Part 2

Railsチュートリアルの「3.2.2ページの追加」の部分から試してみました。

少し複雑なタスクを実行するページを新規追加します。

Aboutページのテストを追加する。

spec/requests/static_pages_spec.rb

次のコマンドでテストを実行します。(エラーになります)

$ bundle exec rspec spec/requests/static_pages_spec.rb

/static_pages/aboutというルートをroutesファイルに追加する必要があるというエラーです。config/routes.rbに about用のルートを追加すると解決します。

これでテストを実行すると『The action 'about' could not be found for StaticPagesController』というエラーが発生します。

StaticPagesコントローラの中にaboutアクションを追加すると解決します。

再度テストを実行すると『Missing template static_pages/about』というエラーが発生します。

aboutビューを追加することで解決します。具体的には、app/views/static_pagesディレクトリの中にabout.html.erbというファイルを作成します。

これでテストが正常に実行されます。

『rails s』コマンドで実際にアプリにアクセスするとエラーも無く正常に表示されることを確認できます。

正しくテストを実装することでリファクタリングでコードを変更したりしたときに、バグがないかを確認することが可能になります。

タイトル変更をテストする

次はHome、Help、Aboutページをそれぞれ編集し、ページごとに異なるタイトルが表示させます。確認するのは以下の内容です。

• 最初にタイトルのテストを作成
• 次にタイトルを追加
• 最後にレイアウトファイルを使ってリファクタリングと重複の排除を行います

まずは作業開始前にレイアウトファイルのファイル名を変更します。

$ mv app/views/layouts/application.html.erb foobar   # 一時的な変更

レイアウトファイルの役割をよりわかりやすくするために、最初にレイアウトファイルを無効にしました。

タイトルのテストです。『.to have_title』は部分一致で判定してくれます。

この変更の後にテストを実行すると次のようにエラーとなります。

これを解決するために、それぞれのhtml.erbファイルを編集します。

これでテストのエラーが解決します。

Rubyを使って動的表示

先ほどのTitleタグの追加ですが、Rubyを埋め込んで動的に値を変更することができます。

変更箇所は次のとおりです。

<% provide(:title, 'Home') %>

<title>Ruby on Rails Tutorial Sample App | <%= yield(:title) %></title>

この変更を行っても変更前と同じようにタイトルが表示されます。(テスト実行でもエラーにならないことを確認できます。)

レイアウトで共通化

Rubyを使った動的表示について確認できたので、次はレイアウトをつかった共通化を試してみます。先ほどファイル名を変更したレイアウトファイルを元に戻します。

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

このレイアウトファイルを有効にするには、デフォルトのタイトル部分を以下の埋め込みRubyのコードに差し替えます。

<title>Ruby on Rails Tutorial Sample App | <%= yield(:title) %></title>

次のコードは各ページの内容をレイアウトに挿入するためのものです。

<%= yield %>

また、Railsのデフォルトのレイアウトには次のコードがあります。

<%= stylesheet_link_tag ... %>
<%= javascript_include_tag "application", ... %>
<%= csrf_meta_tags %>

これらのコードは、スタイルシート、JavaScript、csrf_meta_tagsメソッドをそれぞれページにインクルードするためのものです。

レイアウトを利用すること各ページのコードは次のようにシンプルになります。

挿入されるのはレイアウトの『<%= yield %>』の部分なのでbodyタグの中になります。

この変更の後でもテストが正しく動作することを確認できます。これでRubyを使った値の動的な表示とレイアウトをつかったHTMLの共通化について確認できました。

最後に

差分をコミットしてマスターブランチにマージしておきます。

Gitにコミット

$ git add .
$ git commit -m "Finish static pages"

masterブランチに移動し差分をマージ

$ git checkout master
$ git merge static-pages

GitHubにPush

$ git push

Herokuにデプロイ

$ git push heroku

以上で第三章の静的なページの表示と簡単な動的表示&レイアウトの使い方について確認できました。Railsチュートリアルには演習が残っていますが今回はスキップして先に進みたいと思います。