[Day5 Rails Tutorial]第五章完｜Webアプリっぽくなってきた！テスト楽しい[5.1〜5.5]

Day5です！

昨日は台風で大変でしたね。。

今日は電車が動かないので、予定をキャンセルして引きこもりです！

ということで、今日もがんばっていきましょー！

読んでいただいている方、いつもありがとうございます！

初心者なもので、たまに間違った内容もあるかと思います。

その際にはコメントやTwitterでご指摘いただけると幸いです！

[Day5]第五章5.1〜5.5作業ログ

今日もトピックブランチを作成して作業

git checkout -b filling-in-layout

もう慣れたもんですね。

Bootstrapの導入

BootstrapはTwitter社製らしい。知らなかった。

簡単にレスポンシブデザインにできることが強み。

bootstrap-sass gemを使ってRailsアプリケーションに導入できます

Bootstrapも’bootstrap-sass’, ‘3.3.7’というgemから導入できるみたい。

ちなみに、.scssという拡張子は、Sassy CSSの略。

RailsのAsset PipelineはデフォルトでSassをサポートしている。

これはBootstrapのLESS CSS言語によく似ている。

Railsはパーシャルという機能を使って、CSSをまとめられる

HTMLが何度も重複する場合や、論理的な単位でひとまとめにしたい場合、パーシャルという機能を使うと便利。

これはHTMLの一部を他のファイルにおいておき、それを呼び出せるようにする機能。

あるページの本筋に関係ない、サブ的なHTMLはこっちに移動すればスッキリしそう。

renderと呼ばれるRailsヘルパー呼び出しだけを使って、HTML shimのスタイルシート行を置換しています。

<%= render 'layouts/shim' %>

この行で、自動的にapp/views/layouts/_shim.html.erbというファイルを探してくれて、そこの結果を変わりに表示してくれるそう。

参照先ファイルの中身がそのままそっくり置換されるので、感覚的に設定できてGOOD。

パーシャルファイルのファイル名の頭には慣習的に”_”をつけます。

３つのアセットディレクトリ

app/assets: 現在のアプリケーション固有のアセット
lib/assets: 自分の開発チームに作成されたライブラリ用のアセット
vendor/assets: サードパーティのアセット

アセットパイプラインのメリット

普通は開発効率のために、CSSファイルやJSファイルは分割して開発する。

でも、ファイルが多ければ多いほど読み込みに時間がかかり、UXに良くない。

その問題をRailsのアセットパイプラインが解決。

開発環境ではプログラマにとって読みやすいように整理しておき、本番環境ではAsset Pipelineを使ってファイルを最小化すればよいのです。

ファイルを分けて開発していても、自動的にCSSやJSファイルたちをそれぞれ１つにしてくれる。

また、それぞれのファイルに対して、余白やインデントを取り除く最小化もしてくれる。

SassはCSSをより読みやすくする書き方

Sassは前にProgateでも勉強したけど、久しぶり。

Sassは入れ子構造や変数を使って、とても見やすくCSSがかける記法。

言語といえばいいのか、記法といえばいいのか分からない。。

とりあえずちゃんとgemをインストールしないと使えません。

Rails TutorialではGemfileのsass-rails', '5.0.6'ですね。

ここではその便利機能を３つ紹介。

入れ子構造

普通のCSS

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

.centerが繰り返している。SassでDRY(Don’t Repeat Yourself)できて、こうなります。

Sass

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

もう一つ。

普通のCSS

#logo {
  ...
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

この場合、:hoverを使うには、親属性を参照する必要があるので、&を使ってこう表現できます。

Sass

#logo {
  ...
  font-weight: bold;
  &:hover {
    color: #fff;
    text-decoration: none;
  }
}

変数

上の方で、$light-gray: #777;と定義しておけば、あとは$light-grayで呼び出せるようになる。

Sass

$light-gray: #777;
...
h2 {
  ...
  color: $light-gray;
}

footer {
  ...
  color: $light-gray;
}

視認性あがるし、変更があっても変更箇所が減るメリットあり。

ちなみにさっきの記法で、変数のシンボル(?)は

Bootstrap(LESS)は@
Sassは$

を使う。

でもbootstrap-sassというgemを使えば、Sassでも同様の変数が使えるとのこと。

ミックスイン(第七章で登場)

ミックスインも上の方で定義しておけば、下で簡単に呼び出せるというもの。

特徴は複数行をまとめてかたまりにできること。

たとえば、こんな感じ。

Sass

@mixin box_sizing {
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
...
.debug_dump {
  ...
  margin-top: 45px;
  @include box_sizing;
}

ルーティングの修正

root_path -> ‘/’
root_url -> ‘http://www.example.com/’

これらの記法を使ってルーティングを修正。

コード

Rails.application.routes.draw do
  root 'static_pages#home'
  get  '/help',    to: 'static_pages#help'
  get  '/about',   to: 'static_pages#about'
  get  '/contact', to: 'static_pages#contact'
end

またこのようにルーティングを修正すると、home_pathとかabout_pathといった名前付きルーツが自動的に使えるようになる。

リンクのテスト

まずはテストファイルの作成。

rails generate integration_test site_layout

このコマンドで、~/test/integration/のディレクトリに、site_layout_test.rbというファイルファイルができる。

site_layout_test.rb

require 'test_helper'

class SiteLayoutTest < ActionDispatch::IntegrationTest

  test "layout links" do
    get root_path
    assert_template 'static_pages/home'
    assert_select "a[href=?]", root_path, count: 2
    assert_select "a[href=?]", help_path
    assert_select "a[href=?]", about_path
    assert_select "a[href=?]", contact_path
  end
end

このテストコードの中で、

get root_pathは、root_path(/)にgetリクエストを送るテスト。

assert_template 'static_pages/home'は、適切なテンプレートファイル(views)が使われているかをテスト。

assert_select "a[href=?]", root_path, count: 2は、リンクが適切かをテスト。

ここだけちょっと詳しく説明すると、"a[href=?]"の ? には次の第二引数のroot_pathが入る。

つまりは、<a href="/about">...</a>というHTMLがあるかどうかをテストしている。

ちなみに最後のcount: 2はリンクの数。

まとめると、assert_select "a[href=?]", root_path, count: 2は、root_pathのページにroot_pathへのリンクが二箇所あるかテストしている。

本質的には、assert_selectはマッチするHTMLがあるかチェックするコード。

完成したら、rails test:integrationコマンドで早速テスト！

一気にrails testで全部まとめてテストすることもできる。

テストについては以下のサイトが参考になりました！

参考：Railsの標準テスティングフレームワークを使っていて覚えたこと

参考：module Minitest::Assertions

タケシなりの演習の回答

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

コード

mv kitten.jpg app/assets/images/

Applicationヘルパーをテストするファイルを作成し、リスト 5.37のFILL_INの部分を適切なコードに置き換えてみてください。

まずはテストファイルの作成。

rails generate integration_test application_helper

これで、~/test/integration/のディレクトリに、application_helper_test.rbというファイルファイルができる。

ファイルの中身は以下の通り。

application_helper_test.rb

require 'test_helper'

class ApplicationHelperTest < ActionDispatch::IntegrationTest
  test "full title helper" do
    assert_equal full_title, "Ruby on Rails Tutorial Sample App"
    assert_equal full_title("Help"), "Help | Ruby on Rails Tutorial Sample App"
  end
end