Rails Tutorial、始めました【3章】

Rails Tutorial 3章に突入!

2章の記事はこちら↓

Rails Tutorial、始めました【2章】

第3章 ほぼ静的なページの作成

3章ではサンプルアプリケーションを作っていきます。

これがRails Tutorialのメインで、今後の章でもずっと作っていくアプリケーションになるみたいです。楽しみですね。

セットアップ

前準備です。いつものように、以下のフローをやっていきましょう

  • rails newコマンドで、アプリケーション作成
  • gitにpush
  • Hello,Worldアプリを作る
  • herokuにpushして、本番環境で確認

bundle updateしろ!

みたいなエラーは少し出ましたが、ここは特に苦労しませんでした。まあさすがに、3回目なんでね。

静的ページの作成

タイトルの通り、今回は静的ページを作成していきます。

静的ページとは、Controllerから受け取るパラメーターによってViewが変化しないページのことです。

ちなみにViewファイルになってる、拡張子がhtml.erbのファイルはrubyのコードが埋め込めるhtmlファイルです。静的ページではhtmlと全く同じ使い方をします。

最初のController、Viewは下記のコマンドで自動生成しました。

さて、これで上記のページが作成できました。

helpページも同じ感じで作成されています。そしてもうこれ、静的なページなんですよね。

チュートリアル通りに書き換えて、こんな感じになりました。(Helpページも同じ感じです。)

テストから始める

静的ページはこれで終了です。次に学ぶのはテスト駆動開発(TDD)です。

これは最初に100%失敗するテストを作っておいて、このテストを通すことを目的にコードを書く開発手法です。

実は…

railsでは簡単なテストは自動生成されます。現在テストコードは下記になっています。

これはページにアクセスしたら、成功ステータスが返って来るはず!というテストを意味しています。処理自体は何もいじってないので、もちろん実行すると成功します。

やってみよう!

今回はテストからページを開発するので、全て手動です。早速やっていきましょう。

まずはテストを追加します。

もちろんページは作ってないので、実行すると失敗します。

今回はゼロからAboutページを作っていきます。新しいページを手動で作るには、下記の3つを作成する必要があります。

  • /config/routes.rbにルーター追加
  • Controllerにメソッド追加
  • Viewに新規ページ作成

まずはroutes.rbです

次にController

最後にViewです。これはファイルごと作成します。

これにて完了!テストを実行して、成功ステータスになればOKらしいですが、ここでまさかの展開が…

なぜか成功しない!しかもエラー文は、routes.rbにaboutページがねぇぞ!と言ってます。ふぇぇ、さっき追加したじゃーん…

しかも本番環境でAboutページ見てみると、ちゃんと開けるんですよね。なぜテストが通らないのか、謎すぎるし気持ち悪いですね…

試した方法

  • テストで使ったポートのkill
  • gitにpush
  • 何回も見直して、手動で上書き保存
なお、どれも失敗に終わった模様…

1時間30分後…

trs
ぼく
よし、このテストは通ったことにしよう。

タイトルをテストする

前回まではページに正しく接続できるかどうかだけをテストしました。

だけどそれだけじゃあ、正しいページにアクセスできてるかどうかってわからないですよね。

なので次は、接続して取得したタイトル名が正しいかどうかをテストしていきましょう。

やり方は簡単、テストを下記に書き換えるだけです。


実際に動かしてみました。

あれ、成功してる!?

マジで理由がわかりませんが、ここではテストが成功しました。なんでだろう、反映されるのが遅かった?くらいしか考えられませんね。詳しい方いらしゃれば教えてください。

少し動的なページ

せっかくなので少し動的なページ作ろうぜ!って書いてありました。

今回行うことは2つです。

  • 全ページの構成をapplication.html.erbに統合
  • 各ページに動的要素を追加

まずはヘッダの統合です。

次に各ページの編集です。全ページは面倒なので、例によってHomeページだけここに載せます。

それでは見ていきましょう。

erbファイルではrubyのコードを<% %> or <=% %>で埋め込むことができます。

<%= yield %>の部分に各ページのhtmlファイルの内容が埋め込まれます。

今回統合したのはヘッダ部分だけですね

感想

この章にかかった時間は2時間30分でした。

テストの時にハマったエラーで時間取られすぎました。マジであれ、何だったんですかね〜。

今日は疲れたので次の章には進みませんが、まだまだRails Tutorial、進めていきます。

次回、4章へ続く!