【Railsチュートリアル】第5章 演習問題解答

【Railsチュートリアル】第5章 演習問題解答

レイアウトを扱っていく章です。
画面を作っていきます。

目次

5.1.1 ナビゲーション

1.Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。リスト 5.4のコマンドを使って、図 5.3のネコ画像をダウンロードしてきましょう。

解答

リスト5.4のコマンドを実行してあげましょう!

2.mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください (参考: 5.2.1)。

解答

さっきダウンロードしたファイルはどこにあるのでしょうか?
答えはカレントディレクトリです。

これを移動します。
チュートリアルの中でrails.pngを保存した
app/assets/imagesの下でOKですね。

3.image_tagを使って、kitten.jpg画像を表示してみてください (図 5.4)。

解答

home.html.erbの末尾に以下のようなコードを追加しました。

altってのは画像にテキスト情報を与えるものですね。
適当にkittenとしました。

リンク先はどこにも遷移する必要ないので#としています。
aタグ内で指定するリンク先の#はページの最上部を意味します。

5.1.2 BootstrapとカスタムCSS

1.リスト 5.10を参考にして、5.1.1.1で使ったネコ画像をコメントアウトしてみてください。また、ブラウザのHTMLインスペクタ機能を使って、コメントアウトするとHTMLのソースからも消えていることを確認してみてください。

解答


ねこちゃん出してみました。

これを消すためにリスト5.10に倣って消し去りたいと思います。
該当部分だけですが。

Rubyのコメントが#なのでイメージは近いですね。

option+command+Iを実行して
実際にHTMLのソースから消えていることを確かめます。

ねこちゃんが消えてますねー

2.リスト 5.11のコードをcustom.scssに追加し、すべての画像を非表示にしてみてください。うまくいけば、Railsのロゴ画像がHomeページから消えるはずです。先ほどと同様にインスペクタ機能を使って、今度はHTMLのソースコードは残ったままで、画像だけが表示されなくなっていることを確認してみてください。

解答

これも支持に素直に従えば良いですね。
app/assets/stylesheets/custom.scssの末尾に以下を追加します。


こんな感じでロゴも消えます。

インスペクタで見てみると

こちらはソースが残っています。

5.1.3 パーシャル (partial)

1.Railsがデフォルトで生成するheadタグの部分を、リスト 5.18のようにrenderに置き換えてみてください。ヒント: 単純に削除してしまうと後でパーシャルを1から書き直す必要が出てくるので、削除する前にどこかに退避しておきましょう。

解答

リスト5.18のファイルを作成すればOKです。

2.リスト 5.18のようなパーシャルはまだ作っていないので、現時点ではテストは redになっているはずです。実際にテストを実行して確認してみましょう。

解答

rails testを実行してください。実際にREDになればOKです。

3.layoutsディレクトリにheadタグ用のパーシャルを作成し、先ほど退避しておいたコードを書き込み、最後にテストが green に戻ることを確認しましょう。

解答

パーシャルを作るためにはファイル名の先頭をアンダースコア(_)にする必要がありましたね。

この状態でrails testを実行しましょう。結果がGREENであればOKです。

5.2.1 アセットパイプライン

1. 5.2.2で提案したように、footerのCSSを手作業で変換してみましょう。具体的には、リスト 5.17の内容を1つずつ変換していき、リスト 5.20のようにしてみてください。

解答

言われた通りにやれば良いので省略。

5.3.2 RailsのルートURL

1.実は名前付きルートは、as:オプションを使って変更することができます。有名なFar Sideの漫画に倣って、Helpページの名前付きルートをhelfに変更してみてください (リスト 5.29)。

解答

下記のようにas:を使用します。

helfになったことを確認するためにrails routesコマンドを使用します。

2.先ほどの変更により、テストが redになっていることを確認してください。リスト 5.28を参考にルーティングを更新して、テストを greenにして見てください。

解答

rails testREDなことを確認します。

テストをGREENにするためにstatic_pages_controller_test.rbを以下のように修正します。
修正部を抜粋

これでテストが通るようになります。

3.エディタのUndo機能を使って、今回の演習で行った変更を元に戻して見てください。

解答

戻せば良いだけなので省略。

5.3.3 名前付きルート

1.リスト 5.29のようにhelfルーティングを作成し、レイアウトのリンクを更新してみてください。

解答

helfルーティングの作成は省略

名前付きルートの名前がhelp_pathからhelf_pathに変わるので、
app/views/layouts/_header.html.erbを

のようにしてあげればOK。

2.前回の演習と同様に、エディタのUndo機能を使ってこの演習で行った変更を元に戻してみてください。

解答

戻すだけなので省略。

5.3.4 リンクのテスト

1.footerパーシャルのabout_pathをcontact_pathに変更してみて、テストが正しくエラーを捕まえてくれるかどうか確認してみてください。

解答

というわけで変えてみます。

テストしてみます。
aboutねえぞってエラーかcontact多いぞってエラーが出てきそうですね。

前者でしたね。
どういう結果になるか予想することも大事です。

2.リスト 5.35で示すように、Applicationヘルパーで使っているfull_titleヘルパーを、test環境でも使えるようにすると便利です。こうしておくと、リスト 5.36のようなコードを使って、正しいタイトルをテストすることができます。ただし、これは完璧なテストではありません。例えばベースタイトルに「Ruby on Rails Tutoial」といった誤字があったとしても、このテストでは発見することができないでしょう。この問題を解決するためには、full_titleヘルパーに対するテストを書く必要があります。そこで、Applicationヘルパーをテストするファイルを作成し、リスト 5.37のFILL_INの部分を適切なコードに置き換えてみてください。ヒント: リスト 5.37ではassert_equal <期待される値>, <実際の値>といった形で使っていましたが、内部では==演算子で期待される値と実際の値を比較し、正しいかどうかのテストをしています。

解答

問題文なげーw
リスト5.35,5.36についてはそれにしたがってファイルを作成してください。

full_titleってどういう関数だったかもう一度確認してみましょう。

引数がないときは「”Ruby on Rails Tutorial Sample App”」
引数があるときは「引数 | “Ruby on Rails Tutorial Sample App”」
を返します。

実際そうなっているか確かめるコードを実装すればいいですね。
こんな感じになるかと思います。

5.4.1 Usersコントローラ

1.表 5.1を参考にしながらリスト 5.41を変更し、users_new_urlではなくsignup_pathを使えるようにしてみてください。

解答

as:が使えるじゃん。と思ったけど、今回は違いましたね。

以下のようにすればOK。

2.先ほどの変更を加えたことにより、テストが redになったことを確認してください。なお、この演習はテスト駆動開発 (コラム 3.3) で説明した red/green のリズムを作ることを目的としています。このテストは次の5.4.2で greenになるよう修正します。

解答

テストします。

まあusers_new_urlが使えなくなったので然るべき結果ですね。

5.4.2 ユーザー登録用URL

1.もしまだ5.4.1.1の演習に取り掛かっていなければ、まずはリスト 5.41のように変更し、名前付きルートsignup_pathを使えるようにしてください。また、リスト 5.43で名前付きルートが使えるようになったので、現時点でテストが greenになっていることを確認してください。

解答

rails testの結果がGREENになることを確認してください。
省略

2.先ほどのテストが正しく動いていることを確認するため、signupルートの部分をコメントアウトし、テスト redになることを確認してください。確認できたら、コメントアウトを解除して greenの状態に戻してください。

解答

コメントアウトしました。

テストでREDになります。

元に戻してGREENになることを確認するところは省略。

3.リスト 5.32の統合テストにsignupページにアクセスするコードを追加してください (getメソッドを使います)。コードを追加したら実際にテストを実行し、結果が正しいことを確認してください。ヒント: リスト 5.36で紹介したfull_titleヘルパーを使ってみてください。

解答

test/integration/site_layout_test.rbに
以下の行を追加してください。

テストの結果も確認してみてください。

同じことの繰り返しのようで若干退屈になってきますね。
端折った説明しちゃってるところもありますが、くじけずやっていきましょ!


Railsチュートリアルカテゴリの最新記事