Railsチュートリアル第5章で学んだこと

第5章は最初レイアウトをやりました。

だんだんコードの量が多くなると紛らわしくなるのでパーシャルを使ってどんどん分割していくのがいいらしい。

例えば

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application',
                               'data-turbolinks-track': 'reload' %>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "sample app", '#', id: "logo" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Home",   '#' %></li>
            <li><%= link_to "Help",   '#' %></li>
            <li><%= link_to "Log in", '#' %></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

みたいに長くなるので

<!DOCTYPE html>
<html>
  <%= render 'layouts/head' %>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

みたいにコードを分割することができるパーシャルのファイル名は_header.html.erbみたいにアンダーバーを付けるといいらしい

そしてRailsではリンクタグを作るときには

<%= link_to "Home",   '#' %>
と記入するとHTMLで
<a href="#">Home</a>
という風に変換してくれる

さらに画像は
<%= image_tag("rails.svg", alt: "Rails logo") %>
を使うと
<img src="app/assets/images/rails.svg" alt="Rails logo"/>
みたいに変換してくれる

あと最近のCSSは便利なものでBootstrapを使えば誰でも気軽にきれいなCSSをつけれれるのでお得
さらにRailsにはgemがあるので導入も簡単

さらにSassを使うとCSSを見やすく簡素化して書くことも可能

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

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

↓

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: #fff;
    text-decoration: none;
  }
}

便利だなー


そして今回のレイアウト作っていくなかのリンクで

今まではURLを使ってたがRailsでは名前付きリンクを使うのが風習らしい

root_path: /
root_url: https://www.example.com/

前者はルートURL以下の文字列を、後者は完全なURLの文字列を返す。

これにするとルーティングの値も変わり

get 'static_pages/help'

と書いてたものが

get  '/help', to: 'static_pages#help'

と書くことによって名前付きリンクが使えるようになる。


そして今回はリンクを作ったのでそれが正しく動くのかというテストを書きました。
これは統合テストと言ってアプリケーションの動作を端から端までシミュレートしてテストするものです

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

このテストは

１．ルートURL（Homeページ）にGETリクエストを送る.
２．正しいページテンプレートが描画されているかどうか確かめる.
３．Home、Help、About、Contactの各ページへのリンクが正しく動くか確かめる.

assert_templeteで正確なビューページを読み込んでるかテストしてます。

そして

assert_selectで指定したタグとその個数など合ってるか調べられます。

Code	　　　　マッチするHTML
assert_select 　"div"　<div>foobar</div>
assert_select 　"div", "foobar"	<div>foobar</div>
assert_select 　"div.nav"	<div class="nav">foobar</div>
assert_select 　"div#profile"	<div id="profile">foobar</div>
assert_select 　"div[name=yo]"	<div name="yo">hey</div>
assert_select 　"a[href=?]", '/', count: 1	<a href="/">foo</a>
assert_select 　"a[href=?]", '/', text: "foo"	<a href="/">foo</a>

assert_selectはホント便利ですね

そしてヘルパーもちゃんと動くかテストするためにはべつに単体テスト書くのもいいらしい

require 'test_helper'

class ApplicationHelperTest < ActionView::TestCase
  test "full title helper" do
    assert_equal full_title,         （コードを書き込む）
    assert_equal full_title("Help"), （コードを書き込む）
  end
end

assert_equalは期待される値を先に書いてその後に実際の値を書くとテストできる。


今回から結構内容が濃くなってきた。