Ruby on Rails tutorialを通してのメモ (第3章その3)
前回まで
- 前回はテストコードを書きながらAboutページを作成しました。
- 今回から動的なページを作成していきます。
作業開始
@ 3.4 少しだけ動的なページ
- ページのタイトルを自ら書き換えて表示するようにする。
- 本格的な動的ページは7章で開始する。
- Homeページ、Helpページ、Aboutページをそれぞれ編集し、最終的にページごとに異なるタイトルを表示する。
- ここではviewの<title>タグの内容を変更する。
- 多くのブラウザではtitleタグの内容をブラウザウィンドウの上部にタイトルタグを表示している。
- 「RED,GREEN,REFACTOR」のサイクルを全て行う。
- ページのタイトルの簡単なテストを書く。(RED)
- 3つのページにタイトルを追加する。(GREEN)
- レイアウトファイルを活用してコードの重複を解決する。(REFACOTR)
- 3つの静的ページのタイトルを「<ページ名> | Ruby on Rails Tutorial Sample App」 という形式に変更する。<ページ名>が表示しているページに応じて動的に変わる。
- レイアウトファイルは$ rails new コマンドでデフォルトで作成されている。レイアウトファイルの役割を知るために、一時的にファイル名を変更する。コマンドやエディタでファイル名を変更する。
$ mv app/views/layouts/application.html.erb layout_file
コマンド以外の場合はファイル名を "app/views/layouts/"にある "application.html.erb" から"layout_file" に変更しましょう。
@ 3.4.1 タイトルをテストする (Red)
- HTMLについてのおさらいをまず行う。
リスト3.23:Webページの典型的なHTML構造
<!DOCTYPE html> <html> <head> <title>Greeting</title> </head> <body> <p>Hello, world!</p> </body> </html>
- リスト3.23の構造には3つの要素が含まれている。
- "<!DOCTYPE html>" → document type → 使用するHTMLのバージョンをブラウザに宣言している。
- "<head>" → headセクション,<head>タグに囲まれたコード → <title>タグに囲まれた"Getting"という文字
- bodyセクション → 「Hello, wold!」という文字列がpタグ内にある。
- HTMLはスペースやタブが無視される。インデント(字下げ)は揃っていなくても問題ない。が、揃えた方がみやすい。😀
- Home,Help,Aboutページのタイトルについてテストをコードを書く。
- assert_selectメソッドを使用する。このメソッドは、特定のHTMLタグがソンンザイするかどうかをテストする。(別名セレクタと呼ばれる。)
assert_select "title", "Home | Ruby on Rails Tutorial Sample App"
- このセレクタは<title>タグ内に「Home | Ruby on Rails Tutorial Sample App」という文字列があるかをチェックする。
リスト3.24: StaticPagesコントローラのタイトルをテストする(RED)
test/controllers/static_pages_controller_test.rb
assert_select "title", "Home | Ruby on Rails Tutorial Sample App"
assert_select "title", "Help | Ruby on Rails Tutorial Sample App"
assert_select "title", "About | Ruby on Rails Tutorial Sample App"
@ 3.4.2 タイトルを追加する (Green)
- 各ページにタイトルタグ、タイトルを追加して先ほどのテストがパスするようにする。↓のコードをtutolialに習い、修正する。
リスト3.26: 完全なHTML構造を備えたHomeページのview(RED)
app/views/static_pages/home.html.erb
リスト3.27: 完全なHTML構造を備えたHelpページのview(RED)
app/views/static_pages/help.html.erb
リスト3.28: 完全なHTML構造を備えたAboutページのview(RED)
app/views/static_pages/about.html.erb
- GREENになっているか、確認してみる。
リスト3.29: GREEN
$ rails test 3 runs, 6 assertions, 0 failures, 0 errors, 0 skips
- 私の場合は、tutolialでは テスト結果が3tests,となっているところが3runsとなっていましたが、調べた結果フラグの有無で違うようです。
- titleタグを使用することにより、ブラウザのタブにタイトルがついたことが確認できたでしょうか。
@ 3.4.3 レイアウトと埋め込みRuby (Refactor)
- Home,Help,Aboutページはほとんど同じコードで作成してきた。
- DRYに反するため繰り返しコードを使用しないようにコードを作成する。
- viewで「埋め込みRuby」を使う。Railsのprovideメソッドを使ってタイトルをページごとに変更する。
リスト3.31: タイトルにERBを使ったHomeページのビューGREEN
app/views/static_pages/home.html.erb
<% provide(:title, "Home") %>
<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
- ↑は、ERBと呼ばれるWebページに動的な要素を加える時に使うテンプレートシステムのことをいう。
- 拡張子がhome.html.erbとなっているerbファイルのため、HTMLのコード内に、Rubyのコードを書くことができる。
- リスト3.31の解説↓
<% provide(:title, "Home") %>
- <% ~ %>で囲まれている中から、provideメソッドを呼び出している。引数は"Home"という文字列と:titleというラベルを関連付けている。
- このメソッドにより、テンプレートの対応する部分に実際のタイトルが挿入される。
<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
- <%= ~ %> のように<% ~ %>内に、= を追加するとyieldメソッドの実行結果がテンプレートの中に挿入される。今回ならyield(:title)の実行結果はprovide(:title,"Home")のHomeになる。
リスト3.32:GREEN
$ rails test 3 tests, 6 assertions, 0 failures, 0 errors, 0 skips
リスト3.33: タイトルにERBを使ったHelpページのビュー (GREEN)
app/views/static_pages/help.html.erb
<% provide(:title, "Help") %>
<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
リスト3.34: タイトルにERBを使ったAboutページのビュー (GREEN)
app/views/static_pages/about.html.erb
<% provide(:title, "About") %>
<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
- HTMLの構造はHome,Help,Aboutがほぼ全てのページが一緒なので、ファイル名を書き換えていたapplication.html.erbを使用してDRYする。
- 名称変更：layout_file → application.html.erb
- デフォルトのタイトル(<title>SampleApp</title>)を書き換える。
リスト3.35: サンプルアプリケーションのレイアウト(GREEN)
app/views/layouts/application.html.erb
<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
<body> <%= yield %> </body>
- <%= yield %> は各ページのレイアウトを挿入するもで、/static_pages/homeにアクセスするとhome.html.erbの内容がHTMLに変換され、<% yield %>の位置に挿入される。(という理解であれば問題ないです。)
- Railsのデフォルトのレイアウトでは、下記の行が存在する。
<%= csrf_meta_tags %> <%= stylesheet_link_tag ... %> <%= javascript_include_tag "application", ... %>
- このERBはcsrf_meta_tags,stylesheet,JavaScriptメソッドをページ内で展開するためのもの。
- <%= yield %>により、Home,Help,Aboutページはapplication.html.erbに呼び出されるため、重複する箇所があり余分な部分を削除する必要がある。
リスト3.36: HTML構造を削除したHomeページ(GREEN)
app/views/static_pages/home.html.erb
リスト3.37: HTML構造を削除したHelpページ(GREEN)
app/views/static_pages/help.html.erb
リスト3.36: HTML構造を削除したAboutページ(GREEN)
app/views/static_pages/about.html.erb
- 表示結果は重複部分がある前と変わらないが、コードが大きく削減され、リファクタリングすることができた。
- 再度、テストを実行してみる。
- 私はテストをしてみて"failures"が出ることがありました。コードの空行が抜けていた時に出たもので、コードとして動かないわけではないが、期待通りの結果出ない時に出るようです。テストコードがなければ気づけないケアレスミスを、気づくことができました。
@ 3.4.4 ルーティングの設定
- 現在の最初のページ(ルート"/"ページ)をapplication.html.erbにする。
- application_controller.rbにhelloアクションがあるので削除する。同様にルーティングにもルートがあるので削除する。(config/route.rb)
リスト3.41: HomeページをルートURLに設定する
config/routes.rb
root 'static_pages#home'
- このように、ルートパス("/")のルーティングを↓のような書き方にする。
root 'static_pages#home'
to be continued...
ここまでで、Railsのコントローラを生成し、アクションを追加し、viewを作成したので、基礎を学ぶことができました。
今後は発展的内容になるようです。
オススメの曲
NCSも結構好きです。
